Automate this functional slider?

July 16, 2022

There is this project I was trying to work on (previously developed by someone else). I made changes to the slideable and draggable slider which already looks functional. However, from the pre-written code structure I am a bit indecisive as to how to automate this slider. That is, to make it a carousel. I could implement this by myself, the thing is, I have been given an impromptu task of putting this component into a site my team is currently developing and I do not want to delay, as I have few hours from now to deliver this feature.

var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('slides'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

    function slide(wrapper, items, prev, next) {
        var posX1 = 0,
        posX2 = 0,
        posInitial,
        posFinal,
        threshold = 100,
        slides = items.getElementsByClassName('slide'),
        slidesLength = slides.length,
        slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
        firstSlide = slides[0],
        lastSlide = slides[slidesLength - 1],
        cloneFirst = firstSlide.cloneNode(true),
        cloneLast = lastSlide.cloneNode(true),
        index = 0,
        allowShift = true;

        // Clone first and last slide
        items.appendChild(cloneFirst);
        items.insertBefore(cloneLast, firstSlide);
        wrapper.classList.add('loaded');

        // Mouse events
        items.onmousedown = dragStart;

        // Touch events
        items.addEventListener('touchstart', dragStart);
        items.addEventListener('touchend', dragEnd);
        items.addEventListener('touchmove', dragAction);

        // Click events
        prev.addEventListener('click', function () { shiftSlide(-1) });
        next.addEventListener('click', function () { shiftSlide(1) });

        // Transition events
        items.addEventListener('transitionend', checkIndex);

        function dragStart (e) {
            e = e || window.event;
            e.preventDefault();
            posInitial = items.offsetLeft;

            if (e.type == 'touchstart') {
                posX1 = e.touches[0].clientX;
            } else {
                posX1 = e.clientX;
                document.onmouseup = dragEnd;
                document.onmousemove = dragAction;
            }
        }

        function dragAction (e) {
            e = e || window.event;

            if (e.type == 'touchmove') {
                posX2 = posX1 - e.touches[0].clientX;
                posX1 = e.touches[0].clientX;
            } else {
                posX2 = posX1 - e.clientX;
                posX1 = e.clientX;
            }

            items.style.left = (items.offsetLeft - posX2) + "px";
        }

        function dragEnd (e) {
            posFinal = items.offsetLeft;

            if (posFinal - posInitial < -threshold) {
                shiftSlide(1, 'drag');
            } else if (posFinal - posInitial > threshold) {
                shiftSlide(-1, 'drag');
            } else {
                items.style.left = (posInitial) + "px";
            }

            document.onmouseup = null;
            document.onmousemove = null;
        }

        function shiftSlide(dir, action) {
            items.classList.add('shifting');

            if (allowShift) {
                if (!action) { posInitial = items.offsetLeft; }
                if (dir == 1) {
                    items.style.left = (posInitial - slideSize) + "px";
                    index++;
                } else if (dir == -1) {
                    items.style.left = (posInitial + slideSize) + "px";
                    index--;
                }
            };

            allowShift = false;
        }

        function checkIndex (){
            items.classList.remove('shifting');
            if (index == -1) {
                items.style.left = -(slidesLength * slideSize) + "px";
                index = slidesLength - 1;
            }

            if (index == slidesLength) {
                items.style.left = -(1 * slideSize) + "px";
                index = 0;
            }

            allowShift = true;
        }
    }

    slide(slider, sliderItems, prev, next);

@import url('https://fonts.googleapis.com/css?family=Roboto');
        * {
            box-sizing: border-box;
        }
        body {
            height: 100%;
            background-color: #3f3f3f;
            color: #333;
            font-family: 'Roboto', sans-serif;
            text-align: center;
            letter-spacing: 0.15em;
            font-size: 22px;
        }
        .slider {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*width: 400px;*/
            /*height: 300px;*/
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
        }
        .wrapper {
            overflow: hidden;
            position: relative;
            width: 300px;
            height: 200px;
            z-index: 1;
        }
        .slides {
            display: flex;
            position: relative;
            top: 0;
            left: -300px;
            width: 10000px;
        }
        .slides.shifting {
            transition: left 0.2s ease-out;
        }
        .slide {
            width: 300px;
            height: 200px;
            cursor: pointer;
            display: flex;
            align-items: center;
            /*flex-direction: column;*/
            justify-content: center;
            transition: all 1s;
            position: relative;
            background: #FFCF47;
            border-radius: 2px;
        }
        .slider.loaded .slide:nth-child(2), .slider.loaded .slide:nth-child(7) {
            background: #FFCF47;
        }
        .slider.loaded .slide:nth-child(1), .slider.loaded .slide:nth-child(6) {
            background: #7ADCEF;
        }
        .slider.loaded .slide:nth-child(3) {
            background: #3CFF96;
        }
        .slider.loaded .slide:nth-child(4) {
            background: #a78df5;
        }
        .slider.loaded .slide:nth-child(5) {
            background: #ff8686;
        }
        .control {
            position: absolute;
            top: 50%;
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 50px;
            margin-top: -20px;
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }
        .prev, .next {
            background-size: 22px;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
        }
        .prev {
            background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
            left: -20px;
        }
        .next {
            background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
            right: -20px;
        }
        .prev:active, .next:active {
            transform: scale(0.8);
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS | Plain javascript draggable infinite slider</title>
</head>
<body>
    <div id="slider" class="slider">
        <div class="wrapper">
            <div id="slides" class="slides">
                <span class="slide">Slide 1</span>
                <span class="slide">Slide 2</span>
                <span class="slide">Slide 3</span>
                <span class="slide">Slide 4</span>
                <span class="slide">Slide 5</span>
            </div>
        </div>
        <a id="prev" class="control prev"></a>
        <a id="next" class="control next"></a>
    </div>
</body>
</html>

Everything looks fine, I just want it to move automatically, as in a carousel.

Please help me out. Thank you 🙂

>Solution :

Just use setInterval to fire the click event on next at intervals

var slider = document.getElementById('slider'),
  sliderItems = document.getElementById('slides'),
  prev = document.getElementById('prev'),
  next = document.getElementById('next');

// *****************
setInterval(()=>{
  next.click();
},1000);
// *****************

function slide(wrapper, items, prev, next) {
  var posX1 = 0,
    posX2 = 0,
    posInitial,
    posFinal,
    threshold = 100,
    slides = items.getElementsByClassName('slide'),
    slidesLength = slides.length,
    slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
    firstSlide = slides[0],
    lastSlide = slides[slidesLength - 1],
    cloneFirst = firstSlide.cloneNode(true),
    cloneLast = lastSlide.cloneNode(true),
    index = 0,
    allowShift = true;

  // Clone first and last slide
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.classList.add('loaded');

  // Mouse events
  items.onmousedown = dragStart;

  // Touch events
  items.addEventListener('touchstart', dragStart);
  items.addEventListener('touchend', dragEnd);
  items.addEventListener('touchmove', dragAction);

  // Click events
  prev.addEventListener('click', function() {
    shiftSlide(-1)
  });
  next.addEventListener('click', function() {
    shiftSlide(1)
  });

  // Transition events
  items.addEventListener('transitionend', checkIndex);

  function dragStart(e) {
    e = e || window.event;
    e.preventDefault();
    posInitial = items.offsetLeft;

    if (e.type == 'touchstart') {
      posX1 = e.touches[0].clientX;
    } else {
      posX1 = e.clientX;
      document.onmouseup = dragEnd;
      document.onmousemove = dragAction;
    }
  }

  function dragAction(e) {
    e = e || window.event;

    if (e.type == 'touchmove') {
      posX2 = posX1 - e.touches[0].clientX;
      posX1 = e.touches[0].clientX;
    } else {
      posX2 = posX1 - e.clientX;
      posX1 = e.clientX;
    }

    items.style.left = (items.offsetLeft - posX2) + "px";
  }

  function dragEnd(e) {
    posFinal = items.offsetLeft;

    if (posFinal - posInitial < -threshold) {
      shiftSlide(1, 'drag');
    } else if (posFinal - posInitial > threshold) {
      shiftSlide(-1, 'drag');
    } else {
      items.style.left = (posInitial) + "px";
    }

    document.onmouseup = null;
    document.onmousemove = null;
  }

  function shiftSlide(dir, action) {
    items.classList.add('shifting');

    if (allowShift) {
      if (!action) {
        posInitial = items.offsetLeft;
      }
      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;
      }
    };

    allowShift = false;
  }

  function checkIndex() {
    items.classList.remove('shifting');
    if (index == -1) {
      items.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
    }

    if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }

    allowShift = true;
  }
}

