Question

I made an image slider using this plugin http://slidesjs.com/ while ago for a mobile website. To meet the requirements of my client I also made some modifications in the plugin and triggered some functions on the events defined by the plugin. Now, a swipe effect is also required in the slider to images of slider by moving them using touch.

I used some swipe codes but they conflict with the plugin I used before to make a slider. Like at one time you can only use one functionality at one time.

    <div class="slides-wrapper">
        <div class="wrapper-spacer"></div>
        <div class="slides-container">
            <div id="productImage1" class="slideshow-image">
                <img src="../images/ecommerce-work-1.png" alt="Product 1" />
            </div>
            <div id="productImage2" class="slideshow-image">
                <img src="../images/ecommerce-work-2.png" alt="Product 2" />
            </div>
            <div id="productImage3" class="slideshow-image">
                <img src="../images/ecommerce-work-3.png" alt="Product 3" />
            </div>
        </div>
    </div>

This is the markup of main image slider container the plugin for slider is using two more containers for pagination and next previous button. While their is another container which I am using to display name of the image. I explored some sliders plugin but they are very rough, not using variables for the class names rather than names. So everything is producing a lot of errors. It is hard for me to make changes in the core of javascript plugins because I am not a front end developer and more familiar with php

I used this plugin http://superdit.com/2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/ to introduce the swipe effect in image slider.

Answer 1

I had a similar issue recently, and used hammer.js: http://eightmedia.github.com/hammer.js/