Jquery 具有多个图像的图像滑块

我在HTML文件中有多个图像。我只想先显示5张图片。然后单击下一个箭头将显示下5个图像并淡出原始图像，依此类推，直到所有图像都用尽。同样，对于prev，箭头将显示prev 5图像，依此类推，直到到达第一个图像

<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>

---

一次一个映像有多个资源。但没有任何一个有多个图像。如果有人能分享你的想法，我会很有帮助

我还没有对此做过任何广泛的研究，但您可能想看看bx slider的旋转木马

---

只需像这样调用bxslider类

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

---

定义图像的滑动限制和宽度高度。

这简直太棒了。我正在寻找的东西。