我尝试使用 https://nickpiscitelli.github.io/Glider.js/ 中的 glider.js 创建轮播.我遵循了所有步骤,但它不起作用。你能帮我吗?我点击箭头,它不动。
<div class="glider-contain">
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<div class="glider">
<div> <img src="./img/barcelona-img.png" alt="Barcelona"></div>
<div> <img src="./img/madrid.png" alt="Madrid"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
</div>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
<script src="./glider.min.js"></script>
<script src="../index.js "></script>
<script>
new Glider(document.querySelector('.glider'), {
slidesToShow: 3,
dragable: true,
arrows: {
prev: '.glider.prev',
next: '.glider-next'
}
})
</script>
最佳答案
代码中的问题:
.glider.prev
代替.glider-prev
;dragable
参数无效,需要draggable
;</div>
在标记的末尾,不是关键的。为了获得更高的可靠性,您可以将初始化包装在
window.addEventListener('load', function() { ... })
中。 ,尽管在您的情况下这不是必需的,因为在初始化之前一切都准备好了。虽然作者更喜欢换行 https://nickpiscitelli.github.io/Glider.js/ (使用标签)。这是一个最小工作滑翔机配置的示例:
new Glider(document.querySelector('.glider'), {
slidesToShow: 2,
draggable: true,
arrows: {
prev: '.glider-prev',
next: '.glider-next'
},
dots: '.dots'
})
.wrapperForDemo {
width: 500px;
max-width: 80%;
margin: 0 auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
<div class="wrapperForDemo">
<div class="glider-contain">
<div class="glider">
<div><img src="https://placeimg.com/300/200/arch" alt="Barcelona"></div>
<div><img src="https://placeimg.com/300/200/animals" alt="Barcelona"></div>
<div><img src="https://placeimg.com/300/200/tech" alt="Barcelona"></div>
<div><img src="https://placeimg.com/300/200/people" alt="Barcelona"></div>
</div>
<button role="button" aria-label="Previous" class="glider-prev">«</button>
<button role="button" aria-label="Next" class="glider-next">»</button>
<div role="tablist" class="dots"></div>
</div>
</div>
关于javascript - Glider.js 不工作。我的旋转木马,使用滑翔机 JS 不工作/,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60347969/