如何使用flexslider设置多个滑块？
如何使用flexslider设置多个滑块？
提问于 2012-07-19 18:49:42
我使用flexslider，当我按照他们网站上的说明操作时，它不适用于多个滑块，这是代码：
我需要在两个滑块上都有一个控制器导航，说明在这里：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>回答 3
Stack Overflow用户
发布于 2013-01-30 19:28:54
<!-- 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>Stack Overflow用户
发布于 2014-09-15 08:25:41
在 中使用My Live solution
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
/*-----------------------------------------------------------------------------------*/
/* DOC Javascript JS */
/*-----------------------------------------------------------------------------------*/
(function($, window){
/*-----------------------------------------------------------------------------------*/
window.app = {};
/*--------------------------------------------------------------------------------*/
app.uiSlide =
{
/* Test elem and Call flexslider() */
flexslider: function ( elem, params ) {
// Test if elem exist in dom
if( $(elem).length > 0 ){
// Call function
$(elem).flexslider(params);
};
},
/* Define and init all elem */
init: function () {
// 1 Define Objects Collection
var elem =
[
// Slider A
{
slide: '#flexslider-a',
param: {
animation: 'slide',
controlsContainer: '.flex-container'
}
},
// Slider B
{
slide: '#flexslider-b',
param: {
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
smoothHeight: true,
}
}
// Add Slide XYZ
//...
//...
];
// 2 Init All
for( var i=0; i < elem.length; i++ ){
this.flexslider( elem[i].slide, elem[i].param )
}
}
};
/* init all function() */
app.start =
function(){
this.uiSlide.init()
};
/*--------------------------------------------------------------------------------*/
$(document).ready(function(){app.start();})
/*-----------------------------------------------------------------------------------*/
})(jQuery, window)
</script>
<!-- Somewhere in the of your page -->
<!-- SLIDER A -->
<div id="flexslider-a" 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>
<!-- SLIDER B -->
<div id="flexslider-b" 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>Stack Overflow用户
发布于 2014-02-16 05:04:14
在问题上由OP解决：
我已经弄清楚了，我用的是一些旧文件。我使用flexslider，当我按照他们网站上的说明操作时，它不适用于多个滑块，这是代码：
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="http://www.xxx.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" />
<script src="http://www.xxx.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11559209
复制相关文章
相似问题
腾讯云开发者
