Показать сообщение отдельно
  #7 (permalink)  
Старый 12.05.2021, 02:45
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

jquery слайдер
Здравствуйте!
Мне нужно написать небольшой плагин слайдера на JQuery, я сделала переключение слайдов, но есть пагинация. Я сделала чтобы активная точка менялась вместе со слайдом (активная синего, остальные черного). Но, по-моему, это как-то покрасивее можно записать)) перебирать может или как, пока не могу сообразить...)) И как мне сделать чтоб нажимая на точки можно было переключать слайды?)

HTML такого вида

<div class="mySlider__container">
<div class="mySlider__wrapper">
<div class="mySlider__slide">IMAGE</div>
<div class="mySlider__slide">IMAGE</div>
<div class="mySlider__slide">IMAGE</div>
<div class="mySlider__slide">IMAGE</div>
</div>
<ul class="mySlider__dots">
<li><a>DOT</a></li>
<li><a>DOT</a></li>
<li><a>DOT</a></li>
<li><a>DOT</a></li>
</ul>
</div>



(function ($) {

  $.fn.mySlider = function (interval) {

    let container = $('.mySlider__container');
    let slides = $('.mySlider__wrapper').children();
    let dots = container.find('.mySlider__dots li');
    let amount = slides.length;
    let index = 0;

    function changeSlides() {
      $(slides[index]).fadeOut(1000);
      index++;
      if (index >= amount) index = 0;
      $(slides[index]).fadeIn(1000);

      $(dots[index]).addClass('active');
      $(dots[index - 1]).removeClass('active');
      if (index == 0) {
        $(dots[3]).removeClass('active');
      }

      setTimeout(changeSlides, interval);
    }
    setTimeout(changeSlides, interval);
  };
})(jQuery);

Последний раз редактировалось Angelinasen, 12.05.2021 в 02:58.
Ответить с цитированием