Deslizador de imagen con estilo con JavaScript puro y CSS/CSS3-Karrot Slider

Vista prévia

Descripción

Este es un deslizador de imagen JavaScript puro que viene con más de 8 efectos de transición impresionantes basados en CSS3.

Funcionamiento

Cargue el Slider. CSS y sliderEffects. js necesarios en la página HTML.

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

Inserte una imagen en la página HTML que se usará como la primera imagen del control deslizante.

<div id="slider">

<img src="1.jpg"
alt="Image 1" class="sliderImage">

 </div>

Añade otras imágenes al deslizador en JavaScript y establece los efectos de transición individualmente para cada imagen. El ejemplo de 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);

Opcionalmente, puede llamar a la función fullScreen () para que el deslizador de su imagen sea de pantalla completa.

fullScreen () ;