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

a library forces global overloads of new/delete on me!

c++ operator-overloading memory-management new-operator allocation

I'm maintaining a plugin (implemented as a dll) for a big closed source application. This has been working fine for years. However, with the latest update to it's SDK the vendor overloaded global

How to debug an App on Android with GDBSERVER?

android debugging gdb jni gdbserver

I'm trying to debug a native shared library that my App uses through JNI. I can attach to a running app just fine with "gdbserver --attach pid" but i need to actually launch my app when i launch the

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.