Javascript 带大图像的缩略图滚动条

我需要您对此脚本的帮助：

<link rel="stylesheet" href="css-web/w3.css">
<div class="w3-content w3-display-container" id="parag1">
    <img class="mySlides" src="gallery/day/1.jpg" style="width:100%">
    <img class="mySlides" src="gallery/day/2.jpg" style="width:100%">
    <img class="mySlides" src="gallery/day/3.jpg" style="width:100%">
    <img class="mySlides" src="gallery/day/4.jpg" style="width:100%">
    <img class="mySlides" src="gallery/day/5.jpg" style="width:100%">
    <img class="mySlides" src="gallery/day/6.jpg" style="width:100%">
    <img class="mySlides" src="gallery/day/7.jpg" style="width:100%">
    <img class="mySlides" src="gallery/day/8.jpg" style="width:100%">

    <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">
        <img src="img/larrow.png" class="leftarrow" />
    </a>
    <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">
        <img src="img/rarrow.png" class="rightarrow" />
    </a>

    <div class="w3-row-padding w3-section" style="width: 80%;margin:auto;">
        <div class="w3-col s3">
            <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/1.jpg" style="width:100%" onclick="currentDiv(1)">
        </div>
        <div class="w3-col s3">
            <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/2.jpg" style="width:100%" onclick="currentDiv(2)">
        </div>
        <div class="w3-col s3">
            <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/3.jpg" style="width:100%" onclick="currentDiv(3)">
        </div>
        <div class="w3-col s3">
            <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/4.jpg" style="width:100%" onclick="currentDiv(4)">
        </div>
        <div class="w3-col s3">
            <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/5.jpg" style="width:100%" onclick="currentDiv(5)">
        </div>
        <div class="w3-col s3">
            <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/6.jpg" style="width:100%" onclick="currentDiv(6)">
        </div>
        <div class="w3-col s3">
            <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/7.jpg" style="width:100%" onclick="currentDiv(7)">
        </div>
        <div class="w3-col s3">
            <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/8.jpg" style="width:100%" onclick="currentDiv(8)">
        </div>
    </div>
</div>


<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function currentDiv(n) {
        showDivs(slideIndex = n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        if (n > x.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = x.length
        }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
        }
        x[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " w3-opacity-off";
    }
</script>

该脚本显示一个缩略图图像，我们最多需要4个出现在底部的大图像。 当我们点击下一页和上一页时，缩略图上的图像会改变悬停，但不会滚动

我需要你的帮助，让缩略图图像滚动时，我们点击上一个和下一个箭头按钮

---

提前感谢

我建议您使用fancybox脚本。你可以在这里下载：

---

它是高度可定制的，您可以使用javascript中的一些设置来完成您想要的操作，网站上对此进行了解释。

感谢Coman Paul的快速响应。根据您的经验，我可以在没有弹出窗口的情况下使用它吗？我们可以使用带有双向控制的拇指库。您是否也可以发布您正在使用的相关CSS样式？