Jquery Slider With Controls And Automatic Scrolling

Basically I am just trying to do random jQuery stuff for educational purpose, and here is my very simple slider. I want it to work automatically and also with controls (little arro

Solution 1:

Slideshow with prev/next buttons, autoslide, pause on hover

Instead of jQuery's .animate() and animating the left CSS property, use the GPU accelerated CSS transform: translateX for the animation on a common slides wrapper element

$(".SlideShow").each((i, EL) => {

  const
    $parent = $(EL),
    $slides = $(".SlideShow-slides", EL),
    $item = $(".SlideShow-item", EL),
    $prevNext = $(".SlideShow-btn", EL),
    tot = $item.length,
    mod = (n, m) => ((n % m) + m) % m;

  let
    c = 0,
    itv;

  constprev = () => {c = mod(--c, tot); anim();};
  constnext = () => {c = mod(++c, tot); anim();};
  constanim = () => $slides.css({transform: `translateX(-${c * 100}%)`});
  conststop = () => clearInterval(itv);
  constplay = () => itv = setInterval(next, 4000);
  
  $prevNext.on("click", (ev) => $(ev.currentTarget).is(".next") ? next() : prev());
  $parent.hover(stop, play);
  play(); // start

});

.SlideShow {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 180px;
}

.SlideShow-slides {
  display: flex;
  flex-flow: row-nowrap;
  height: 100%;
  width: 100%;
  transition: transform 0.7s; /* Animation duration here */
}

.SlideShow-item {
  min-width: 100%;
}

.SlideShow-item>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.SlideShow-btn {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 50px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  border: 0;
  cursor: pointer;
}

.SlideShow-btn:hover {
  opacity: 1;
}

.SlideShow-btn.next {
  right: 0px;
}

<divclass="SlideShow"><divclass="SlideShow-slides"><divclass="SlideShow-item"><imgsrc="http://placehold.it/600x400/0bf?text=A"alt=""></div><divclass="SlideShow-item"><imgsrc="http://placehold.it/600x400/fb0?text=B"alt=""></div><divclass="SlideShow-item"><imgsrc="http://placehold.it/600x400/0fb?text=C"alt=""></div></div><buttontype="button"class="SlideShow-btn prev"></button><buttontype="button"class="SlideShow-btn next"></button></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Solution 2:

What you need to do it to clear the interval in the button clicks and start interval again.

functionresetInterval(){ //add this method which wil reset the timerwindow.clearInterval(looper); //clear current interval
        looper = setInterval(autoSlide, 5000); //start auto slide again.
}
functionautoSlide(){ //move this to a function from being anonymous// remove and add class active
        $('.active').removeClass('active').next().addClass('active');
        // animation expression
        $('.active').animate({
            'left': '-=' + (slideWidth) + 'px'
        }, 500);
        $('.active').siblings().animate({
            'left': '-=' + (slideWidth) + 'px'
        }, 500);

        // return to first slide after the last oneif ($('.active').length === 0) {
            $('#slide1').addClass('active');
            $('.slides').animate({
                'left': 0
            }, 500);
        }
}

and

 $('.control_left').on('click', function () {
        resetInterval(); //reset it
 ....

$('.control_right').on('click', function () {
        resetInterval(); //reset it
....

Demo