我有一个页面，其中有一些内容，当您单击相关链接时，内容会发生变化。所有的内容都在同一个页面上，分开。只是数据根据链接而变化。
在所有的内容中，我有一个缩略图滑块使用，我使用splide.js滑块。问题是滑块只在第一个内容div中工作，而在其他div中不工作。我意识到问题出在“splide”类上，但它是一个类，所以我可以在同一个页面中多次使用它。这说不通。有人知道如何解决这个问题吗？我也用过其他的框架，但还是遇到了同样的问题。滑块html在content1 div中只工作一次，但在content2 div中不工作（它们在同一页面中）
这是我的HTML代码
<div class="sections" id="content1">
<!-- splide.js slider -->
<section>
<div class="row slider-section">
<div class="splide primary-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="/img/slider-img.png" class="slider-img">
</li>
<li class="splide__slide">
<img src="/img/slider-img.png" class="slider-img">
</li>
<li class="splide__slide">
<img src="/img/slider-img.png" class="slider-img">
</li>
<li class="splide__slide">
<img src="/img/slider-img.png" class="slider-img">
</li>
<li class="splide__slide">
<img src="/img/slider-img.png" class="slider-img">
</li>
</ul>
</div>
</div>
<div class="splide secondary-slider mt-3">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="/img/slider-active.png">
</li>
<li class="splide__slide">
<img src="/img/slider-active.png">
</li>
<li class="splide__slide">
<img src="/img/slider-active.png">
</li>
<li class="splide__slide">
<img src="/img/slider-active.png">
</li>
<li class="splide__slide">
<img src="/img/slider-active.png">
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- splide.js slider -->
</div>这是我的JS代码
document.addEventListener('DOMContentLoaded', function () {
var secondarySlider = new Splide('.secondary-slider', {
fixedWidth: 100,
height: 90,
gap: 10,
cover: true,
isNavigation: true,
focus: 'center',
breakpoints: {
'600': {
fixedWidth: 66,
height: 40,
}
},
}).mount();
var primarySlider = new Splide('.primary-slider', {
type: 'fade',
heightRatio: 0.5,
pagination: false,
arrows: false,
cover: true,
}); // do not call mount() here.
primarySlider.sync(secondarySlider).mount();
});
1条答案
按热度按时间oymdgrw71#
Splide.js缩略图同步可能有点棘手，因为您需要在实际安装任何缩略图滑块之前定义主缩略图滑块之间的关系。
另请参阅当前文档：https://splidejs.com/tutorials/thumbnail-slider/
值得注意的是：splide.js最近更新到了3.x版本（~ 2021年8月），所以我强烈建议重新访问当前的文档。
你的问题应该通过这个修改后的代码来解决：