slide(slider, sliderItems, prev, next);

@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
  box-sizing: border-box;
}

body {
  height: 100%;
  background-color: #3f3f3f;
  color: #333;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 22px;
}

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*width: 400px;*/
  /*height: 300px;*/
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.wrapper {
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 200px;
  z-index: 1;
}

.slides {
  display: flex;
  position: relative;
  top: 0;
  left: -300px;
  width: 10000px;
}

.slides.shifting {
  transition: left 0.2s ease-out;
}

.slide {
  width: 300px;
  height: 200px;
  cursor: pointer;
  display: flex;
  align-items: center;
  /*flex-direction: column;*/
  justify-content: center;
  transition: all 1s;
  position: relative;
  background: #FFCF47;
  border-radius: 2px;
}

.slider.loaded .slide:nth-child(2),
.slider.loaded .slide:nth-child(7) {
  background: #FFCF47;
}

.slider.loaded .slide:nth-child(1),
.slider.loaded .slide:nth-child(6) {
  background: #7ADCEF;
}

.slider.loaded .slide:nth-child(3) {
  background: #3CFF96;
}

.slider.loaded .slide:nth-child(4) {
  background: #a78df5;
}

.slider.loaded .slide:nth-child(5) {
  background: #ff8686;
}

.control {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prev {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
  left: -20px;
}

.next {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
  right: -20px;
}

.prev:active,
.next:active {
  transform: scale(0.8);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JS | Plain javascript draggable infinite slider</title>
</head>

<body>
  <div id="slider" class="slider">
    <div class="wrapper">
      <div id="slides" class="slides">
        <span class="slide">Slide 1</span>
        <span class="slide">Slide 2</span>
        <span class="slide">Slide 3</span>
        <span class="slide">Slide 4</span>
        <span class="slide">Slide 5</span>
      </div>
    </div>
    <a id="prev" class="control prev"></a>
    <a id="next" class="control next"></a>
  </div>
</body>

</html>