Тема: Не працють одинакові слайдери
Добрий день! в мене така проблема, в мене є слайдер який я сам написав, тобто блок с картинками і дві кнопки prew і next які рухають картинки все працює, но коли я копіюю код в html тобто хочу ще один такий слайдер додати, то в мене один слайдер працює а інший ні. як зробити щоб слайдери працювали два з одним классом.
<html>
<body>
<style>
body {
background-color: #3498db;
}
.slide-wrap {
max-width: 400px;
position: relative;
overflow: hidden;
padding: 0;
display: flex;
}
.slide-item {
width: 100px;
flex-shrink: 0;
}
.slide-item img {
width: 100%;
}
h2 {
font-family: 'Lato', sans-serif;
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
height: 100%;
text-align: center;
}
.button {
margin-top: 20px;
margin-left: 150px;
}
</style>
<div class="slider">
<div class="slide-wrap">
<div class="slide-item">
<h2>1</h2>
</div>
<div class="slide-item">
<h2>2</h2>
</div>
<div class="slide-item">
<h2>3</h2>
</div>
<div class="slide-item">
<h2>4</h2>
</div>
<div class="slide-item">
<h2>5</h2>
</div>
<div class="slide-item">
<h2>6</h2>
</div>
</div>
<div class="button">
<button class="prew">prew</button>
<button class="next">next</button>
</div>
</div>
<div class="slider">
<div class="slide-wrap">
<div class="slide-item">
<h2>1</h2>
</div>
<div class="slide-item">
<h2>2</h2>
</div>
<div class="slide-item">
<h2>3</h2>
</div>
<div class="slide-item">
<h2>4</h2>
</div>
<div class="slide-item">
<h2>5</h2>
</div>
<div class="slide-item">
<h2>6</h2>
</div>
</div>
<div class="button">
<button class="prew">prew</button>
<button class="next">next</button>
</div>
</div>
<script>
var slider = document.querySelectorAll('.slider');
var count = 0;
for (var i = 0; i < slider.length; i++) {
var prew = slider[i].querySelector('.prew');
var next = slider[i].querySelector('.next');
var slideItem = slider[i].querySelectorAll('.slide-item');
var sliderWrap = slider[i].querySelector('.slide-wrap');
prew.onclick = function() {
prewSlid(slideItem);
}
next.onclick = function() {
nextSlid(slideItem);
}
}
/* NEXT-SLIDE
------------------------------------------------- */
function nextSlid() {
count += 100;
for (var i = 0; i < slideItem.length; i++) {
slideItem[i].style.transform = 'translateX(' + count + 'px)';
}
};
/* PREW-SLIDE
------------------------------------------------- */
function prewSlid() {
count += -100;
for (var i = 0; i < slideItem.length; i++) {
slideItem[i].style.transform = 'translateX(' + count + 'px)';
}
};
</script>
</body>
</html>