Angular:同一页面上的多个滑动滑块实例(已解决的问题)
Angular: Multiple instances of swiper slider on same page (Solved problem)
我在同一页面上使用多个实例时遇到了问题,因为所有滑块都是动态的。经过多方努力,我已经解决了这个问题。我在答案中添加了解决方案。如果这对您有帮助,请将其标记为答案。谢谢
我的问题的答案:
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:
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 }
});
}
我在同一页面上使用多个实例时遇到了问题,因为所有滑块都是动态的。经过多方努力,我已经解决了这个问题。我在答案中添加了解决方案。如果这对您有帮助,请将其标记为答案。谢谢
我的问题的答案:
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:
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 }
});
}