Pregunta jQuery Slider con miniaturas de imágenes


I need a jquery slider with thumnail scroller similar like to this image attached.Can anybody send me link to such jquery carausel .Thanks :)

Necesito un control deslizante de jquery con desplazamiento de thumnail similar a esta imagen adjunta. ¿Alguien puede enviarme un enlace a tal jquery carausel? Gracias :)


5
2018-03-27 05:28


origen


Respuestas:


Tienes varios controles deslizantes que pueden archivar esto. Personalmente siempre uso flexslider, pero nivoslider también es una buena alternativa.

http://flexslider.woothemes.com/thumbnail-slider.html

http://creative.glenfield.net/nivoexamples3.aspx

La mayoría de tu deslizador es css.

Creo que para su caso usaría flexslider.

U necesita crear 2 controles deslizantes. 1 actúa como navegación para el otro. Aquí está el enlace para todas las opciones de flexslider: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

Para el control deslizante principal, puede usar las opciones inferiores para establecer 3 elementos visibles.

minItems    0   Number Minimum number of carousel items that should be visible.
maxItems    0   Number Maximum number of carousel items that should be visible.
move    0   Number Number of carousel items that should move on animation.

Use el código debajo para usar 1 control deslizante como navegación para el otro.

$(window).load(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    asNavFor: '#slider'
  });

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

Espero haberte empujado en la dirección correcta.


3
2018-03-27 07:38



Prueba este ... Creo que este enlace te da más idea ...

http://www.jssor.com/demos/image-gallery.html

Y vea el 11. Likno JQuery Scroller en este enlace

http://webtoolsdepot.com/30-best-jquery-image-and-content-slider-plugins/


5
2018-03-27 05:33



Puedes encontrar ese control deslizante en este enlazar

Para agregar las miniaturas de la imagen simplemente reemplace el texto por fuente de imagen de esta manera:

<a href="#"><img src="images/1.jpg" alt="img01" height="50px" width="50px"><img src="images/2.jpg" alt="img02" height="50px" width="50px"><img src="images/3.jpg" alt="img03" height="50px" width="50px"></a>
<a href="#"><img src="images/5.jpg" alt="img05" height="50px" width="50px"><img src="images/6.jpg" alt="img06" height="50px" width="50px"><img src="images/7.jpg" alt="img07" height="50px" width="50px"></a>
<a href="#"><img src="images/9.jpg" alt="img09" height="50px" width="50px"><img src="images/10.jpg" alt="img10" height="50px" width="50px"><img src="images/11.jpg" alt="img11" height="50px" width="50px"></a>
<a href="#"><img src="images/12.jpg" alt="img12" height="50px" width="50px"><img src="images/13.jpg" alt="img13" height="50px" width="50px"><img src="images/14.jpg" alt="img14" height="50px" width="50px"></a>

Esto mostrará las miniaturas de la misma imagen que está mostrando en el control deslizante. Espero que tengas esto.


3
2018-03-27 07:19



Echa un vistazo al siguiente sitio, obtendrás todo tipo de carrusel.

Demostraciones de carrusel

Y siguiendo con miniaturas.

Carrusel con miniaturas


1
2018-03-27 05:34