Simple Responsive Carousel In JavaScript – carousel-slideshow

Preview:

Description:

A simple, elegant, fully responsive carousel component written in pure JavaScript.

How to use it:

Insert the carousel-slideshow’s JavaScript and CSS files into the html document.

<link href="carousel-slideshow.css" rel="stylesheet">
<script src="carousel-slideshow.js"></script>

Add your own images to the carousel and done.

<div id="example" class="carousel-slideshow">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
</div>

Enable/disable auto rotation.

// default: true
var enableAutoSlide = true;
// default: 4000
var autoSlideRate = 5000;

Adjust the animation speed.

var slideSpeed = 0.06;

Set the image width in percentage.

var imageFitPercentage = 80;