Simple Responsive Carousel In JavaScript – carousel-slideshow

Category: Javascript , Slider , Slideshow | May 21, 2018
Author: martymagaan
Views Total: 2,493 views
Official Page: Go to website
Last Update: May 21, 2018
License: MIT

Preview:

Simple Responsive Carousel In JavaScript – carousel-slideshow

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;

You Might Be Interested In:


Leave a Reply