CODEWITHSUNDEEP
javascriptjqueryipad
Cameron
Cameron

Reputation: 28853

iPad WebApp that simulates swipe slider

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: http://www.geardiary.com/wp-content/uploads/2010/10/wired-mag-ipad-screen-caps-001-525x700.png

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

Upvotes: 2

Views: 8575

Answers (2)

Brian Liang
Brian Liang

Reputation: 7774

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

One that comes to mind is Sencha.com

Upvotes: 2

mamoo
mamoo

Reputation: 8166

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

http://padilicious.com/code/touchevents/

and here for a pre-built component:

iPhone / iPad / iPod swipe events javascript

Upvotes: 2

Related Questions