Javascript Slider

The simplest javascript slider

You can add as many pictures as you like. All of them will appear at a given interval.

HTML

<div id="carousels">
  <div class="carousel demonstration"><img src="images/1.jpg"></div>
  <div class="carousel"><img src="images/2.jpg"></div>
  <div class="carousel"><img src="images/3.jpg"></div>
</div>

Javascript

<script>
  var carousels = document.querySelectorAll('#carousels .carousel');
  var currentCarousel = 0;
  var carouselInterval = setInterval(nextCarousel,5000); /* Interval between pictures */

  function nextCarousel(){
	carousels[currentCarousel].className = 'carousel';
	currentCarousel = (currentCarousel+1)%carousels.length;
	carousels[currentCarousel].className = 'carousel demonstration';
} 
</script>

CSS

#carousels{
	position: relative;
}

.carousel{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity 3s; /* Picture appearance time */
}

.demonstration{
	opacity: 1;
}

I wish you creative successes.

This entry was posted in Free Scripts. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *