Dynamic Responsive Image Slider with JavaScript and CSS3 – Karrot Slider

Category: Javascript , Slider | September 10, 2015
Author:estampworld
Views Total:4,270 views
Official Page:Go to website
Last Update:September 10, 2015
License:MIT

Preview:

Dynamic Responsive Image Slider with JavaScript and CSS3 – Karrot Slider

Description:

Karrot Slider is a simple, lightweight slider JavaScript library for generating a responsive slider from an array of images with support for fullscreen mode, 8 fancy animations and endless looping.

How to use it:

Load the style sheet slider.css in the head section of the document.

<link href="css/slider.css" rel="stylesheet">

Load the sliderEffects.js and slider.js in the document where needed.

<script src="js/sliderEffects.js"></script>

Add the initial image to the slider.

<div id="slider">
  <img src="images/1.jpg" class="sliderImage" >   
</div>

Change the images to yours in the slider.js.

var images = ["images/1.jpg" , "images/2.jpg" , "images/3.jpg",  "images/4.jpg" ];
var timing = 3000;
var currentImg = 1;

Enter the fullscreen mode by calling fullScreen() function.

fullScreen();

You Might Be Interested In:


Leave a Reply