[英]bug in next and prev buttons of carousel
我创建了 2 个轮播。 两者都是相同的克隆。css 和 .js 文件,但问题是第一个轮播的下一个和上一个按钮工作正常,但第二个轮播的下一个和上一个按钮不工作。 为什么会发生这种情况。你能解决它吗? 我还尝试通过重命名第二个轮播的类和 id,并为它制作另一个 css 文件和 js。 但它再次不起作用。 请说你能做什么。 这是 html 文件
<div id="wrapper">
<div id="carousel">
<div id="content">
<a href=""> <img class="item" src="images/b1.jpg" /></a>
<a href=""> <img class="item" src="images/images (2).jpeg" /></a>
</div>
</div>
<button id="prev">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
</svg>
</button>
<button id="next">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
</svg>
</button>
</div>
<div id="wrapper">
<div id="carousel">
<div id="content">
<a href=""> <img class="item" src="images/b1.jpg" /></a>
<a href=""> <img class="item" src="images/images (2).jpeg" /></a>
</div>
</div>
<button id="prev">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
</svg>
</button>
<button id="next">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
</svg>
</button>
</div>
CSS
#wrapper {
width: 100%;
max-width: 964px;
position: relative;
}
#carousel {
overflow: auto;
scroll-behavior: smooth;
scrollbar-width: none;
}
#carousel::-webkit-scrollbar {
height: 0;
}
#prev,
#next {
display: flex;
justify-content: center;
align-content: center;
background: white;
border: none;
padding: 8px;
border-radius: 50%;
outline: 0;
cursor: pointer;
position: absolute;
}
#prev {
top: 50%;
left: 0;
transform: translate(50%, -50%);
display: none;
}
#next {
top: 50%;
right: 0;
transform: translate(-50%, -50%);
}
#content {
display: grid;
grid-gap: 16px;
grid-auto-flow: column;
margin: auto;
box-sizing: border-box;
}
.item {
width: 200px;
height: 250px;
background: green;
}
JavaScript
const gap = 16;
const carousel = document.getElementById("carousel"),
content = document.getElementById("content"),
next = document.getElementById("next"),
prev = document.getElementById("prev");
next.addEventListener("click", e => {
carousel.scrollBy(width + gap, 0);
if (carousel.scrollWidth !== 0) {
prev.style.display = "flex";
}
if (content.scrollWidth - width - gap <= carousel.scrollLeft + width) {
next.style.display = "none";
}
});
prev.addEventListener("click", e => {
carousel.scrollBy(-(width + gap), 0);
if (carousel.scrollLeft - width - gap <= 0) {
prev.style.display = "none";
}
if (!content.scrollWidth - width - gap <= carousel.scrollLeft + width) {
next.style.display = "flex";
}
});
let width = carousel.offsetWidth;
window.addEventListener("resize", e => (width = carousel.offsetWidth));
这里的第一个轮播是完美的,但第二个下一个和上一个按钮不起作用..即使一切都一样。
正如评论中所说,页面上的所有 id 都必须是唯一的,否则总是第一个是目标。 要使其与多个按钮一起使用,您必须设置一个更灵活的系统。
您的prev和next按钮被包装在一个包装器div 中,该包装器 div 还包含carousel和content ,因此您根本不需要任何 id 。 如果您知道单击了哪个按钮,则可以使用 javascript 的 DOM 函数定位它们。 为此,有方便的event.target
。
使用类来设置 div 的样式(注意所有 id 都消失了):
<div class="wrapper">
<div class="carousel">
<div class="content">
....
</div>
</div>
<button class="prev">...</button>
<button class="next">...</button>
</div>
要将事件监听器绑定到两个(或更多!) next按钮,然后使用查询选择器查找所有具有名为next
的queryselector
的元素。 您可以使用它将事件侦听器绑定到所有next
按钮:
var all_next = document.querySelectorAll(".next");
all_next.forEach( function(el){
el.addEventListener( "click", function(event){
//get the clicked button
var clicked_element = e.target;
// do something here
....
}
})
从行var clicked_element = e.target;
您现在确切地知道单击了哪个按钮,并计算出与之相关的包装器、轮播和容器:
//get the wrapper (is the parent of NEXT)
var wrapper = clicked_element.parentNode;
//get the carousel (is first child of wrapper)
var carousel = wrapper.children[0];
//get the content (is first child of carousel)
var content = carousel.children[0];
现在您可以对所需元素施展魔法了。
对上prev
按钮重复此操作。
起初它可能看起来有点工作,但你知道更灵活。 如果 id 尚未使用,您可以添加额外的包装器而无需计算。
注意这个答案可能有错字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.