3

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

我知道有些插件可以两者兼得，但我喜欢 rs 的简单性，而且 touchSwipe 看起来真的很方便。

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

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

谢谢！

4

1 回答 1

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 隐藏实际的上一个和下一个按钮

于 2014-10-29T06:01:29.083 回答