Drupal переопределить абзац, чтобы создать простую карусель с гладким

В настоящее время я пытаюсь отобразить мою карусель, которая состоит из типа содержимого абзаца, ссылающегося на тип абзаца. В тип абзаца я добавляю только поле изображения, которое ограничено 3. Когда я добавляю новый контент, он показывает все изображения в одном вертикальном расположении. Я почти уверен, что что-то упустил, и все еще новичок в Drupal.

Я попробовал демонстрацию из codepen, и она действительно работает, я думаю, что-то не так с тем, как я вызываю вещи в Twig, или с настройкой из Content Type и Paragraph Type.

параграф - 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>

js

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