Как вставить изображения базы данных в jquery карусель / слайдер в Symfony 4 / веточку с помощью Paginator

Question

, поэтому я пытаюсь получить изображения из моей базы данных, чтобы получить атрибут class = 'active', однако изображения не отображаются, отображается только одно изображение.

Я использовал KnpPaginator для вставки данных, но безуспешно.

   public function getListeProduitAccueil(Request $request)
{

    $donnees = $this->produitRepository->findAll();

    $produits = $this->paginator->paginate(
        $donnees,
        $request->query->getInt('page', 1),
        1
    );
    return $produits;

и вот каталог / слайдер в индексе. html .twig

<section id="catalogue" class="sections bg-light" >
    <div class="containerr" data-aos="fade-right">
        <div>
            <center>
                <p id="catalogueHeader" data-aos="zoom-in-right">

The Catalogue </p>
                {% for produit in produits%}
            <div class="slider ">
                <li class={% if loop.index0 == 0 %} class="active" {% endif %}>
                <img src= "{{ asset('/assets/img/produits/') }}{{ produit.image }}" alt="{{ produit.image }}" >
                    <img src= "{{ asset('/assets/img/produits/') }}{{ produit.image }}" alt="{{ produit.image }}" >
                    <img src= "{{ asset('/assets/img/produits/') }}{{ produit.image }}" alt="{{ produit.image }}" >
                    <img src= "{{ asset('/assets/img/produits/') }}{{ produit.image }}" alt="{{ produit.image }}" >
                    <img src= "{{ asset('/assets/img/produits/') }}{{ produit.image }}" alt="{{ produit.image }}" >
            </li>
    </div>

            {% endfor %}
            <br><br>
            <input type="button" class="btn1" onclick="changeSlide('previous')" value="&#xf0a8" class="fas fa-arrow-circle-left">
            <input type="button" class="btn2" onclick="slideShow(this)" value="&#xf144" class="far fa-play-circle">
            <input type="button" class="btn1" onclick="changeSlide('next')" value="&#xf0a9" class="fas fa-arrow-circle-right">
        </center>

А вот Javascript Слайдер / карусель, который я сделал

    //slider
<script>
        let stopSlideshow = false;
        function slideShow(caller) {
            let status = $(caller).attr('value');
            if (status.indexOf('\uf144') > -1) {
                stopSlideshow = false;
                $(caller).attr('value','\uf28b');
            }   else {
                stopSlideshow = true;
                $(caller).attr('value','\uf144')
            }
            let interval = setInterval(function (){
                if (!stopSlideshow)
                    changeSlide('next');
                else
                    clearInterval(interval);
            }, 1500);
        }
        function changeSlide(direction) {

            let currentImg = $('.active');
            let nextImg = currentImg.next();
            let previousImg = currentImg.prev();

            if (direction === 'next') {
                if (nextImg.length)
                    nextImg.addClass('active');
                else
                    $('.slider img').first().addClass('active')
            }else{
                if (previousImg.length)
                    previousImg.addClass('active');
                else
                    $('.slider img').last().addClass('active')
            }
            currentImg.removeClass('active');
        }
    </script>

Мне бы очень хотелось понять основы c функции импорта изображений из базы данных на слайдер / карусель

спасибо