Product Carousel component not loading?

[Former Member]

Hi, I'm relatively new to hybris. I have a page with a product carousel on it, but when I go to preview, it just loads with the spinning circle gif, and doesn't display the products I've loaded into it. There's no errors coming from the console. Any ideas as to what could be causing this?

[Former Member]

Yep very sorry to say this is a little bit of a bug in the Accelerator Vanilla theme.

Adding in the following JS and CSS will make carousels work better in all kinds of slots.

   if (typeof(ACC.carousel) != "undefined")
     {
         ACC.carousel.bindJCarousel = function () {
         
         var FALLBACK_DIMENSION = 300;
         
             jQuery('.span-4 .jcarousel-skin').jcarousel({
                 vertical: true,
                 itemFallbackDimension: FALLBACK_DIMENSION
             });
     
             jQuery('.span-10  .jcarousel-skin').jcarousel({
                 itemFallbackDimension: FALLBACK_DIMENSION
             });
     
             jQuery('.span-18  .jcarousel-skin').jcarousel({
                 itemFallbackDimension: FALLBACK_DIMENSION
             });
     
             jQuery('.span-20  .jcarousel-skin').jcarousel({
                 itemFallbackDimension: FALLBACK_DIMENSION
             });
     
             jQuery('.span-24  .jcarousel-skin').jcarousel({
                 itemFallbackDimension: FALLBACK_DIMENSION
             });
             
             jQuery('div.section1 .jcarousel-skin').jcarousel({
                 itemFallbackDimension: FALLBACK_DIMENSION
             });
     
             $(".modal").colorbox({
                 onComplete: function ()
                 {
                     ACC.common.refreshScreenReaderBuffer();
                 },
                 onClosed: function ()
                 {
                     ACC.common.refreshScreenReaderBuffer();
                 }
             });
     
             $('#homepage_slider').waitForImages(function ()
             {
                 $(this).slideView({toolTip: true, ttOpacity: 0.6, autoPlay: true, autoPlayTime: 8000});
             });
         };
     }

CSS

 .span-20 > .scroller, 
 .span-18 > .scroller,  
 .span-10 > .scroller {
     padding:40px 0;
 }
 
 .span-20 > .scroller .title, 
 .span-18 > .scroller .title, 
 .span-10 > .scroller .title {
     font-size:1.167em;
     font-weight:bold;
     color:#666666;
     border-bottom:1px solid #979797;
     padding:0 0 5px 0;
     text-transform:uppercase;
     margin:0 0 40px 0;
 }
 
 .span-20 > .scroller ul li, 
 .span-18 > .scroller ul li,  
 .span-10 > .scroller ul li {
     width:230px;
     margin:0 10px 0 0;
 }
 
 .span-24 .scroller {
     clear: both;
     width: 100%;
 }

 

[Former Member]

Product carousel works with explicitly span-24 slot. try to put it on another slot to test.

[Former Member]

I would recommend to check how the carousel functions and if something interferes with its Javascript. Should the carousel be loading the products via Ajax, does the Ajax URL work correctly in the preview?