Search jQuery

jQuery Forum

jQuery Mobile

ollibruen..

flexslider

in jQuery Mobile • 1 year ago

flexslider (http://flex.madebymufffin.com/demo/) is a jquery slider plugin that works well on different display sizes.

it also seems to work well with jquery mobile. just download the demo and modify the demo.html file:

<!DOCTYPE html>
<html>
<head>
<title>Flexslider on jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo-stuff/demo.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<div id="mypage" data-role="page">
<div data-role="header">
<h1>
Flexslider on jQuery Mobile
</h1>
</div>
<div data-role="content">
<div id="container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="demo-stuff/inacup_samoa.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="demo-stuff/inacup_donut.jpg" />
</li>
<li>
<img src="demo-stuff/inacup_vanilla.jpg" />
</li>
</ul>
</div>
<br/>
<br/>
</div>
</div>
</body>
</html>

Replies(14)

webeditor..

Re: flexslider

1 year ago

I am using it for my jqm site. It does everything I need. I really like it.

hiulit

Re: flexslider

1 year ago

Hi!

Do you know how can I make it look more iPhone stylish? Black background, 100% width, etc?

brente

Hi. Thanks for posting this code. Your code works for me, but I can't get a second page to load. With an inline one, it never navigates to it. An external .html file will. Something is breaking the navigation functionality I think.

Try a test where you have a second page in the index.html file. And a button that navigates to the #two page. It doesnt do anything. No errors either.

Is the window.load the right way to initialize this? What about the pageInit() as they recommend?

http://jquerymobile.com/test/docs/api/events.html

$('#mypage').live('pageshow', function(event){

console.log('pageshow triggered');

$('.flexslider').flexslider();

});

Any ideas?

ollibruen..

Re: flexslider

1 year ago

yes, you are right. this works for me:

<!DOCTYPE html>
<html>
<head>
<title>Flexslider on jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo-stuff/demo.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="jquery.flexslider-min.js" type="text/javascript"></script>
</head>
<body>
<div id="mypage" data-role="page" data-theme="c">
<script type="text/javascript">
$('#mypage').live('pageinit', function() {
$('.flexslider').flexslider();
});
</script>
<div data-role="header">
<h1>
Flexslider on jQuery Mobile
</h1>
</div>
<div data-role="content">
<div id="container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="demo-stuff/inacup_samoa.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<img src="demo-stuff/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="demo-stuff/inacup_donut.jpg" />
</li>
<li>
<img src="demo-stuff/inacup_vanilla.jpg" />
</li>
</ul>
</div>
<br/>
<br/>
</div>
<a href="#secondpage">secondpage</a>
</div>
</div>
<div id="secondpage" data-role="page" data-theme="c">
<div data-role="header">
<h1>
Second Page
</h1>
</div>
<div data-role="content">
<a href="#mypage">mpage</a>
</div>
</body>
</html>

brente

Re: flexslider

1 year ago

Awesome. Yeah it needs pageinit, I was using pageshow which didn't work correctly.

This code here works great. And the JS is in the head, like it probably should be as well. Thank you Olli! I send you a virtual beverage of your choice and a level-up in code karma!!

<!DOCTYPE html>

<html>

<head>

<title>Flexslider on jQuery Mobile</title>

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />

<link rel="stylesheet" href="demo-stuff/demo.css" type="text/css" media="screen" />

<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>

<script src="jquery.flexslider-min.js" type="text/javascript"></script>



<script type="text/javascript">

$('#mypage').live('pageinit', function() {

$('.flexslider').flexslider();

});

</script>





</head>

<body>

<div id="mypage" data-role="page" data-theme="c">

<div data-role="header">

<h1>

Flexslider on jQuery Mobile

</h1>

</div>

<div data-role="content">

<div id="container">

<div class="flexslider">

<ul class="slides">

<li>

<img src="demo-stuff/inacup_samoa.jpg" />

<p class="flex-caption">Captions and cupcakes. Winning combination.</p>

</li>

<li>

<img src="demo-stuff/inacup_pumpkin.jpg" /></a>

<p class="flex-caption">This image is wrapped in a link!</p>

</li>

<li>

<img src="demo-stuff/inacup_donut.jpg" />

</li>

<li>

<img src="demo-stuff/inacup_vanilla.jpg" />

</li>

</ul>

</div>

<br/>

<br/>

</div>

<a href="#secondpage" data-role="button">secondpage</a>

</div>

</div>

<div id="secondpage" data-role="page" data-theme="c">

<div data-role="header">

<h1>

Second Page

</h1>

</div>

<div data-role="content">

Oh yeah, here's the second page.

<a href="#mypage" data-role="button">mpage</a>

</div>

</body>

</html>

lardois

Re: flexslider

1 year ago

Hi all!

A question related to Flexslider, not to the discussion above:

Is it possible to tell Flexslider to go directly to a slide? I can't find any functions in documentation except callbacks.

Thanks for an answer.

canoli

Re: flexslider

9 months ago

hi all, especially brente.

I've tried your code:

$('#mypage').live('pageinit', function() {

$('.flexslider').flexslider();

});

</script>

Even copied your whole page you posted here, but I can't get the flexslider to initialise on first pageinit. It simply doesn't load, only after pagerefresh. Here's a page of mine which I would like to get to work. What am I missing here?

<!DOCTYPE html>

  <title></title>

  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.1.min.css">
  <link rel="stylesheet" type="text/css" href="css/flexslider.css">
  <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>


<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>


  <script src="jquery.flexslider-min.js" type="text/javascript"></script>

  <script type="text/javascript">
  $('#mypage').live('pageinit', function() {
  $('.flexslider').flexslider();
  });
  </script>
</head>
<body>

<div id="mypage"  data-role="page">
  <div data-role="header"> <a href="#" data-rel="back" class="ui-btn-active-back"></a>
     <h1>mypage</h1>
     </div>

<div data-role="content">
<div class="flexslider">
  <ul class="slides">
  <li>
  <img src="images/image1.jpg" />
  </li>
  <li>
  <img src="images/image2.jpg" />
  </li>
  <li>
  <img src="images/image3.jpg" />
</ul>

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

brente

Re: flexslider

9 months ago

Yeah sorry, but I have no idea any more. I had problems with FlexSlider refreshing correctly and had it working at one point. I eventaully moved to swipejs.com slider. But had problems with that and JQMobile as well. The v2 of swipe works, but needed some slight tweaking a few months ago. Possibly fixed now.

My sample hack code is most likely out of date already and fixed/addressed in these new versions.

I would look into these:

https://github.com/bradbirdsall/Swipe/tree/swipe2

https://github.com/filamentgroup/responsive-carousel#readme

http://www.woothemes.com/2012/07/flexslider-v2-is-here/ (new version)

Cheers,

brente

tcab

Re: flexslider

5 months ago

Still trying to find a carousel for jquery mobile.

https://github.com/bradbirdsall/Swipe/tree/swipe2
https://github.com/filamentgroup/responsive-carousel#readme
http://www.woothemes.com/2012/07/flexslider-v2-is-here/ (new version)

Ironically these all have the same flaw - a jerky pause mid swipe (on my ipad 3). The presence of other jquery mobile components seems to interfere with the smoothness of the swiping.

The jquery mobile stylesheet inteferes with stuff I think. Removing that stylesheet (pointless I know) brings back the smoothness. See https://github.com/bradbirdsall/Swipe/issues/152

As a potential double irony, the jquery mobile roadmap https://github.com/jquery/jquery-mobile/wiki/Roadmap refers to https://github.com/filamentgroup/responsive-carousel#readme when talking about the future carousel component for jquery mobile. Not sure if that link is the candidate to be adapted into jquery mobile - the funny thing is - that too has the jerky mid swipe behaviour in the demos (on my ipad3). And that's not even wrapped in jquery mobile yet!

canoli

Re: flexslider

9 months ago

Thnx brente for your suggestions. I've tried them, but the problem that I had with flexslider persist with the other carousels. They only work after page refresh or with rel="external"/data-ajax="false". Well, back to the drawing board I guess!

watusiware

Re: flexslider

5 months ago

On iOS, you need to hint the browser to use hardware acceleration.

Try adding -webkit-transform: translateZ(0) to the image elements.

See if the pause goes away after you have swiped through all of the slides once. If so, then the transform should fix it.

The transform forces the browser to cache all of the elements in advance. (I'm talking about rendering cache, not file cache.) Otherwise, they are cached as they are needed during rendering (e.g. when they first appear on-screen), and that causes the pauses.

The negative of this is that it will increase page setup time. it moves the work up-front.

tcab

Re: flexslider

4 months ago

Thanks for the tip re -webkit-transform though I'd need to figure out how to apply it to divs not images, as that is what I need a carousel for - to slide around arbitrary content containing jquery mobile widgets.

Anyway, just by running the demo/index.html that comes with Flexslider 2 on my iPhone 4S, you can see the pause happen mid swipe. And it doesn't go away after you've swiped through all the images - its permanently there.

outklip

Re: flexslider

3 months ago

jQuery mobile to initialize with (window).load:

jQuery(window).load('pageinit', function(){

jQuery('.flexslider').flexslider({

animation: "fade",

start: function(slider){

jQuery('body').removeClass('loading');

}

});

</script>

darragh.g..

Re: flexslider

1 month ago

I just installed flexslider 2 on a site but I'm having a bit of trouble with the video slide. It's just not sitting right in the box. I have 2 other image slides that look good but the video is my problem. Here is where I have the flexslider2 installed: http://upongoogle.com/waterside/ I want to make the video slide the same size (or close enough to the same size) as the image slides.

Any ideas? Thank you.

Top Reply

Response title

Attachments

jQuery Forum

flexslider

Replies(14)

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Re: flexslider

Statistics

Tags

Actions

Related Posts