Question

我目前正在尝试添加在幻灯片之间在触摸设备上左右滑动的功能。我正在使用http://www.responsiveslides.com和http://labs.rampinteractive.co.uk/touchSwipe/demos

我知道插件可以兼顾两者，但我喜欢rs的简单性，而touchSwipe看起来非常方便。

在响应式幻灯片中，可以使用manualControls进行手动控制，但我认为这可能仅适用于选择器。我可以检查滑动事件是否已经发生，但我不确定如何将其绑定到next和prev触发器。

    $(function () {
        $(".rslides").responsiveSlides({
            auto: true,
            pager: false,
            speed: 400,
            timeout: 5000, 
            nav: false,
            prevText: "",
            nextText: "",
            navContainer: "",
            manualControls: function(){
                swipeSlides();             
            }
        });

        function swipeSlides(){
            $(".rslides").swipe( {
                swipe:function(event, direction) { 
                console.log("you swiped " + direction);

                if (direction == "right"){
                    console.log("right");
                }
                if (direction == "left"){
                    console.log("left");
                }
            },
            threshold:0
            });
        }       
        swipeSlides();          
    });

谢谢！

Answer 1

你可能已经解决了这个问题，只是遇到类似问题的人，这就是我做的事情

$(".castle-bg").responsiveSlides({
    nav: true,
    pager: true,
    navContainer: "#pager"
});
$(".castle-bg").swipe( {
    swipeLeft: function(){
        $(".rslides_nav.prev").click();
    },
    swipeRight: function(){
        $(".rslides_nav.next").click();
    }
});

然后使用css隐藏实际的上一个和下一个按钮

添加触摸滑动到responsiveslides.js

1 个答案: