michaelmcgurk michaelmcgurk - 3 months ago 17
CSS Question

Set Carousel to slide automatically

I have a simple carousel.

I'd like to make it slide automatically instead of having to click the arrows.

Demo: https://jsfiddle.net/vbcL9npo/



carousel = (function(){

// Read necessary elements from the DOM once
var box = document.querySelector('.carouselbox');
var next = box.querySelector('.next');
var prev = box.querySelector('.prev');

// Define the global counter, the items and the
// current item
var counter = 0;
var items = box.querySelectorAll('.content li');
var amount = items.length;
var current = items[0];

box.classList.add('active');

// navigate through the carousel

function navigate(direction) {

// hide the old current list item
current.classList.remove('current');

// calculate th new position
counter = counter + direction;

// if the previous one was chosen
// and the counter is less than 0
// make the counter the last element,
// thus looping the carousel
if (direction === -1 &&
counter < 0) {
counter = amount - 1;
}

// if the next button was clicked and there
// is no items element, set the counter
// to 0
if (direction === 1 &&
!items[counter]) {
counter = 0;
}

// set new current element
// and add CSS class
current = items[counter];
current.classList.add('current');
}

// add event handlers to buttons
next.addEventListener('click', function(ev) {
navigate(1);
});
prev.addEventListener('click', function(ev) {
navigate(-1);
});

// show the first element
// (when direction is 0 counter doesn't change)
navigate(0);

})();

.carouselbox {
font-family: helvetica,sans-serif;
font-size: 14px;
width: 100px;
position: relative;
margin: 1em;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px #ccc;
overflow: hidden;
}
.content {
margin: 0;
padding: 0;
}
.content li {
font-size: 100px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
z-index: 2;
}


.active {
height: 130px;
}
.carouselbox button {
border: none;
visibility: hidden;
}
.active button {
visibility: visible;
}
.offscreen {
position: absolute;
left: -2000px;
}

.active .buttons {
padding: 5px 0;
background: #eee;
text-align: center;
z-index: 10;
position: relative;
}
.active li {
position: absolute;
top: 130px;

opacity: 0;
transform: scale(0);
transition: 1s;
}
.active li.current {
top: 30px;

opacity: 1;
transform: scale(1);
transition: 1s;
}

<div class="carouselbox">
<div class="buttons">
<button class="prev">
◀ <span class="offscreen">Previous</span>
</button>
<button class="next">
<span class="offscreen">Next</span> ▶
</button>
</div>
<ol class="content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>




Answer

You need to use setInterval. Save it as a variable and then you can clear it later if you want auto to stop.

Example: https://jsfiddle.net/vbcL9npo/1/

var carousel = (function(){

  // Read necessary elements from the DOM once
  var box = document.querySelector('.carouselbox');
  var next = box.querySelector('.next');
  var prev = box.querySelector('.prev');

  // Define the global counter, the items and the 
  // current item 
  var counter = 0;
  var items = box.querySelectorAll('.content li');
  var amount = items.length;
  var current = items[0];

  box.classList.add('active');

  // navigate through the carousel

  function navigate(direction) {

    // hide the old current list item 
    current.classList.remove('current');

    // calculate th new position
    counter = counter + direction;

    // if the previous one was chosen
    // and the counter is less than 0 
    // make the counter the last element,
    // thus looping the carousel
    if (direction === -1 && 
        counter < 0) { 
      counter = amount - 1; 
    }

    // if the next button was clicked and there 
    // is no items element, set the counter 
    // to 0
    if (direction === 1 && 
        !items[counter]) { 
      counter = 0;
    }

    // set new current element 
    // and add CSS class
    current = items[counter];
    current.classList.add('current');
  }

  // add event handlers to buttons
  next.addEventListener('click', function(ev) {
    navigate(1);
  });
  prev.addEventListener('click', function(ev) {
    navigate(-1);
  });

  // show the first element 
  // (when direction is 0 counter doesn't change)
  navigate(0);

    var interval = setInterval(function () { navigate(1) }, 1000);
})();