如何在Swiffy滑块中获取当前活动幻灯片的索引。有办法访问SlideIndex吗?
jchrr9hc1#
迟来的答案-但这里去。如果您通过将.slider-nav-animation类添加到slider示例来启用导航,则可见幻灯片将在可见时获得添加到其中的类.slide-visible类。如果不添加特定动画,则不会出现任何动画。然后可以使用querySelectorAll中的.slide-visible类来检索可见幻灯片。下面的例子将找到一个可见幻灯片的列表-在这个例子中,一次只显示一个幻灯片,因此返回一个列表1。如果滑块一次显示2张或更多幻灯片,则将全部返回。
.slider-nav-animation
.slide-visible
querySelectorAll
window.addEventListener('load', () => { const sliderElement = document.getElementById('myslider'); swiffyslider.onSlideEnd(sliderElement, function() { let visibleSlides = sliderElement.querySelectorAll(".slider-container .slide-visible"); let activeSlideIndex = Array.from(sliderElement.querySelector(".slider-container").children).indexOf(visibleSlides[0]); console.log(activeSlideIndex); }); });
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script> <link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous"> <div class="swiffy-slider slider-nav-animation" id="myslider" style="max-width:500px;"> <ul class="slider-container"> <li><img src="https://source.unsplash.com/49b9l_29ceA/1600x900" style="max-width: 100%;height: auto;"></li> <li><img src="https://source.unsplash.com/nKAglN6HBH8/1600x900" style="max-width: 100%;height: auto;"></li> <li><img src="https://source.unsplash.com/E9ZwWcMGzj8/1600x900" style="max-width: 100%;height: auto;"></li> </ul> <button type="button" class="slider-nav"></button> <button type="button" class="slider-nav slider-nav-next"></button> </div>
1条答案
按热度按时间jchrr9hc1#
迟来的答案-但这里去。
如果您通过将
.slider-nav-animation
类添加到slider示例来启用导航,则可见幻灯片将在可见时获得添加到其中的类.slide-visible
类。如果不添加特定动画,则不会出现任何动画。
然后可以使用
querySelectorAll
中的.slide-visible
类来检索可见幻灯片。下面的例子将找到一个可见幻灯片的列表-在这个例子中,一次只显示一个幻灯片,因此返回一个列表1。如果滑块一次显示2张或更多幻灯片,则将全部返回。