CODEWITHSUNDEEP
jqueryjquery-mobileswipejshowoff
Nikol
Nikol

Reputation: 35

jshowoff slider - add change slide on swipe

I'd like to add opportunity to change slides on mobile devices by swipeleft or swiperight. My site is using jshowoff http://ekallevig.com/jshowoff for slider, I also added jQuery Mobile Touch Events, so swipe events already work.

My question is, how to implement slides change on swipe event? My 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>

My JS:

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

Now I'm not sure how to implement the rest. I tried sth like this: (I use swipe event in other places and it works fine), but now I have problem with calling the function that changes the slides on swipe. I have no idea how to call it

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

I wanted the swipe event to work just like the click event on arrows: 

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

I'm quite new in JS, so I would be grateful for any help...

Upvotes: 0

Views: 1892

Answers (2)

Nikol
Nikol

Reputation: 35

I solved it in other way, slider also has arrows so on swipeleft event I just use click on 'arrow-next' and it works fine.

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

Upvotes: 1

Vasyl Zhuryk
Vasyl Zhuryk

Reputation: 1248

Please try this code, I hope it can help you:

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

Upvotes: 0

Related Questions