Как сделать несколько слайдеров на странице из имеющегося JS?

Question

[Klabiama]

Есть код слайдера, он работает правильно один, но нет идей о том, как сделать, чтобы он работал на несколько слайдеров. Как его дополнить для работы нескольких слайдеров? Я предполагаю, что нужно, чтобы у div было условно div class="slider1", div class="slider2", но как это указать в JS?

jQuery(document).ready(function(){
function htmSlider(){
/* Зададим следующие переменные */
 
/* обертка слайдера */
var slideWrap = jQuery('.slide-wrap');
/* ссылки на предудыщий иследующий слайд */
var nextLink = jQuery('.next-slide');
var prevLink = jQuery('.prev-slide');
 
var playLink = jQuery('.auto');
 
var is_animate = false;
 
/* ширина слайда с отступами */
var slideWidth = jQuery('.slide-item').outerWidth();
 
/* смещение слайдера */
var newLeftPos = slideWrap.position().left - slideWidth;
 
/* Клик по ссылке на следующий слайд */
nextLink.click(function(){
if(!slideWrap.is(':animated')) {
 
slideWrap.animate({left: newLeftPos}, 500, function(){
slideWrap
.find('.slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
});
 
}
});
 
/* Клик по ссылке на предыдующий слайд */
prevLink.click(function(){
if(!slideWrap.is(':animated')) {
 
slideWrap
.css({'left': newLeftPos})
.find('.slide-item:last')
.prependTo(slideWrap)
.parent()
.animate({left: 0}, 500);
 
}
});
 
 
/* Функция автоматической прокрутки слайдера */
function autoplay(){
if(!is_animate){
is_animate = true;
slideWrap.animate({left: newLeftPos}, 500, function(){
slideWrap
.find('.slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
is_animate = false;
});
}
}
 
/* Клики по ссылкам старт/пауза */
playLink.click(function(){
if(playLink.hasClass('play')){
playLink.removeClass('play').addClass('pause');
jQuery('.navy').addClass('disable');
timer = setInterval(autoplay, 1000);
} else {
playLink.removeClass('pause').addClass('play');
jQuery('.navy').removeClass('disable');
clearInterval(timer);
}
});
 
}
 
/* иницилизируем функцию слайдера */
htmSlider();
});

Код отдельного слайдера выглядит вот так:

<div class="slider">
<div class="slide-list">
<div class="slide-wrap">
<div class="slide-item">
<img src="/desing-v2/startpage/vtubers/Vtuber_13.png" alt="">
<span class="slide-title"> <h4>Skookum</h4></span>
</div>
 
<div class="slide-item">
<img src="/desing-v2/startpage/vtubers/Vtuber_12.png" alt="">
<span class="slide-title"> <h4>Kadeschaos</h4></span>
</div>
 
<div class="slide-item">
<img src="/desing-v2/startpage/vtubers/Vtuber_11.png" alt="">
<span class="slide-title"> <h4>JesseKotas</h4></span>
</div>
 
<div class="slide-item">
<img src="/desing-v2/startpage/vtubers/Vtuber_8.png" alt="">
<span class="slide-title"> <h4>J.Waterflame</h4></span>
</div>
 
<div class="slide-item">
<img src="/desing-v2/startpage/vtubers/Vtuber_7.png" alt="">
<span class="slide-title"> <h4>Kituroku</h4></span>
</div>
 
<div class="slide-item">
<img src="/desing-v2/startpage/vtubers/Vtuber_4.png" alt="">
<span class="slide-title"> <h4>Olipie</h4></span>
</div>
 
 
</div>
<div class="clear"></div>
</div>
<div class="navy prev-slide"></div>
<div class="navy next-slide"></div>
<div class="auto play"></div>
</div>

Answer 1

[Павел]

Передавайте класс в слайдер, при инициализации
htmSlider('.slider1');
Затем используйте это в коде, как нибудь так:

function htmSlider(slider){
/* Зададим следующие переменные */
 slider = $(slider);
/* обертка слайдера */
var slideWrap = slider.find('.slide-wrap');
/* ссылки на предудыщий иследующий слайд */
var nextLink = slider.find('.next-slide');

/* и так далее, везде где используются элементы */

Ну, и html соответственно

<div class="slider slider1">
<div class="slide-list">
<div class="slide-wrap">

Comments

[Klabiama]

Спасибо! Это помогло сделать слайдеры раздельными с: