-5

I am using slider.js. I want to slide one image after another image like examples available on ratchet site.I have to do this using ratchet and phonegap in android.Plz help me..

Thanks in advance.

Mamata Behera
  • 43
  • 1
  • 1
  • 6

1 Answers1

-1

This worked for me perfectly, as available on the website.

Is this what you want ?

If this is what you need, then simply copy ratchet.js and ratchet.cssin your www folder and then, link it accordingly in your html. You can get hint from below sample. Dont forget to have some images in your project.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ratchet template page</title>

        <!-- Sets initial viewport load and disables zooming  -->
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">

        <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!-- Include the compiled Ratchet CSS -->
        <link href="../css/ratchet.css" rel="stylesheet">

        <!-- Include the compiled Ratchet JS -->
        <script src="../js/ratchet.js"></script>
    </head>
    <body>

        <!-- Make sure all your bars are the first things in your <body> -->
        <header class="bar bar-nav">
            <h1 class="title">Ads</h1>
        </header>

        <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
        <div class="content">
            <div class="slider" id="mySlider">
                <div class="slide-group">
                    <div class="slide">
                        <img src="../img/Black-Android-Logo-Wallpaper.png">
                    </div>
                    <div class="slide">
                        <img src="../img/Popeye-advertisement-artwork-inspirational--1545575-320x480.jpg">
                    </div>
                    <div class="slide">
                        <img src="../img/Black-Android-Logo-Wallpaper.png">
                    </div>
                    <div class="slide">
                        <img src="../img/Popeye-advertisement-artwork-inspirational--1545575-320x480.jpg">
                    </div>
                    <div class="slide">
                        <img src="../img/Black-Android-Logo-Wallpaper.png">
                    </div>
                    <div class="slide">
                        <img src="../img/Popeye-advertisement-artwork-inspirational--1545575-320x480.jpg">
                    </div>
                </div>
            </div>

            <!-- Icons in standard bar fixed to the bottom of the screen -->
            <div class="bar bar-standard bar-footer">
                <a href="dashboard.html" class="icon pull-right"><span class="badge badge-primary">Skip</span></a>
            </div>
        </div>
    </body>
</html>
Chintan Soni
  • 24,761
  • 25
  • 106
  • 174
  • I have used the above code. Still not working. Showing the images from top to bottom. But i want to show the second image after sliding the first from right to left... – Mamata Behera Jan 31 '15 at 08:13
  • @MamataBehera My sample works. I am currently working with this framework on Phonegap platform. One more thing. You need to check it on real device or emulator, Swipe and click events wont work on web browsers. – Chintan Soni Jan 31 '15 at 08:33
  • @MamataBehera I guess, in your case, css is not applied. Check for it. – Chintan Soni Feb 03 '15 at 09:08
  • Well, you can mark the answer as accepted. So that other users can refer this answer, if they get stuck, like you got. One more thing. It also works fine with cordova... May be you are facing problem loading cordova script. – Chintan Soni Feb 05 '15 at 06:25