在移动设备上从缩略图图像滑块切换到轮播指示器/点

Question

我有一个用html / css / js编程的图像幻灯片，如下所示：

单击图像时，该图像在顶部（大）显示。 现在，当移动到移动设备时，我希望轮播点/指示器在图像之间切换，如下所示：

js代码：

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

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

html代码： https://www.codepile.net/pile/qYMZgj1l