The script for the slider on JQuery?

Hello!
Included here is a slider
5cf785411ecd2629601343.jpeg
I just started to learn JS. The lesson is laid out with icons for Forward/backward. Everything works.
5cf787156b86e226223096.jpeg
And how to implement it in the layout? So when you click on the thumbnail of a shift to the right opinion?

Now I have such code in js. The slider - ul slides li. By default they have opacity: 0 and when you click Forward/Back you add the class active to the desired slide with opacity: 1 and the other is removed.
$(function () {
 $('.slider').each(function () {
 var $slide = $('.slide', this);
 var $prev = $('.prev', this);
 var $next = $('.next', this);


$slide.eq(0).addClass('active');

 $prev.click(function () {
 var index = $slide.filter('.active').index();
 if(index == -1) {
 index = $slide.lenght
}
$slide.eq(index-1).addClass('active').siblings().removeClass('active');
});

 $next.click(function () {
 var index = $slide.filter('.active').index();
 if(index == $slide.lenght-1) {
 index = -1
}
$slide.eq(index+1).addClass('active').siblings().removeClass('active');
});
});
});


May, does anyone have any resources with a similar implementation? Or the principle of how this happens?
Associate id as the slide thumbnail and clicking to do the transition?
Bad without knowledge of js, I understand, but I'm just learning.
I would be grateful for any help.
March 23rd 20 at 19:10
1 answer
March 23rd 20 at 19:12
Solution
On habré about it well told without water
var slideNow = 1;
var slideCount = $('#slidewrapper').children().length;
var slideInterval = 3000;
var navBtnId = 0;
var translateWidth = 0;

$(document).ready(function() {
 var switchInterval = setInterval(nextSlide, slideInterval);

 $('#viewport').hover(function() {
clearInterval(switchInterval);
 }, function() {
 switchInterval = setInterval(nextSlide, slideInterval);
});

 $('#next-btn').click(function() {
nextSlide();
});

 $('#prev-btn').click(function() {
prevSlide();
});

 $('.slide-nav-btn').click(function() {
 navBtnId = $(this).index();

 if (navBtnId + 1 != slideNow) {
 translateWidth = -$('#viewport').width() * (navBtnId);
$('#slidewrapper').css({
 'transform': 'translate(' + translateWidth + 'px, 0)',
 '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
 '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
 slideNow = navBtnId + 1;
}
});
});


function nextSlide() {
 if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) {
 $('#slidewrapper').css('transform', 'translate(0, 0)');
 slideNow = 1;
 } else {
 translateWidth = -$('#viewport').width() * (slideNow);
$('#slidewrapper').css({
 'transform': 'translate(' + translateWidth + 'px, 0)',
 '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
 '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow++;
}
}

function prevSlide() {
 if (slideNow == 1 || slideNow <= 0 || slideNow > slideCount) {
 translateWidth = -$('#viewport').width() * (slideCount - 1);
$('#slidewrapper').css({
 'transform': 'translate(' + translateWidth + 'px, 0)',
 '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
 '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
 slideNow = slideCount;
 } else {
 translateWidth = -$('#viewport').width() * (slideNow - 2);
$('#slidewrapper').css({
 'transform': 'translate(' + translateWidth + 'px, 0)',
 '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
 '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow--;
}
}
Thank you very much!)
Going to try) - gennaro_Kohler commented on March 23rd 20 at 19:15
@gennaro_Kohler, not for that) was very happy to help You) - Koby_Gerhold3 commented on March 23rd 20 at 19:18
@Koby_Gerhold3, slider figured out, everything works perfectly, thanks again) - gennaro_Kohler commented on March 23rd 20 at 19:21
@gennaro_Kohler, not for that, I was glad to help)
Contact) - Koby_Gerhold3 commented on March 23rd 20 at 19:24

Find more questions by tags jQueryJavaScript