I'm developing a full-screen web app for an iPad that will have a series of images on screen in a slider whereby the user will be able to scroll between them and then click on one.

Here is an example image of how it would look:

There are plenty of jQuery-based sliders out-there but all require the use of a user clicking some form of button. What I want to do is replicate it so that the user would swipe the screen to move between the different images.

Here is some example markup:

<ul id="magazine-slider">
    <li>
        <div class="image">
            <img src="magazine-cover-jan.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>January 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
    <li>
        <div class="image">
            <img src="magazine-cover-feb.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>February 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
    <li>
        <div class="image">
            <img src="magazine-cover-mar.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>March 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
</ul>

<ul id="magazine-slider-pagination">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Can anyone help? Thanks

I'm developing a full-screen web app for an iPad that will have a series of images on screen in a slider whereby the user will be able to scroll between them and then click on one.

Here is an example image of how it would look:

There are plenty of jQuery-based sliders out-there but all require the use of a user clicking some form of button. What I want to do is replicate it so that the user would swipe the screen to move between the different images.

Here is some example markup:

<ul id="magazine-slider">
    <li>
        <div class="image">
            <img src="magazine-cover-jan.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>January 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
    <li>
        <div class="image">
            <img src="magazine-cover-feb.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>February 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
    <li>
        <div class="image">
            <img src="magazine-cover-mar.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>March 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
</ul>

<ul id="magazine-slider-pagination">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Can anyone help? Thanks

• javascript
• jquery
• ipad

Share Follow asked Feb 4, 2011 at 17:54 CameronCameron 28.9k102102 gold badges289289 silver badges490490 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You have to intercept touchStart/Move/End events ( http://developer.apple./library/safari/#documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html )... take a look here:

http://padilicious./code/touchevents/

and here for a pre-built ponent:

iPhone / iPad / iPod swipe events javascript

You will probably need a touch-based mobile framework to handle the touches/swipe.

One that es to mind is Sencha.