title: flexslider and flexcarousel on one page
body: <p>When I try to use "basic flexlisder" (<a href="http://flexslider.woothemes.com/index.html" rel="nofollow">http://flexslider.woothemes.com/index.html</a>) and "basic carousel" (<a href="http://flexslider.woothemes.com/basic-carousel.html" rel="nofollow">http://flexslider.woothemes.com/basic-carousel.html</a>) on one page, carousel does not display properly. I guessed it's fault of clashing class names (since both are in <code>&lt;div class="flexslider"&gt;</code>). However, after analyzing source code on flexslider page, I found they put the carousel in <code>&lt;div class="flexslider carousel"&gt;</code> , unlike what is written in the example, but it still did not help. Carousel still behaves like slider.</p>
  
  <p>I also tried copying styles for new class, which I called flexcarousel, but it didn't work (even after making changes in jquery call as well). Anyone has simple example of slider and carousel working on a simple page?</p>
  
  <p>My javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
                      //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
                          });
                      });
  
  &lt;/script&gt;
  </code></pre>