flexslider и flexcarousel на одной странице

Question

Когда я пытаюсь использовать «basic flexlisder» (http://flexslider.woothemes.com/index.html) и «базовую карусель» (http://flexslider.woothemes.com/basic-carousel.html) на одной странице, карусель отображается неправильно. Я догадался, что это вина за столкновение имен классов (так как оба находятся в <div class="flexslider">). Однако, проанализировав исходный код на странице flexslider, я обнаружил, что они помещают карусель в <div class="flexslider carousel">, в отличие от того, что написано в примере, но это все равно не помогло. Карусель все еще ведет себя как слайдер.

Я также пробовал копировать стили для нового класса, который я назвал flexcarousel, но он не работал (даже после внесения изменений в вызов jquery). У кого-нибудь есть простой пример слайдера и карусели, работающих на простой странице?

Мой JavaScript:

<script type="text/javascript"> 

        //slideshow 
        $(window).load(function() { 
         $('.flexslider').flexslider({ 
          animation : "slide", 
          start : function(slider) { 
           $('body').removeClass('loading'); 
          } 
         }); 
        }); 
        //carousel 
        $(window).load(function() { 
         $('.flexcarousel').flexslider({ 
          animation : "slide", 
          animationLoop : false, 
          itemWidth : 210, 
          itemMargin : 5, 
          minItems : 2, 
          maxItems : 4 
         }); 
        }); 

</script> 

Answer 1

Класс карусельного не на самом деле сделать это карусель, вы должны назначить пункты, ширину с помощью itemWidth, в опциях:

$(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: false, 
    itemWidth: 210, // Must have a size set for it to switch to carousel view. 
    }); 
}); 

Убедитесь в том, используйте разные идентификаторы для каждого отдельного гибкого планера (если у вас более одного):

<div id="main-slider" class="flexslider"> 
<div id="secondary-slider" class="flexslider">