Control deslizante de imágenes con varias imágenes

Tengo varias imágenes en un Archivo HTML. Quiero mostrar a sólo 5 imágenes. A continuación, haga clic en la flecha siguiente mostrará el próximo 5 de imágenes y fadeOut los originales y así sucesivamente hasta que todas las imágenes de agotarse. Del mismo modo para la prev flecha de la pantalla anterior 5 imágenes y así sucesivamente hasta llegar a la primera imagen.

<ul class="thumbs noscript">

<li>
    <a class="thumb" id = "26">
        <img src="images/1.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "28">
        <img src="images/2.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "25">
        <img src="images/3.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "3000">
        <img src="images/4.png" alt="Rice" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "1">
        <img src="images/5.jpg" alt="Pickles and Sauces" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "53">
        <img src="images/2.jpg" alt="Tea and Coffee" width="75" height="75"/>
    </a>
</li>
<li>
    <a class="thumb" id = "3">
        <img src="images/6.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "30">
        <img src="images/7.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "20">
        <img src="images/8.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "56">
        <img src="images/9.png" alt="Detergent Powder" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "27">
        <img src="images/10.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>
<ul>

Existen múltiples recursos para una imagen al mismo tiempo. pero no cualquier con varias imágenes. Si va a ser de mucha ayuda si alguien puede compartir los pensamientos.

2 Kommentare

  1. 0

    Sólo necesita llamar a la clase de bxslider como este.

    $('.bxslider').bxSlider({
      minSlides: 5,
      maxSlides:5,
      slideWidth: 250,
      slideHeight: 250,
      slideMargin: 25,
      controls: true,
      pager: false,
    }); 

    para definir la diapositiva de los límites de la anchura y altura de las imágenes.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea