Simple Responsive Carousel In JavaScript – carousel-slideshow

Category: Javascript , Slider , Slideshow | May 21, 2018
Views Total:3,661 views
Official Page:Go to website
Last Update:May 21, 2018


Simple Responsive Carousel In JavaScript – carousel-slideshow


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">

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;

You Might Be Interested In:

Leave a Reply