stimulus-carousel icon indicating copy to clipboard operation
stimulus-carousel copied to clipboard

swiper options don't recognized

Open cadot-eu opened this issue 2 years ago • 0 comments

i have in my controller: carousel_controller.js

import Carousel from 'stimulus-carousel'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
export default class extends Carousel {
    connect() {
        super.connect()
        this.swiper
        this.defaultOptions
    }

    // You can set default options in this getter.
    get defaultOptions() {
        return {
            preloadImages: false,
            lazy: true,
            spaceBetween: 0,
            speed: 500,
            centeredSlides: true,
            loop: true,
            autoplay: {
                delay: 1300,
                disableOnInteraction: true,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                type: 'progressbar'
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            scrollbar: {
                el: '.swiper-scrollbar'
            },
        }
    }
}

and this in a twig file

<div class="col-lg-4">
	<div class="post-entry-1 lg">
		{% if encyclopedie['dernier'].image %}
			<a href="single-post.html"><img src="{{asset(encyclopedie['dernier'].image)}}" alt="" class="img-fluid " data-controller="apparaitre" data-apparaitre-class-value="shadow-drop-bl"></a>
		{% endif %}
		<div class="post-meta">
			<span class="date">{{encyclopedie['dernier'].getCategoriesjoin}}</span>
			<span>{{(encyclopedie['dernier'].updatedAt?encyclopedie['dernier'].updatedAt:encyclopedie['dernier'].createdAt)|date('d/m à H:i', "Europe/Paris")}}</span>
		</div>
		<h2>
			<a href="single-post.html">{{encyclopedie['dernier'].titre}}</a>
		</h2>
		<p class="mb-4 d-block">{{TBckintro(encyclopedie['dernier'].article)}}</p>
		<div class="d-flex align-items-right author">
			<button class="btn btn-primary col">Lire l'article</button>
		</div>

	</div>

</div>

My problem is the option pagination. The twig is don't recognized.

Do you have a idea ?

cadot-eu avatar Apr 24 '22 10:04 cadot-eu