I made an image slider using this plugin / 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/emerce-work-1.png" alt="Product 1" />
            </div>
            <div id="productImage2" class="slideshow-image">
                <img src="../images/emerce-work-2.png" alt="Product 2" />
            </div>
            <div id="productImage3" class="slideshow-image">
                <img src="../images/emerce-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 / to introduce the swipe effect in image slider.

I made an image slider using this plugin http://slidesjs./ 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/emerce-work-1.png" alt="Product 1" />
            </div>
            <div id="productImage2" class="slideshow-image">
                <img src="../images/emerce-work-2.png" alt="Product 2" />
            </div>
            <div id="productImage3" class="slideshow-image">
                <img src="../images/emerce-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./2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/ to introduce the swipe effect in image slider.

• javascript
• jquery
• html
• image
• slider

Share Improve this question Follow edited Dec 16, 2011 at 7:40 Umair Abid asked Dec 16, 2011 at 7:25 Umair AbidUmair Abid 1,46322 gold badges1919 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

I suggest you to use FlexSlider who already include swipe feature. The HTML code is almost the same you have just to change some class name.