Tema: Slideshow que muestra de 3 fotos
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 20/03/2015, 19:11
Avatar de fede5426
fede5426
 
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 5 meses
Puntos: 208
Respuesta: Slideshow que muestra de 3 fotos
Acá te dejo un ejemplo:

http://codepen.io/anon/pen/YPdLGK

Este es el código:

Código HTML: 
Ver original
  1. <head>
  2.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  3. </head>
  4. <body>
  5.   <div id="slider">
  6.     <div class="slidesContainer">
  7.  
  8.       <div class="slide">
  9.         <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
  10.         <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
  11.         <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
  12.       </div>
  13.  
  14.       <div class="slide">
  15.         <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
  16.         <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
  17.         <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
  18.       </div>
  19.  
  20.     </div>
  21.   </div>
  22.  
  23.     <span class="prev">ANTERIOR</span>
  24.     <span class="next">SIGUIENTE</span>
  25.  
  26. </body>

Código CSS: 
Ver original
  1. #slider{
  2. width: 790px;
  3. height: 250px;
  4. overflow: hidden;
  5. position: relative;
  6. margin:0 auto;
  7. padding:15px;
  8. background:#222;
  9. }
  10.  
  11. .slide{
  12. width: 1000px;
  13. height: 250px;
  14. float: left;
  15. }
  16.  
  17. .slide img{
  18. margin-right:1em;
  19. }

Código Javascript: 
Ver original
  1. $(document).ready(function(){
  2.  
  3.     /*
  4.      * Variables
  5.      */
  6.  
  7.     var slides, timer;
  8.  
  9.     //Crea un objeto con informacion de los slides
  10.     slides = $('#slider .slidesContainer > .slide');
  11.  
  12.  
  13.     /*
  14.      * Funciones
  15.      */
  16.     
  17.     //Desplaza el contenedor hacia la direccion definida
  18.     //@direction = [left,right]
  19.     function sliderScroll(direction){
  20.  
  21.        //Calcula la posicion actual del contenedor
  22.        position = $('#slider').scrollLeft();
  23.  
  24.        //Calcula la anchura total menos el ultimo slide.
  25.        //Se usa para calcular cuando el scroll llega al final.
  26.        totalWidth = (slides.length * slides[0].offsetWidth) - slides[0].offsetWidth
  27.  
  28.        //Se comprueba la variable direction para hacer el scroll hacia izquierda o derecha
  29.        switch (direction) {
  30.             case 'right': //Derecha
  31.                 if (position+slides[0].offsetWidth > totalWidth){ //Si la siguiente posicion se sale del contenedor, vuelve al principio.
  32.                     $('#slider:not(:animated)').animate({scrollLeft:0},1000);
  33.                 } else { //Si no es el final, suma a la posicion actual la anchura del slide.
  34.                     $('#slider:not(:animated)').animate({scrollLeft:position+slides[0].offsetWidth},1000);
  35.                 }
  36.                 break;
  37.  
  38.             case 'left': //Izquierda
  39.                 if (position-slides[0].offsetWidth < 0){ //Si la siguiente posicion se sale del contenedor, vuelve al final.
  40.                     $('#slider:not(:animated)').animate({scrollLeft:totalWidth},1000);
  41.                 } else { //Si no es el final, resta a la posicion actual la anchura del slide.
  42.                     $('#slider:not(:animated)').animate({scrollLeft:position-slides[0].offsetWidth},1000);
  43.                 }
  44.                 break;
  45.         }
  46.  
  47.    }
  48.  
  49.    //Funcion que crea el temporizador
  50.    function initTimer(){
  51.         timer = setInterval(function(){sliderScroll('right');}, 5000);
  52.    }
  53.  
  54.  
  55.    /*
  56.     * Codigo
  57.     */
  58.  
  59.     //Asigna el ancho total de los slides al contenedor
  60.     //La anchura total se obtiene multiplicando la medida de un slide por el numero de slides
  61.     $('#slider .slidesContainer').css('width',slides[0].offsetWidth * slides.length);
  62.  
  63.  
  64.     //Click en el boton "next"
  65.     $('.next').click(function(){
  66.         clearInterval(timer); //Desactiva el temporizador
  67.         sliderScroll('right'); //Mueve el scroll a la derecha
  68.         initTimer(); //Vuelve a activar el temporizador
  69.         return false;
  70.     });
  71.  
  72.     //Click en el boton "prev"
  73.     $('.prev').click(function(){
  74.         clearInterval(timer); //Desactiva el temporizador
  75.         sliderScroll('left'); //Mueve el scroll a la izquierda
  76.         initTimer(); //Vuelve a activar el temporizador
  77.         return false;
  78.     });
  79.  
  80.  
  81.     //Inicia el temporizador
  82.     initTimer();
  83.  
  84. });



Dato importante: NO es responsive.