CODEWITHSUNDEEP
jqueryhtmlcsssliderswipe
Wilda Sagita
Wilda Sagita

Reputation: 123

add swipe function in slideshow

my code now doesnt has swipe function or can't swipe the slider when I look in mobile phone. I want add swipe function in my slider especially when I look in mobile phone. here my html code :

<div id="img-grp-wrap" class="slide-dekstop">
    <div class="img-wrap">
        <img src="img/slider.jpg" />
        <img src="img/slider3.jpg" />
        <img src="img/slider2.jpg" />
    </div>   
</div>

and here my css code :

#img-grp-wrap {
position: relative;
width: 100%;
}
.img-wrap {
position: relative;
width: 100%;
height: 1000px;
overflow: hidden;
}

my js code :

<script type="text/javascript">
    $(document).ready(function() { 
    var imgFirst = $('#img-grp-wrap .img-wrap img');
    $('#img-grp-wrap .img-wrap img:gt(0)').hide();

    var rotate = setInterval(function() {
        slideShow();
    }, 4000);

    $('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() {
        clearInterval(rotate);
    }, function() {
        rotate = setInterval(function() {
            slideShow();
        }, 4000);
    });

    $('#img-grp-wrap .next').click(function() {
        imgFirst.filter(":first-child") 
        .stop().fadeOut().next().fadeIn().end().appendTo('.img-wrap');
    });

    $('#img-grp-wrap .prev').click(function() {
        imgFirst.filter(":first-child").stop().fadeOut();
        $('#img-grp-wrap .img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
        imgFirst.filter(":first-child").fadeIn();
    });

    });
</script>

please help me to add swipe function into my code. thx

Upvotes: 0

Views: 1150

Answers (1)

Emin Hasanov
Emin Hasanov

Reputation: 1362

You can add jQueryMobile

It has swipe method. Here is an example:

$( "div.box" ).on( "swipe", swipeHandler );     

  function swipeHandler( event ){
    $( event.target ).addClass( "swipe" );
  }

Upvotes: 1

Related Questions