Flex Slider - 如何为两个滑块添加相同的控件 [英] Flex Slider - How to add same controls for two sliders

问题描述

我正在为一个项目使用 Flex 幻灯片r.我需要使用相同的控件在一页上控制两个滑块.

一部分是显示图像的主滑块，第二部分是文本(在这种情况下，它将取自 WP 中的the_excerpt").

基本上，这是我用来在一页上调用两张幻灯片的代码:

 $(window).load(function() {$('#main-slider').flexslider({动画:'幻灯片'，控件容器:'.flex 容器'});$('#secondary-slider').flexslider();});

现在，我需要将它们连接"到相同的控件，所以当我点击箭头时，它会滑动/淡化它们.

解决方案

您可以通过放弃 controlsContainer 设置并创建您自己的导航，然后链接到两个滑块来完成您想要做的事情.这是一个关于如何的想法(请注意它未经测试)

您的标记看起来像这样.请注意链接上的 rel 属性 - 我们将在下面使用它们.另请注意，值从 0 开始 - 这与幻灯片的值匹配(例如，第一张幻灯片为 0，第二张幻灯片为 1 等).

<a rel="0" class="slide_thumb" href="#">幻灯片链接1</a><a rel="1" class="slide_thumb" href="#">幻灯片链接 2</a><a rel="2" class="slide_thumb" href="#">幻灯片链接 3</a><a rel="3" class="slide_thumb" href="#">幻灯片链接 3</a><div id="main-slider" class="flexslider"><ul class="slides"><li><img src="image1.jpg"/><li><img src="image2.jpg"/><li><img src="image3.jpg"/><li><img src="image4.jpg"/>

<div id="secondary-slider" class="flexslider"><ul class="slides"><li><p>文本 1</p><li><p>文本 2</p><li><p>文本 3</p><li><p>文本 4</p>

然后设置对 flexslider 的调用

基本上两个滑块都由同一组导航链接控制.认为这应该会让你朝着正确的方向前进，但如果你需要解释任何事情，请大声喊出来.

I am using Flex slider for one project. I need to control two sliders on one page with same controls.

One part is main slider that will show images, and the second one is text (in this case it will be taken from "the_excerpt" in WP ).

Basically, this is the code I am using to call two slides on one page:

  $(window).load(function() {
    $('#main-slider').flexslider({
      animation: 'slide',
      controlsContainer: '.flex-container'
    });

    $('#secondary-slider').flexslider();
  });

Now, I need to "connect" both of them to same controls, so when I click on arrow, it will slide/fade both of them.

解决方案

You could accomplish what you're trying to do by ditching the controlsContainer setting and creating your own navigation that you then link to both sliders. Here's an idea of how (please note it's untested)

Your markup would look something like this. Note the rel attribute on the links - we'll use them below. Also note that the values start from 0 - this matches the values for the slides (e.g. the first slide is 0, the second is 1 etc).

<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>

Then you set up the call to 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",
    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);
            }
        });
    }

});

});
</script>

Basically both sliders are controlled by the same set of navigation links. Think this should get you moving in the right direction but shout if you need anything explained.

这篇关于Flex Slider - 如何为两个滑块添加相同的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！