Stylish Image Slider with Pure Javascript and CSS/CSS3 – Karrot Slider

Preview:

Description:

This is a pure Javascript image slider which comes with more than 8 awesome transition effects based on CSS3.

How to use it:

Load the required slider.css and sliderEffects.js in your Html page.

<link href="css/slider.css" rel="stylesheet">
<script src="js/sliderEffects.js"></script>

Insert an image into your Html page that will be used as the first image of your slider.

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

Add other images to the slider in the JavaScript and set the transition effects individually for each image. The sample JavaScript:

var images = ["1.jpg" , "2.jpg" , "3.jpg",  "4.jpg" ];
var timing = 3000;
var currentImg = 1;
function karrotSlider() {
  
  var nextimg = (currentImg + 1) > images.length ? 1 : currentImg + 1;
    
  var effect = Math.floor (Math.random()*8 +1 );
  
  //effect=1;
  switch (effect) {
    case 1: 
      KSDissolve(images[currentImg- 1], images[nextimg- 1])
      break;
    case 2:
      KSSlideUp(images[currentImg- 1], images[nextimg- 1])
      break;
    case 3:
      KSSlideDown(images[currentImg- 1], images[nextimg- 1])
      break;
    case 4:
      KSSlideLeft(images[currentImg- 1], images[nextimg- 1])
      break;
    case 5:
      KSSlideRight(images[currentImg- 1], images[nextimg- 1])
      break;
    case 6:
      KSMosaic(images[currentImg- 1], images[nextimg- 1])
      break;
    case 7:
      KSWindows(images[currentImg- 1], images[nextimg- 1])
      break;
    case 8:
      KSDo(images[currentImg- 1], images[nextimg- 1])
      break;
  }
  currentImg = (currentImg + 1) > images.length ? 1 :  currentImg + 1;
  
}
window.onload = setInterval(function () { karrotSlider() } , timing);

Optionally, you can call the fullScreen() function to make your image slider fullscreen.

fullScreen () ;