How to make multiple sliders on a page from existing JS?

Question

Slider

There is a slider code, it works correctly on its own, but no ideas on how to make it work for multiple sliders. How to add it for multiple sliders to work? I'm assuming that the div needs to conditionally have div class="slider1", div class="slider2", but how do I specify this in 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();
});

The code for a single slider looks like this:

<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

Pass the class to the slider on initialization Then use it in your code like this:
htmSlider('.slider1');

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

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

Well, html, respectively

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