[Solved] i want a sample for slider example using ratchet slider.js and phonegap android

by


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="https://stackoverflow.com/questions/28249306/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>

4

solved i want a sample for slider example using ratchet slider.js and phonegap android