Jquery 水平滚动旋转木马

我做了一个旋转木马。在其中使用了

scrollLeft（）

。你可以在电视上看到

我的问题是，当页面处于全宽（1200px）时，它可以正常工作，但当我调整浏览器大小时，

scrollLeft（）

返回不同的值。您可以在控制台.log中看到值

---

我预计当

scrollLeft（）

到达末尾时，下一步按钮将隐藏。但是，当宽度小于1200px时，它没有所需的行为。

您的代码有几个问题。这表明像swipeleft和swiperight这样的函数并不像您在codepen控制台中看到的那样定义。 另一件事是，第一次你们并没有隐藏前面的元素。加载时，您的幻灯片将始终处于0位置，因此无需始终保持它，并且在休息时间它工作正常。 您可以在这里看到我的小提琴作为示例：以及正确的代码

var slide = $("#slide");
        var carousel = $("#wrapper-slide");
        var next = $("#next-btn-carousel");
        var prev = $("#prev-btn-carousel");

    // For show/hide arrows button.
        carousel.scroll(function() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            /*console.log(w);
            console.log(i);*/
            if (i == w) {
                next.fadeOut(400);
            } else {
                next.fadeIn(400);
            };
            if (i == 0) {
                prev.fadeOut(400);
            } else {
                prev.fadeIn(400);
            };
        });

    //For action next.
        function goNext() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            console.log(i+'='+w);
            carousel.animate({
                scrollLeft: (i += w)
            }, 1000, "swing");
        };
        if(carousel.scrollLeft()==0){
            $('#prev-btn-carousel').hide();
        }

        next.click(function() {
            goNext();
        });

        /*carousel.swipeleft(function(){
            goNext();
        });*/

    //For action prev.
        function goPrev() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            console.log(i+'='+w);
            carousel.animate({
                scrollLeft: (i -= w)
            }, 800, "swing");
        };

        prev.click(function() {
            goPrev();
        });

        /*carousel.swiperight(function(){
            goPrev();
        });*/


        carousel.on("dragstart", function(e) {
            e.preventDefault();
        });

---

这是一个很好的点隐藏上一个按钮的第一次，但我的问题仍然存在，为下一个按钮。当我将其减少到1200px以下时，它没有期望的行为。要在CODEOPEN或其他联机编辑器上使用swipe，我应该怎么做？首先让您告诉我swiperight或swipelef是jquery核心函数吗？

var slide = $("#slide");
        var carousel = $("#wrapper-slide");
        var next = $("#next-btn-carousel");
        var prev = $("#prev-btn-carousel");

    // For show/hide arrows button.
        carousel.scroll(function() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            /*console.log(w);
            console.log(i);*/
            if (i == w) {
                next.fadeOut(400);
            } else {
                next.fadeIn(400);
            };
            if (i == 0) {
                prev.fadeOut(400);
            } else {
                prev.fadeIn(400);
            };
        });

    //For action next.
        function goNext() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            console.log(i+'='+w);
            carousel.animate({
                scrollLeft: (i += w)
            }, 1000, "swing");
        };
        if(carousel.scrollLeft()==0){
            $('#prev-btn-carousel').hide();
        }

        next.click(function() {
            goNext();
        });

        /*carousel.swipeleft(function(){
            goNext();
        });*/

    //For action prev.
        function goPrev() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            console.log(i+'='+w);
            carousel.animate({
                scrollLeft: (i -= w)
            }, 800, "swing");
        };

        prev.click(function() {
            goPrev();
        });

        /*carousel.swiperight(function(){
            goPrev();
        });*/


        carousel.on("dragstart", function(e) {
            e.preventDefault();
        });