水平滚动旋转木马

Question

我已经制作了旋转木马。在其中使用了scrollLeft()。您可以在CodeOpen链接上看到它

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

我的问题是，当页面完全宽度（1200px）时，它可以正常工作，但是当我调整浏览器大小时，scrollLeft()返回不同的值。您可以在 console.log 中看到值。

我希望当scrollLeft()到达端下一个按钮被隐藏时。但是，当宽度小于 1200px 时，它没有所需的行为。

Answer 1

您的代码有几个问题。这表明诸如Swipeleft和Swiperight之类的功能未定义，因为您可以在Codepen控制台中看到它。另一件事是，第一次您不隐藏以前的元素。在加载时，您的幻灯片始终将处于0位置，因此不需要始终保留它，并且休息时间可以正常工作。您可以在这里看到我的小提琴以获取您的示例：https：//jsfiddle.net/or8pege7/2/以及正确的代码。

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();
        });