如何解决如何修复同一页面中滑块的两个实例的冲突?
我正在尝试在同一页面上使用名为 Glider.js 的滑块的两个实例,但不幸的是,它会导致 Google chrome 移动屏幕出现奇怪的问题,无法正确加载(永久保留)加载)和 PageSpeed 也无法分析移动测试。删除滑块实例之一可以解决所有问题。这是第一张幻灯片的简化 html 结构
<div class="glider-contain">
<div id="glider-testimonios" class="glider">
<div>your content here</div>
<div>your content here</div>
<div>your content here</div>
<div>your content here</div>
</div>
<button id="glider-prev-testimonios" aria-label="Previous" class="glider-prev">«</button>
<button id="glider-next-testimonios" aria-label="Next" class="glider-next">»</button>
<div id="dots-testimonios" role="tablist" class="dots"></div>
</div>
和第二个滑块的 html
<div class="glider-contain">
<div id="glider-single" class="glider">
<div>your content here</div>
<div>your content here</div>
<div>your content here</div>
<div>your content here</div>
</div>
<button id="glider-prev-medios" aria-label="Previous" class="glider-prev">«</button>
<button id="glider-next-medios" aria-label="Next" class="glider-next">»</button>
<div id="dots-medios" role="tablist" class="dots"></div>
</div>
这是Javascript代码:
<script defer type="text/javascript">
// first slider code
window.addEventListener('load',function(){
new Glider(document.getElementById('glider-testimonios'),{
slidesToShow: 1,//'auto',slidesToScroll: 1,itemWidth: 'auto',draggable: true,scrollLock: false,dots: '#dots-testimonios',rewind: true,arrows: {
prev: '#glider-prev-testimonios',next: '#glider-next-testimonios'
},responsive: [
{
// screens greater than >= 775px
breakpoint: 483,settings: {
// Set to `auto` and provide item width to adjust to viewport
slidesToShow: 1,itemWidth: 482,duration: 0.25,exactWidth: true
}
},{
// screens greater than >= 775px
breakpoint: 974,settings: {
// Set to `auto` and provide item width to adjust to viewport
slidesToShow: 2,slidesToScroll: 2,{
// screens greater than >= 1024px
breakpoint: 1488,settings: {
slidesToShow: 3,slidesToScroll: 3,exactWidth: true
}
}
]
});
});
/* second slider code */
window.addEventListener('load',function(){
new Glider(document.getElementById('glider-single'),{
slidesToShow: 'auto',slidesToScroll: 'auto',exactWidth: false,itemWidth: 220,dots: '#dots-medios',resizeLock: false,arrows: {
prev: '#glider-prev-medios',next: '#glider-next-medios'
},responsive: [
{
breakpoint: 530,settings: {
slidesToScroll: 'auto',itemWidth: 180,slidesToShow: 'auto',resizeLock: false
}
},{
breakpoint: 800,itemWidth: 280,resizeLock: false
}
}
]
});
});
</script>
我也发现了这一点:https://codesandbox.io/s/glider-procedural-multiple-init-ndzcp?file=/src/index.js 但它对所有滑块实例使用几乎相同的方法/属性,我需要两者都不同。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。