so slider should displaying 5 slides , responding down 1 based on viewport size. in chrome/opera, seems working, in firefox , ie11, shows 1 slide. ideas?
my slider live here: http://www.peaceloveanddecorating.com/store/pg/537-lenny-eva-style-guide.html
here code:
<div> <ul class="bxslider" style="text-align: center; "> <li><img src="/images/brands/lenny-eva/lenny-eva-wide-cuffs-cat.jpg"><span class="le-slider-text">test 1</span></li> <li><img src="/images/brands/lenny-eva/large-sentiments-cat.jpg"><span class="le-slider-text">test 2</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-thin-cuff-cat.jpg"><span class="le-slider-text">test 3</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-pendants-cat.jpg"><span class="le-slider-text">test 4</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-beaded-cat.jpg"><span class="le-slider-text">test 5</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-wraps-cat.jpg"><span class="le-slider-text">test 6</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-flourish-cat.jpg"><span class="le-slider-text">test 7</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-mini-charms-cat.jpg"><span class="le-slider-text">test 8</span></li> </ul> </div> <script> $(document).ready(function(){ $('.bxslider').bxslider(); }); </script> <script> $('.bxslider').bxslider({ maxslides: 5, slidewidth: 200, slidemargin: 10 }); </script> this in head:
<script src="/shared/themes/base/js/jquery.bxslider.min.js"> <link rel="stylesheet" href="/shared/themes/base/css/jquery.bxslider.css">
as @indierok pointed out in comments, initializing bxslider twice, causing problems. changing code example below fixed it.
<div> <ul class="bxslider" style="text-align: center; "> <li><img src="/images/brands/lenny-eva/lenny-eva-wide-cuffs-cat.jpg"><span class="le-slider-text">test 1</span></li> <li><img src="/images/brands/lenny-eva/large-sentiments-cat.jpg"><span class="le-slider-text">test 2</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-thin-cuff-cat.jpg"><span class="le-slider-text">test 3</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-pendants-cat.jpg"><span class="le-slider-text">test 4</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-beaded-cat.jpg"><span class="le-slider-text">test 5</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-wraps-cat.jpg"><span class="le-slider-text">test 6</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-flourish-cat.jpg"><span class="le-slider-text">test 7</span></li> <li><img src="/images/brands/lenny-eva/lenny-eva-mini-charms-cat.jpg"><span class="le-slider-text">test 8</span></li> </ul> <script> $(document).ready(function(){ $('.bxslider').bxslider({ maxslides: 5, slidewidth: 200, slidemargin: 10 }); }); 
Comments
Post a Comment