CODEWITHSUNDEEP
javascriptjquerymobilecarousel
user801347
user801347

Reputation: 1373

How add 'swipe/touch' to a 'jquery circular carousel'

I'm using jquery circular carousel for a 3D carousel with its Next and Previous button to rotate it.(which all works fine)

I now want to add mobile devices's 'swipe' capability to also rotate the carousel . The structure for the carousel is:

<link rel="stylesheet" href="css/3D_rotating_carousel/style.css" />
<link rel="stylesheet" href="css//3D_rotating_carousel/jquery.circular-carousel.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/jquery.circular-carousel.js"></script> 
    <script src="js/script.js"></script>

<div class="container" style="height:500px;">
  <ol class="carousel">
    <li class="item active">
        <img src="images/guitar10.jpg" alt="" /></li>
    ...
    <li class="item">
        <img src="images/guitar19.jpg" alt="" /></li>
  </ol>
</div>

<div class="controls">
 <a tabindex="4" href="#" class="previous hyperlink" >Previous</a> 
 <a tabindex="5" href="#" class="next hyperlink" >Next</a>
</div>

I've now added:

<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"/> <!-- needed for 'touch' on mobiles -->
<script>
    $(document).ready(function() {  
        $(".container").swiperight(function() {  
            $(this).carousel('previous');  
        });  
     $(".container").swipeleft(function() {  
      $(this).carousel('next');  
       });  
    });  
</script>

But I obviously haven't understood the above references correctlly as the 'swipe' doesn't work. I'm also having to borrow an iPad for testing - and the time I can borrow it is limited - the owner seems lost without it ;-)

Can someone help me understand what's wromg - thanks.

Upvotes: 0

Views: 985

Answers (1)

nomve
nomve

Reputation: 735

According to the documentation/demo of the carousel, you're using its API wrong. $(this).carousel('previous') won't do anything. The plugin adds just a CircularCarousel method to jQuery to initialize the carousel. It then (somewhat unusually for jQuery) returns an object whose methods you can use. You need to save this object, and then reference it in your swipe callback. The method is called cycleActive.

var carousel = $('.selector').CircularCarousel(options);
$(".selector").swiperight(function() {  
    carousel.cycleActive('previous');  
});

Upvotes: 1

Related Questions