使用jquery触摸启用的图像滑块 [英] Touch enabled image slider using jquery

问题描述

Hello everyone,

I am building a responsive website, in which there is an image slider on the home page.. the slider works perfectly without any loop holes.. but i want to make that image slider touch enabled (swipe enabled)..

I dont want to change that slider as i have arranged images according to it..

I have tried many touch enabled js files (hammer and swipe js) but those are not working for me..

I have used superslides fullscreen jquery image slider.

my code for image slider..
<pre>
<div id="slides" style="z-index:0;" >
    <div class="slides-container">
       <img src="images/1.jpg" style="width:100%; height:100%">

      <img src="images/2.jpg" style="width:100%; height:100%">
      <img src="images/3.jpg"style="width:100%; height:100%">
      <img src="images/4.jpg" style="width:100%; height:100%">
         <img src="images/5.jpg" style="width:100%; height:100%">
         <img src="images/6.jpg" style="width:100%; height:100%">
         <img src="images/7.jpg" style="width:100%; height:100%">
    </div>
</div>
</pre>
 <script>

        // pure JS
        var elem = document.getElementById('slides');
        window.mySwipe = Swipe(elem, {
            //startSlide: 4,
            //auto: 3000,
            //continuous: true,
            //disableScroll: true,
            //stopPropagation: true,
            //callback: function (index, element) { },
            //transitionEnd: function (index, element) { }

        });

        // with jQuery
        window.mySwipe = $('#slides').Swipe().data('Swipe');

</script>

请帮帮我..



Krunal

Please help me out..

Krunal

推荐答案

（'＃slides'）。Swipe（）。data（'Swipe'）;

< / script >

('#slides').Swipe().data('Swipe'); </script>

请帮帮我..



Krunal

Please help me out..

Krunal

检查 OWL Carousel 以完成任务。



特点：



响应

触摸事件

鼠标幻灯片活动

完全可定制

选择要显示的项目数

多个滑块

CSS3 3d过渡

Custimizable controlls


这是链接：

OWL Carousel



或更多： 10个最好的JQuery Touch启用滑块



我希望这对你有所帮助。

Check OWL Carousel for your task.

Features:

Responsive
Touch Event
Mouse Slide Events
Fully Customizable
Choose the number of items to be displayed
Multiple Sliders
CSS3 3d Transitions
Custimizable controlls

Here is the Link :
OWL Carousel

OR more : 10 Best JQuery Touch Enabled Sliders

I hope this will help to you.

这篇关于使用jquery触摸启用的图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！