如何在Swiper JS中设置默认的活动幻灯片

Question

我有HTML

<div class="swiper-container instance-0" data-id="nav-slider">
<ul class="swiper-wrapper nav-content__list">
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/stories">
<span class="link__text">
Stories
</span>
</a>
</li>
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/multimedia">
<span class="link__text">
Multimedia
</span>
</a>
</li>
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/press-releases">
<span class="link__text">
Press releases
</span>
</a>
</li>
</ul>
</div>

我的js:

const $navSlider = $('[data-id="nav-slider"]');
const $swiperInstances = [];
const $currentPath = window.location.pathname;
$navSlider.each(function (index, sliderElement) {
const $this = $(this);
$this.addClass(`instance-${index}`);
$swiperInstances[index] = new Swiper(sliderElement, {
slidesPerView: 'auto',
watchOverflow: true,
initialSlide: '2',
});
});

但是initialSlide对我不起作用。$swiperInstances[index].slideTo(2)不工作

我需要设置滑块中的默认项

Answer 1

您需要在afterInit()事件中使用.slideTo()。文档