Slider con CSS y Jquery

Slider con CSS y Jquery

Código completo

El resultado:

Imagen 1

Imagen 2

Imagen 3

Imagen 4

Imagen 5


CSS del slide.

  .rotating-item{
  width:640px; height:480px;
  display:none; margin:auto; 
  border:2px solid #999; 
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.8);  
 }
 .rotating-item img{
  width:640px; height:480px; border-radius: 8px;
 }
 .rotating-item p{ 
  position:relative;
  background: rgba(0,0,0,0.6);
  width:400px;
  color:#fff; font-size:18px; font-style:italic;
  margin-top:-45px;
  padding:5px;
  text-align:center;
 }

Divs con las imágenes de nuestro slide.

<div class="rotating-item" style="display:block;">
   <img src=" "/>
   <p>Imagen 1</p>
</div>
<div class="rotating-item">
   <img src=" " />
   <p>Imagen 2</p>
</div>
<div class="rotating-item">
   <img src=" " />
   <p>Imagen 3</p>
</div>
<div class="rotating-item">
   <img src=" " />
   <p>Imagen 4</p>
</div>
<div class="rotating-item">
   <img src=" " />
   <p>Imagen 5</p>
</div>   

Script del bucle infinito para nuestro Slide.

 var itemInterval = 5500;
 var infiniteLoop;
 var fadeTime = 1000;
 var currentItem = 0;
 var numberOfItem = 5;

 setTimeout(function(){
      myFunc();
      infiniteLoop = setInterval(myFunc, itemInterval);
 }, 1000);

 // inicia bucle
 function myFunc() {
    $(".rotating-item").eq(currentItem).fadeOut(fadeTime,
     function() {
       // set counter
       if (currentItem == numberOfItem -1) currentItem = 0;
       else { currentItem++; }       
       $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
    });     
 }

0 comentarios:

Publicar un comentario