I want to add a slide change through the class. But I don’t know what logic to add to the class. Navigation only on the pengetation buttons. While this model is implemented. The easiest thing to do is make it through a condition?

$(document).ready(function() { $(".project-gallerey").each(function() { // обрабатываем каждый слайдер var obj = $(this); $(obj).find(".slider-image").each(function() { $(obj).find(".pagination-gallerey").append("<span class='nav-pengetation' rel='" + $(this).index() + "'></span>"); // добавляем блок навигации $(this).addClass("slider" + $(this).index()); }); $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню }); }); function sliderJS(obj, sl) { // slider function var ul = $(sl).find("ul"); // находим блок var bl = $(sl).find("li.slider" + obj); // находим любой из элементов блока var step = $(bl).width(); // ширина объекта $(ul).animate({ 'propForTransformAnimation': step * (+obj) }, { step: function(now, fx) { $(this).css({ "transform": "translate3d( " + -now + "px, 0px, 0px)" }); }, duration: 500, easing: 'linear', queue: false, complete: function() {} }, 'linear'); // 500 это скорость перемотки } $(document).on("click", ".nav-pengetation", function() { // slider click navigate var sl = $(this).closest(".project-gallerey"); // находим, в каком блоке был клик $(sl).find("span").removeClass("on"); // убираем активный элемент $(this).addClass("on"); // делаем активным текущий var obj = $(this).attr("rel"); // узнаем его номер sliderJS(obj, sl); // слайдим return false; }); 
 .base { width: 1024px; margin: 0 auto; } .project-gallerey { float: left; width: 50%; position: relative; } .project-info { float: left; width: 50%; padding-left: 20px; z-index: 2; background: rgba(255, 255, 255, .8); } .pagination-gallerey { // position: absolute; // top: 0; // left: 0; // right: 0; // margin: 0 auto; text-align: center; height: 50px; } .nav-pengetation { width: 15px; height: 15px; display: inline-block; background: #dfdfdf; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3) inset; border-radius: 100%; margin-left: 5px; cursor: pointer; &: first-child { margin-left: 0; } &:hover { background: #3e8dd8; box-shadow: none; } } .on { background: #3e8dd8; } .slider-gallerey { overflow: hidden; } .sliders-wrapper { width: 2500px; } .slider-image { float: left; width: 520px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="base"> <div class="close-modal"></div> <div class="project-gallerey"> <div class='pagination-gallerey'></div> <div class="slider-gallerey"> <ul class="sliders-wrapper"> <li class="slider-image"> <img src="http://placehold.it/100/e499e4/fff&amp;text=1" alt=""> </li> <li class="slider-image"> <img src="http://placehold.it/100/e499e4/fff&amp;text=2" alt=""> </li> <li class="slider-image"> <img src="http://placehold.it/100/e499e4/fff&amp;text=3" alt=""> </li> </ul> </div> </div> <div class="project-info"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, aut tenetur dolore, quisquam, tempora modi praesentium aperiam dolor explicabo totam, iure magnam dolores sunt quibusdam aliquam fugit ratione nihil nulla. Molestias voluptas exercitationem, quasi beatae, aut minima quo iure autem cum, alias id aspernatur, facere aliquam? Nihil reprehenderit doloribus libero eius voluptate error sequi illum! Aliquam commodi aliquid ad itaque quo, iusto voluptatem ullam accusantium assumenda ex libero sed magni aut nesciunt excepturi numquam dolorem doloribus voluptatum incidunt fugiat fugit eius? Minus laborum maxime consectetur, quas, hic iure vel molestias at assumenda asperiores accusantium ducimus eius! Ipsa quibusdam, earum repellat harum, perspiciatis provident aperiam doloribus ullam at soluta autem, dolores recusandae quod deserunt nam perferendis, veniam quasi excepturi necessitatibus accusantium. At eius voluptate obcaecati eligendi, voluptatibus nobis sint, quaerat, illum odio libero vitae! Maiores molestiae quia quos dolore nam dolores consequuntur esse nesciunt. Commodi consequatur quis nulla dolore, alias in. </div> </div>

    1 answer 1

     function Slider($slider) { var $slides = $slider.find('.slide'), active_slide = null, $pagination_box = $('<div class="pagination"></div>'), $buttons = $(); $slides.each(function(i) { var $btn = $('<span class="pagination__item"></span>'); $btn.on('click', setActiveSlide.bind($btn, i)); $pagination_box.append($btn); }); $pagination_box.appendTo($slider); $buttons = $pagination_box.find('.pagination__item'); function setActiveSlide(index) { $slides.each(function(i, $slide) { if (i === index) { $($slide).addClass('slide--active'); $($buttons[i]).addClass('pagination__item--active'); } else if (i === active_slide) { $($buttons[i]).removeClass('pagination__item--active'); $($slide).removeClass('slide--active'); } }); active_slide = index; } setActiveSlide(0); } $(function() { Slider($('.slider')); }); 
     .slider__content { position: relative; width: 500px; height: 200px; } .slide { position: absolute; width: 100%; height: 100%; color: #fff; font-size: 22px; opacity: 0; transition: opacity ease 0.2s; } .slide--active { opacity: 1; } .pagination__item { width: 15px; height: 15px; border-radius: 100%; background-color: gray; display: inline-block; } .pagination__item--active { background-color: blue; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="slider"> <div class="slider__content"> <div class="slide" style="background: red;">SLIDE 1</div> <div class="slide" style="background: yellow;">SLIDE 2</div> <div class="slide" style="background: green;">SLIDE 3</div> <div class="slide" style="background: black;">SLIDE 4</div> <div class="slide" style="background: #EBADE9;">SLIDE 5</div> </div> </div>

    Jsfiddle