is tiny carousel example in jquery moble +phonegap

Question

I am implementing scrolling header in jquery mobile.I Google it find tiny carousel example .Good example,But i need same thing in jquery mobile.is there any API present .Or i need add tiny carousel js file in my project http://baijs.nl/tinycarousel/

Gajotres · Answer 1 · 2013-07-05T12:50:39.143

First I would advise you against using tiny carousel, mainly because it is not responsive and when working with jQuery Mobile you need to use responsive plugins. Your page/app will need to work on a various platforms and it would look bad if plugin can' correctly match page width.

To prove my point take a look at a tiny carousel combined with jQuery Mobile: http://jsfiddle.net/Gajotres/wcjUk/

Plus to answer your second question, when ever you use 4rd party plugin you need to include its js and css file.

I have found another solution for you. It is called BxSlider and it is responsive, basically it correctly covers page width, in your case header.

Here's a working example: http://jsfiddle.net/Gajotres/5wyMh/

I have even put a solution to show/hide header, I know you need it ;)

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" />        
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
        <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>          
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header" data-position="fixed" data-fullscreen="true">
                <div class="slider">
                    <ul class="bxslider">
                        <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
                    </ul></div>
            </div>

            <div data-role="content">

            </div>
        </div>    
    </body>
</html>

Javascript:

$(document).on('pagebeforeshow', '#index', function(){ 
    $('.bxslider').bxSlider({
        minSlides: 2,
        maxSlides: 2,
        slideWidth: 360,
        slideMargin: 10
    });
});

EDIT:

I made you new version: http://jsfiddle.net/Gajotres/5wyMh/

This one has swipe option, if you swipe over images it will scroll a carousel left or right. Pagination has been removed. Basically now it looks just fine. Tell me if you need anything more.

But there is red But in your example.But i need no button User can swap by touching.In second example there is on DOT(...)Example is correct But i need user only swap using touching — user2549922, Jul 05 '13 at 09:29
There is scrolling of images which touch (swaping) like as iscroll — user2549922, Jul 05 '13 at 09:58
i am facing the same issue http://stackoverflow.com/questions/16375557/fixed-header-scrolls-drags-in-jquery-mobile — user2549922, Jul 05 '13 at 15:28
it's a big question not able to ask in stackoverflow..?is there any way to send code..? — user2549922, Jul 05 '13 at 15:30
or solve this question..http://stackoverflow.com/questions/17486444/how-to-do-facebook-integration-in-jquery-mobile-in-android-and-ios — user2549922, Jul 05 '13 at 15:51

is tiny carousel example in jquery moble +phonegap

1 Answers1