Slideshow que muestra de 3 fotos

xmedia · #1 (**permalink**) 20/03/2015, 12:18

Estimados,
No tengo claro si corresponde acá esta consulta, igualmente la hago... Como dice el título, necesito crear un slide que vaya mostrando de 3 fotos cada vez y que cambie a las siguientes 3 fotos más o menos como muestra la imagen.
Espero puedan ayudarme, muchas gracias.

http://www.casimages.es/i/150320072319509886.jpg.html

AngelKrak · #2 (**permalink**) 20/03/2015, 13:32

aqui ahi uno de Bootstrap pero de 4 Imagenes

http://www.bootply.com/wXSCqoA51s

o este otro, ejemplo 4 veelo ;)
http://www.ajaxshake.com/demo/ES/952...astislide.html

fede5426 · #3 (**permalink**) 20/03/2015, 19:11

Acá te dejo un ejemplo:

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

Este es el código:

Código HTML:

Ver original<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <div id="slider">
    <div class="slidesContainer">
 
      <div class="slide">
        <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
        <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
        <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
      </div>
 
      <div class="slide">
        <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
        <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
        <a href="#" target="_blank"><img src="http://oi62.tinypic.com/3344304.jpg" /></a>
      </div>
 
    </div>
  </div>
 
    <span class="prev">ANTERIOR</span>
    <span class="next">SIGUIENTE</span>
 
</body>

Código CSS:

Ver original#slider{
width: 790px;
height: 250px;
overflow: hidden;
position: relative;
margin:0 auto;
padding:15px;
background:#222;
}
 
.slide{
width: 1000px;
height: 250px;
float: left;
}
 
.slide img{
margin-right:1em;
}

Código Javascript:

Ver original$(document).ready(function(){
 
    /*
     * Variables
     */
 
    var slides, timer;
 
    //Crea un objeto con informacion de los slides
    slides = $('#slider .slidesContainer > .slide');
 
 
    /*
     * Funciones
     */
    
    //Desplaza el contenedor hacia la direccion definida
    //@direction = [left,right]
    function sliderScroll(direction){
 
       //Calcula la posicion actual del contenedor
       position = $('#slider').scrollLeft();
 
       //Calcula la anchura total menos el ultimo slide.
       //Se usa para calcular cuando el scroll llega al final.
       totalWidth = (slides.length * slides[0].offsetWidth) - slides[0].offsetWidth
 
       //Se comprueba la variable direction para hacer el scroll hacia izquierda o derecha
       switch (direction) {
            case 'right': //Derecha
                if (position+slides[0].offsetWidth > totalWidth){ //Si la siguiente posicion se sale del contenedor, vuelve al principio.
                    $('#slider:not(:animated)').animate({scrollLeft:0},1000);
                } else { //Si no es el final, suma a la posicion actual la anchura del slide.
                    $('#slider:not(:animated)').animate({scrollLeft:position+slides[0].offsetWidth},1000);
                }
                break;
 
            case 'left': //Izquierda
                if (position-slides[0].offsetWidth < 0){ //Si la siguiente posicion se sale del contenedor, vuelve al final.
                    $('#slider:not(:animated)').animate({scrollLeft:totalWidth},1000);
                } else { //Si no es el final, resta a la posicion actual la anchura del slide.
                    $('#slider:not(:animated)').animate({scrollLeft:position-slides[0].offsetWidth},1000);
                }
                break;
        }
 
   }
 
   //Funcion que crea el temporizador
   function initTimer(){
        timer = setInterval(function(){sliderScroll('right');}, 5000);
   }
 
 
   /*
    * Codigo
    */
 
    //Asigna el ancho total de los slides al contenedor
    //La anchura total se obtiene multiplicando la medida de un slide por el numero de slides
    $('#slider .slidesContainer').css('width',slides[0].offsetWidth * slides.length);
 
 
    //Click en el boton "next"
    $('.next').click(function(){
        clearInterval(timer); //Desactiva el temporizador
        sliderScroll('right'); //Mueve el scroll a la derecha
        initTimer(); //Vuelve a activar el temporizador
        return false;
    });
 
    //Click en el boton "prev"
    $('.prev').click(function(){
        clearInterval(timer); //Desactiva el temporizador
        sliderScroll('left'); //Mueve el scroll a la izquierda
        initTimer(); //Vuelve a activar el temporizador
        return false;
    });
 
 
    //Inicia el temporizador
    initTimer();
 
});

Dato importante: NO es responsive.

AngelKrak · #4 (**permalink**) 20/03/2015, 20:52

:O como no tengo nada que hacer, editare un poco ese Slider y lo hare responsive entre otras cosas >_< jajaja despues lo publico aca en el foro >_<

por cierto tu lo hicistes de 0 @fede5426 o es de otro user?

fede5426 · #5 (**permalink**) 20/03/2015, 22:43

Cita:

Iniciado por AngelKrak

:O como no tengo nada que hacer, editare un poco ese Slider y lo hare responsive entre otras cosas >_< jajaja despues lo publico aca en el foro >_<

por cierto tu lo hicistes de 0 @fede5426 o es de otro user?

Lo encontre hace un tiempo, googleando.. Si lo hubiera hecho yo, me hubiera gustado que sea responsive desde un principio jaja

AngelKrak · #6 (**permalink**) 20/03/2015, 22:56

jajajaja vale, tratare de hacerlo lo mejor k pueda >_< no soy experto pero me defiendo jajaja haber como me queda *o*

xmedia · #7 (**permalink**) 13/04/2015, 08:32

Gracias a todos...