2016-02-11 5 views
0

мой код сейчас не имеет функции салфетки или не может пролистнуть ползунок, когда я смотрю на мобильном телефоне. Я хочу добавить функцию салфетки в свой слайдер, особенно когда я смотрю в мобильном телефоне. вот мой HTML код:добавить салфетки в слайд-шоу

<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> 

и вот мой CSS код:

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

мой JS код:

<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> 

, пожалуйста, помогите мне, чтобы добавить функцию салфетки в мой код. ТНХ

+0

Вы добавили jQuery Mobile? –

ответ

1

Вы можете добавить jQueryMobile

Он имеет метод салфетки. Вот пример:

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

    function swipeHandler(event){ 
    $(event.target).addClass("swipe"); 
    } 
Смежные вопросы