Click here to Skip to main content
15,435,837 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
XML
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>


Please help me out..

Krunal
Posted

1 solution

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.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900