Dynamic Responsive Image Slider with JavaScript and CSS3 – Karrot Slider

Preview:

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();