Setting an icons slider for mobile in Jquery

Question

I want to create a for a mobile slider with 4 icons and small circles below them, that will change when every 4 icons changing (should work with spiwe also) Found and exmaple in FlexSlider http://flexslider.woothemes.com/index.html

Build a list of images into my index.html page and added CSS files

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

javaScript function in index.html

 $(document).ready(function () {
                  $('.flexslider').flexslider({
                      animation: "slide",
                      animationLoop: false,
                      itemWidth: 80,
                      itemMargin: 5
                  });
              });

But it's not working as in the site, its set an white row without any images...Any ideas where my mistake is?

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Document ready can not be used with jQuery Mobile because of how jQuery Mobile handles page loading.

To find more about page events, its difference to document ready take a look at this ARTICLE or find it HERE.

Working jsFiddle example: http://jsfiddle.net/Gajotres/CPpBD/

Basically all you have to do is change this:

$(document).ready(function () {
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 80,
        itemMargin: 5
    });
});

to this:

$(document).on('pageshow', '#index', function(){       
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false
    });
});

You can read more about pageshow event in a link I posted at the begging of this answer.

Setting an icons slider for mobile in Jquery

1 Answers1