iDangerous Swiper not detecting swipe

So I'm creating a image marquee for a mobile site that uses iDangerous Swiper plugin and have run into a issue when trying to use it. Following the set up based on the site, found here, I built my demo page to the exact spec of their demo. But for some reason, the function isn't running and I cant swipe to the next div. Being a mobile site, I'm using Jquery and Jquery Mobile. Any ideas?

<body>

<div class="swiper-container">
  <div class="swiper-wrapper">

      <!--First Slide-->
      <div class="swiper-slide">
       <img src="img/1.png" width="200" height="118">
      </div>

      <!--Second Slide-->
      <div class="swiper-slide">
       <img src="img/2.png" width="200" height="118">
      </div>

      <!--Third Slide-->
      <div class="swiper-slide">
        <img src="img/3.png" width="200" height="118">
      </div>

      <!--Fourth Slide-->
      <div class="swiper-slide">
       <img src="img/4.png" width="200" height="118"> 
      </div>

      <!--Fifth Slide-->
      <div class="swiper-slide">
        <img src="img/5.png" width="200" height="118">
      </div>      

  </div>
</div>

<script>

$(function(){
    var mySwiper = $('.swiper-container').swiper(options);
})

</script>
</body>

Answers


To use buttons for Swiper you need to use .swipeNext() and .swipePrev() methods on mySwiper object like:

<!-- Add somewhere in HTML your buttons:-->
<span class="button-next">Next button</span>
<span class="button-prev">Previous button</span>
<script>
$(function(){
  var mySwiper = $('.swiper-container').swiper();
  //"Next" button - some HTML element with "button-next" class
  $('.button-next').click(function(){mySwiper.swipeNext()})
  //"Prev" button - some HTML element with "button-prev" class
  $('.button-prev').click(function(){mySwiper.swipePrev()})

})
</script>

iDangero.us here!:) Your HTML is correct. But what is "options" in your example? this should be an object with parameters or if you want to use default options then just remove "options" word from your example like: var mySwiper=$('.swiper-container').swiper()


Need Your Help

Retrieve path parameters with Jersey from the request object

java rest jersey

I have a REST API call using Jersey, like this:

Titanium is not defined when attempting Titanium.UI.currentWindow using titanium appcelerator

javascript html5 titanium

When I run the app on the device I get no error (well nothing occurs at all) as there is no debug console but when I run the app in the browser I get "Titanium is not defined"