Здравствуйте!
Мне нужно написать небольшой плагин слайдера на 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);
