[英]Angular: Multiple instances of swiper slider on same page (Solved problem)
I had trouble using multiple instances on the same page because all the sliders are dynamic.我在同一页面上使用多个实例时遇到了麻烦,因为所有滑块都是动态的。 After much effort, I have solved this problem.
经过多方努力,我已经解决了这个问题。 I add the solution in the answer.
我在答案中添加了解决方案。 If this helps you, please mark it as the answer.
如果这对您有帮助,请将其标记为答案。 Thanks
谢谢
Answer of my problem:我的问题的答案:
HTML: HTML:
<div *ngFor="let item of testSliderNumber; let index = index;">
<div>
<div class="swiper-container swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
</div>
<div class="carousel-control-button">
<button class="carousel-control-item search-carousel-prev"><i
class="flaticon-left-arrow-1"></i></button>
<button class="carousel-control-item search-carousel-next"><i
class="flaticon-right-arrow-1"></i></button>
</div>
</div>
</div>
TS: TS:
import SwiperCore from 'swiper';
testSliderNumber: any = [
{
id: '1'
},
{
id: '2'
},
{
id: '3'
}
];
const swiperSliderItems= document.querySelectorAll('.swiper-container');
const prevSlide = document.querySelectorAll('.search-carousel-prev');
const nextSlide = document.querySelectorAll('.search-carousel-next');
for ( let i = 0; i < myCustomSlider.length; i++ ) {
swiperSliderItems[i].classList.add('swiper-container-' + i);
prevSlide[i].classList.add('search-carousel-prev-' + i);
nextSlide[i].classList.add('search-carousel-next-' + i);
var slider = new SwiperCore('.swiper-container-' + i, {
navigation: { prevEl: '.search-carousel-prev-'+i, nextEl: '.searchcarousel-next-'+i }
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.