swiper options don't recognized
Opened this issue · 0 comments
cadot-eu commented
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 ?