如何使用 flexslider 设置多个滑块? [英] How to set up multiple sliders with flexslider?
本文介绍了如何使用 flexslider 设置多个滑块?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用 flexslider,当我按照他们网站上的说明操作时,它不适用于多个滑块,这是代码:
I use flexslider, when i follow instructions on their website it doesn't work for multiple sliders, this is the code:
我需要两个滑块上的控制器导航,说明在这里:http://www.woothemes.com/flexslider/
i need a controler nav on both sliders, instructions are here: http://www.woothemes.com/flexslider/
谁知道我做错了什么?
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="http://www.esens.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" />
<script src="http://www.esens.nl/assets/templates/esens/flexslider/jquery.flexslider-min.js"></script>
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider();
});
</script>
<!-- Somewhere in the of your page -->
<div id="main-slider" class="flexslider">
<ul class="slides">
<li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
<li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
</ul>
</div>
<br><br><br>
<div id="secondary-slider" class="flexslider">
<ul class="slides">
<li><img src="http://images.forum-auto.com/mesimages/651885/Noir%20Fantome.png" /></li>
<li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
<li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
</ul>
</div>
推荐答案
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
</script>
这篇关于如何使用 flexslider 设置多个滑块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文