Question

我想增加向左滑动或向右滑动来更改移动设备上的幻灯片的机会。我的网站将jshowoff http://ekallevig.com/jshowoff用于滑块，我还添加了jQuery Mobile Touch事件，因此滑动事件已经有效。

我的问题是，如何在滑动事件时实现幻灯片更改？我的HTML：

<div id="slides" class="rotator__slides" style="position: relative;">

<div style="">
<a href="..." data-additional-url=""><img src="..."></a>
<a href="..." data-additional-url=""><img src="..."></a>
<a href="..." data-additional-url=""><img src="..."></a>
</div>
</div>

我的JS：

setTimeout(function () {
        $("#slides").jshowoff({ links: true, speed: 5000, effect: 'fade', hoverPause: false });
    }, 1000);

现在我不确定如何实现其余的内容。我试过这样的事情：（我在其他地方使用了滑动事件，但效果很好），但是现在我在调用更改滑动上的幻灯片的函数时遇到了问题。我不知道怎么称呼

var slide = $("#slides").jshowoff();
if (screen.width < 769) {
     $("#slides").on('swipeleft', function () { 
            slide.next();
     });
$("#slides").on('swiperight', function () { 
            slide.previous();
     });
}

我希望滑动事件能够像箭头上的单击事件一样工作：

 function addControls() {
            $wrap.append('<p class="jshowoff-controls ' + uniqueClass + '- 
controls"><a class="jshowoff-play ' + uniqueClass + '-play" href="#null">' + 
config.controlText.pause + '</a> <a class="jshowoff-prev ' + uniqueClass + '-prev" href="#null">' + config.controlText.previous + '</a> <a class="jshowoff-next ' + uniqueClass + '-next" href="#null">' + config.controlText.next + '</a></p>');
            $('.' + uniqueClass + '-controls a').each(function () {
                if ($(this).hasClass('jshowoff-play')) $(this).click(function () {
                    isPlaying() ? pause('playBtn') : play();
                    return false;
                });
                if ($(this).hasClass('jshowoff-prev')) $(this).click(function () {
                    previous();
                    return false;
                });
                if ($(this).hasClass('jshowoff-next')) $(this).click(function () {
                    next();
                    return false;
                });
            });
        };

我是JS的新手，所以我将不胜感激...

Answer 1

请尝试以下代码，希望对您有所帮助：

var slide = $("#slides");
if (screen.width < 769) {

  slide.on('swipeleft', function (e) { 
    e.preventDefault();
    slide.slideIt({direction:"left"});
  });

  slide.on('swiperight', function (e) {
    e.preventDefault(); 
    slide.slideIt({direction:"right"});
  });
}

Answer 2

我用其他方式解决了它，滑块上也有箭头，所以在向左滑动事件中，我只需单击“箭头下一个”就可以了。

$(document).on('swipeleft', '#slides', function () {
    $('.jshowoff-next').click();
})
$(document).on('swiperight', '#slides', function () {
    $('.jshowoff-prev').click();
});

jshowoff滑块-在滑动时添加更改幻灯片

2 个答案: