How to make the circles light up depending on the slide?

https: // jsfiddle.net/7f5q44dg/ (space to remove)

Closed due to the fact that it was off topic by aleksandr barakin , Igor , cheops , Sergey Glazirin , 0xdb Jun 6 '18 at 23:57 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - aleksandr barakin, Igor, cheops, Sergey Glazirin, 0xdb
If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    Here is a small hint, I added a couple of lines, now it works when scrolling through the slides forward, and how to make it back I think you'll figure it out further. Good luck

    var slideNow = 1; var slideCount = $('#slidewrapper').children().length; var slideInterval = 3000; var navBtnId = 0; var translateWidth = 0; $('.slide-nav-btn:eq('+(slideNow-1)+')').css('background', 'red'); $(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() { $('.slide-nav-btn:eq('+slideNow+')').css('background', 'red'); $('.slide-nav-btn:eq('+(slideNow-1)+')').css('background', 'white'); if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) { $('.slide-nav-btn:eq('+(slideNow-4)+')').css('background', 'red'); $('#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); $('.slide-nav-btn:eq('+slideNow+')').css('background', 'red'); $('#slidewrapper').css({ 'transform': 'translate(' + translateWidth + 'px, 0)', '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', '-ms-transform': 'translate(' + translateWidth + 'px, 0)', }); slideNow--; } }