javascript - flexslider and flexcarousel on one page -
when try use "basic flexlisder" (http://flexslider.woothemes.com/index.html) , "basic carousel" (http://flexslider.woothemes.com/basic-carousel.html) on 1 page, carousel not display properly. guessed it's fault of clashing class names (since both in <div class="flexslider">
). however, after analyzing source code on flexslider page, found put carousel in <div class="flexslider carousel">
, unlike written in example, still did not help. carousel still behaves slider.
i tried copying styles new class, called flexcarousel, didn't work (even after making changes in jquery call well). has simple example of slider , carousel working on simple page?
my 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>
the carousel class not make carousel, have assign items width using itemwidth
, within options:
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide", animationloop: false, itemwidth: 210, // must have size set switch carousel view. }); });
make sure use different ids target each individual flexslider (if have more one):
<div id="main-slider" class="flexslider"> <div id="secondary-slider" class="flexslider">
Comments
Post a Comment