Drupal Technical

[Drupal] How to enable true circular effect in Carousel in Views Slideshow jCarousel module?

Muhammed Junaid | | 2 min read

We had an issue in views_slideshow_jacrousel module that prevents true circular effect in the carousel even when we configure the module to use the circular effect. Read on to know how to enable true circular effect in Carousel in Views Slideshow jCarousel module.

In the carousel, a transition will happen when it calls the function scroll() or next() in JavaScript. When scroll() is called, it will specify the slide number as a parameter. Then, the carousel will move to that slide. When next() is called, the carousel will move to the next slide. If 'circular' effect is required, it is required to call next().If we call scroll() instead, it will go back if target slide number is less than current slide number. The 'views_slideshow_jcarousel' module calls scroll() function, regardless of the effect we want. So, configuring the carousel to have the effect 'circular' does not bring actual 'circular' effect.

To fix that issue I applied a patch to 'views_slideshow_jcarousel.js' file of 'views_slideshow_jcarousel' module. So, it will call next() function when 'circular' effect is configured.

Then the above fix caused another issue. If initial synchronization between slideshow and carousel is lost, the slideshow and carousel moves independently thereafter.

This issue is fixed by making sure that for initial transition on slideshow, we will call scroll().In this way, carousel will be synchronized with slidshow. For subsequent slides, we continued with calling next() function.

This is the fix I applied to views_slishow_jacarousel 7.x-1.x-dev module:

@@ -24,6 +24,7 @@
           Drupal.settings.viewsSlideshowJCarouselPager[uniqueID][location]['carouselObj'] = carousel;
         }
       });
+      Drupal.settings.viewsSlideshowJCarouselPager[uniqueID][location].num_scrolled = 0;
 
       $(this).find('.views_slideshow_jcarousel_pager_item').each(function(index, pagerItem) {
         $(pagerItem).click(function() {
@@ -42,7 +43,12 @@
 Drupal.viewsSlideshowJcarouselPager.transitionBegin = function (options) {
   for(pagerLocation in Drupal.settings.viewsSlideshowPager[options.slideshowID]) {
     if (Drupal.settings.viewsSlideshowJCarouselPager[options.slideshowID][pagerLocation].moveOnChange) {
-      Drupal.settings.viewsSlideshowJCarouselPager[options.slideshowID][pagerLocation]['carouselObj'].scroll(options.slideNum);
+      var circular = Drupal.settings.viewsSlideshowJCarouselPager[options.slideshowID][pagerLocation].wrap == 'circular';
+      if (circular && Drupal.settings.viewsSlideshowJCarouselPager[options.slideshowID][pagerLocation].num_scrolled > 1) {
+        Drupal.settings.viewsSlideshowJCarouselPager[options.slideshowID][pagerLocation]['carouselObj'].next();
+      else {
+        Drupal.settings.viewsSlideshowJCarouselPager[options.slideshowID][pagerLocation]['carouselObj'].scroll(options.slideNum);
+      }
     }
   }
 };

Once you apply this patch to the module, the carousel will work with a true cycle effect without having them slide back.

 

 

Related Topics