我正在为一个项目使用
Flex slider.我需要在一个页面上使用相同的控件控制两个滑块.
一部分是显示图像的主滑块,第二部分是文本(在这种情况下,它将取自WP中的“the_excerpt”).
基本上,这是我用来在一个页面上调用两张幻灯片的代码：
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider();
});
现在,我需要将它们“连接”到相同的控件,所以当我点击箭头时,它会滑动/淡化它们.
解决方法
你可以通过放弃controlsContainer设置并创建自己的导航来完成你想要做的事情,然后链接到两个滑块.这是一个如何(请注意它未经测试)的想法
你的标记看起来像这样.注意链接上的rel属性 – 我们将在下面使用它们.另请注意,值从0开始 – 这与幻灯片的值匹配(例如,第一张幻灯片为0,第二张为1等).
<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>
<a rel="3" class="slide_thumb" href="#">slide link 3</a>
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="image1.jpg" />
</li>
<li>
<img src="image2.jpg" />
</li>
<li>
<img src="image3.jpg" />
</li>
<li>
<img src="image4.jpg" />
</li>
</ul>
</div>
<div id="secondary-slider" class="flexslider">
<ul class="slides">
<li>
<p>Text 1</p>
</li>
<li>
<p>Text 2</p>
</li>
<li>
<p>Text 3</p>
</li>
<li>
<p>Text 4</p>
</li>
</ul>
然后设置对flexslider的调用
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {
$('#main-slider').flexslider({
animation: "slide",slidetoStart: 0,start: function(slider) {
$('a.slide_thumb').click(function() {
$('.flexslider').show();
var slideto = $(this).attr("rel")//Grab rel value from link;
var slidetoInt = parseInt(slideto)//Make sure that this value is an integer;
if (slider.currentSlide != slidetoInt) {
slider.flexAnimate(slidetoInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
}
});
}
});
$('#secondary-slider').flexslider({
animation: "slide",start: function(slider) {
$('a.slide_thumb').click(function() {
$('.flexslider').show();
var slideto = $(this).attr("rel")//Grab rel value from link;
var slidetoInt = parseInt(slideto)//Make sure that this value is an integer;
if (slider.currentSlide != slidetoInt) {
slider.flexAnimate(slidetoInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
}
});
}
});
});
</script>
基本上两个滑块都由同一组导航链接控制.认为这应该让你朝着正确的方向前进,但如果你需要任何解释的话就会喊叫.