How to set up a Jq script for 2 sliders on a page?

Question

JavaScript

Hello!
Can you please tell me how can I set up the script so that it works for two sliders?
https://jsfiddle.net/1fkdj5y3/28/

The markup is planned to be identical

<div class="slider">
  <div class="next"></div>
  <div class="prev"></div>
  <div class="slides">
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-left.jpg" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-right.jpg" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-left.jpg"/>
    </div>
  </div>
  <div class="navigation"></div>
  </div>

I'll change the styles a little later for the second

body {
margin:0;
text-align:center;
}

body .slider {
overflow:hidden; /* Скрываем всё что за блоком слайдера */
position:relative;
width:800px;
height:500px;
margin:0 auto;
}

body .slider .slides {
position:relative;
transition:1s; /* Задаем время изменения блока, отвечает за плавную прокрутку */
}
body .slider .slides .slide {
float:left;
display:block;
}
 
body .slider .slides .slide img{
width:800px;
height:500px;
}

body .slider .next {
position:absolute;
height:50px;
width:50px;
background:#009900;
right:0;
top:225px;
z-index:1;
cursor:pointer;
}

body .slider .prev {
position:absolute;
height:50px;
width:50px;
background:#009900;
left:0;
top:225px;
z-index:1;
cursor:pointer;
}

body .slider .navigation {
position:absolute;
width:100%;
bottom:40px;
left:0;
z-index:1;
cursor:pointer;
}

body .slider .navigation .dot {
display:inline-block;
width:16px;
height:16px;
background:#666666;
cursor:pointer;
border-radius:16px;
margin:0 20px;
border:1px solid #666666;
}

body .slider .navigation .active {
background:#fff;
}

here is the script

$(document).ready(function() { // Ждём загрузки страницы

  var slides = $(".slider .slides").children(".slide"); // Получаем массив всех слайдов
  var width = $(".slider .slides").width(); // Получаем ширину видимой области
  var i = slides.length; // Получаем количество слайдов
  var offset = i * width; // Задаем начальное смещение и ширину всех слайдов
  var cheki = i-1;
  
  $(".slider .slides").css('width',offset); // Задаем блоку со слайдами ширину всех слайдов
  
  for (j=0; j < slides.length; j++) {
  if (j==0) {
    $(".slider .navigation").append("<div class='dot active'></div>");
  }
    else {
        $(".slider .navigation").append("<div class='dot'></div>");
  }
  }
  
var dots = $(".slider .navigation").children(".dot");
offset = 0; // Обнуляем смещение, так как показывается начала 1 слайд
i = 0; // Обнуляем номер текущего слайда

$('.slider .navigation .dot').click(function(){
  $(".slider .navigation .active").removeClass("active");                           
  $(this).addClass("active");
  i = $(this).index();
  offset = i * width;
  $(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
});

$("body .slider .next").click(function(){    // Событие клика на кнопку "следующий слайд"
  if (offset < width * cheki) {    // Проверяем, дошли ли мы до конца
  offset += width; // Увеличиваем смещение до следующего слайда
  $(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
  $(".slider .navigation .active").removeClass("active");   
  $(dots[++i]).addClass("active");
  }
});

$("body .slider .prev").click(function(){    // Событие клика на кнопку "предыдущий слайд"
if (offset > 0) { // Проверяем, дошли ли мы до конца
offset -= width; // Уменьшаем смещение до предыдущегоо слайда
$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к предыдущему
$(".slider .navigation .active").removeClass("active");   
$(dots[--i]).addClass("active");
}
});
});

Thank you very much in advance!!!

Answer 1

It is necessary to wrap all the functionality in

$(".slider").each(function(){
// Здесь функционал слайдера
});

But to indicate slides and so on DO NOT USE

$('.slider .slides')
$('.slider .navigation')

And do selects like this:

$(this).find(".slides")
$(this).find(".navigation")