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

Posted 2023-05-09

【中文标题】jshowoff 滑块 - 在滑动时添加更改幻灯片

【英文标题】：jshowoff slider - add change slide on swipe

【发布时间】：2019-01-01 05:27:16

【问题描述】：

我想增加在移动设备上通过向左滑动或向右滑动更改幻灯片的机会。我的网站使用 jshowoff http://ekallevig.com/jshowoff 作为滑块，我还添加了 jQuery Mobile 触摸事件，所以滑动事件已经可以工作了。

我的问题是，如何在滑动事件中实现幻灯片更改？ 我的 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 的新手，所以我会很感激任何帮助...

【参考方案1】：

我以其他方式解决了它，滑块也有箭头，所以在 swipeleft 事件中我只需点击“箭头-next”就可以了。

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

【参考方案2】：

请试试这段代码，希望对你有帮助：

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");
  );

【讨论】：

我以其他方式解决了它，滑块也有箭头，所以在 swipeleft 事件中我只需点击“箭头-next”就可以了。