0

I have a "test" content type with a title, body, and a media entity field that allows for multiple images. I installed Slick Slider 2.2. I mostly followed the steps outlined here: https://www.ostraining.com/blog/drupal/how-to-use-the-slick-module-in-drupal-8/.

I configured the field to use the Slick Media formatter.

enter image description here

When I add a node with the "test" content type and add two images in the image field, the next/prev buttons appear but I can't see the images. See video of slider animation.

I tried this on two different content types and I also tried using layout builder and got the same result.

I don't see any console errors.

I am running:

  • Drupal: 8.9.3
  • Slick: 2.2

2 Answers 2

0

I accomplished what you're trying to do using Slick Carousel together with Slick Views.

You can create a content-type that you intend to be aggregated into the slideshow. In my case a testimonial type consisting of a background image and overlying text.

You can create a views block and set its format to Slick Carousel. You will be provided with setting options to configure the slideshow as you wish.

Filter your view by the content-type you want to comprise your slideshow, in my case testimonial.

lastly, pull your views block slideshow into another piece of content via entity reference.

1
  • That seems like overkill for accomplishing what I need. I basically want to allow users to upload more than one Hero image on the content type and then show those images at the top of the page in carousel format. Slick provides this functionality, but for some reason, it's not working for me. Sep 3, 2020 at 12:16
0

For anyone that has a similar issue although it's unlikely, the problem was the SCSS below:

.sr-only {
  position: absolute !important; /* Outside the DOM flow */
  height: 1px; width: 1px; /* Nearly collapsed */
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
  clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

[aria-hidden="true"] {
  @extend .sr-only;
}

More specifically, the position: absolute line.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.