php - drupal override paragraph to create a simple carousel with slick

Currently, what I am trying to do is displaying my carousel, which is made from paragraph content type, referenced to a paragraph type. In the paragraph type, I only add an image field which is limited to 3. When I add new content, it shows all the images in one vertical arrangement. I'm pretty sure I missed something, and still new to Drupal.

I tried a demo from codepen and it does work, I guess it's something wrong with how I call things in Twig or the setup from Content Type and Paragraph Type.

paragraph--hero_slider

<div class="test">
  <div>{{ content.field_media_carousel }}</div>  //How do I separate this into 3 different image, instead of counting it as one variable.
</div>
Copy code

js

(function ($) {
    $(document).ready(function () {
        'use strict';
        
        console.log('test');
        $('.test').slick({
            slidesToShow: 3,
            dots: true,
            centerMode: true,
        });
    });
})(jQuery);
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.