Flex Slider - 如何为两个滑块添加相同的控件

Posted

技术标签:

【中文标题】Flex Slider - 如何为两个滑块添加相同的控件【英文标题】:Flex Slider - How to add same controls for two sliders 【发布时间】:2012-04-27 15:22:04 【问题描述】:

我在一个项目中使用Flex slider。我需要用相同的控件控制一个页面上的两个滑块。

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

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

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

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

现在,我需要将它们“连接”到相同的控件,所以当我单击箭头时,它们都会滑动/淡出。

【问题讨论】:

【参考方案1】:

您可以通过放弃 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",
    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>

基本上,两个滑块都由同一组导航链接控制。认为这应该可以让您朝着正确的方向前进,但如果您需要任何解释,请大声喊叫。

【讨论】:

如何放同方向导航?【参考方案2】:

对于 Flexslider 2,您可以使用 sync: "selector" 选项。只需设置其中一个滑块的controlNav: false

$(window).load(function() 
    $('#main-slider').flexslider(
        animation: 'slide',
        controlNav: true,
        sync: '#secondary-slider'
    );

    $('#secondary-slider').flexslider(
        controlNav: false
    );
);

【讨论】:

【参考方案3】:

所以,我遇到了同样的问题,这可能是一个真正的拖累......但我已经找到了一个简单易行的快速解决方案。这将适用于父母 flexslider 控制的 1 个孩子或 100 个孩子。适用于所有动作。希望我能说服他们解决这个问题并允许一个 jquery 对象数组用于同步方法。

<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 class="flexslider_children">
  <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>
</div>

<div class="flexslider_children">
  <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>
</div>

然后为你的 javascript 运行这个。

/** 
* Create the children flexsliders. Must be array of jquery objects with the
* flexslider data. Easiest way is to place selector group in a var.
*/
var children_slides = $('.flexslider_children').flexslider(
  'slideshow': false, // Remove the animations
  'controlNav' : false // Remove the controls
); 

/** 
* Set up the main flexslider
*/
$('.flexslider').flexslider(
  'pauseOnHover' : true,
  'animationSpeed': 2000,
  'slideshowSpeed': 5000,
  'initDelay': 3000,
  // Call the update_children_slides which itterates through all children slides 
  'before' : function(slider) // Hijack the flexslider
    update_children_slides(slider.animatingTo);
     
); 

/** 
* Method that updates children slides
* fortunately, since all the children are not animating,
* they will only update if the main flexslider updates. 
*/
function update_children_slides (slide_number)
  // Iterate through the children slides but not past the max
  for (i=0;i<children_slides.length;i++) 
    // Run the animate method on the child slide
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number);
     

希望这会有所帮助!!请注意我添加了这个因为它与我试图做的非常相似,似乎我不是唯一一个希望在 flexslider 中使用多个同步的人。

【讨论】:

【参考方案4】:

我想确认 MrBandersnatch 的解决方案有效。我将在下面发布我对他的代码所做的修改,以展示他工作的变体。

/** 
* Create the children flexsliders. Must be array of jquery objects with the
* flexslider data. Easiest way is to place selector group in a var.
*/
var children_slides = $('.flexslider_children').flexslider(
    slideshow: false, // Remove the animations
    controlNav : false, // Remove the controls
    animationSpeed: 1200,
    itemWidth: 175,
    itemMargin: 20,
    animation: 'linear',
    easing: 'swing',
    animationLoop: false,
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize()
); 


/** 
* Set up the main flexslider
*/
$('#flexslider_index_band_1').flexslider(
    pauseOnHover : true,
    animationSpeed: 1200,
    slideshow: false,
    initDelay: 3000,
    directionNav: true,
    animation: 'linear',
    easing: 'swing',
    animationLoop: false,
    controlsContainer: '.paginated_nav',
    directionNav: true,
    prevText: '',
    nextText: '',
    itemWidth: 175,
    itemMargin: 20,
    sync: '#flexslider_index_band_2',
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize(), // use function to pull in initial value
    // Call the update_children_slides which itterates through all children slides 
    before : function(slider) // Hijack the flexslider
        update_children_slides(slider.animatingTo);
       
); 

/** 
* Method that updates children slides
* fortunately, since all the children are not animating,
* they will only update if the main flexslider updates. 
*/
function update_children_slides (slide_number)
    // Iterate through the children slides but not past the max
    for (i=0;i<children_slides.length;i++) 
    // Run the animate method on the child slide
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number);
       

);

【讨论】:

【参考方案5】:

我找到的一个解决方案是创建您自己的自定义横幅导航。放置它并根据您的喜好设置样式。唯一重要的是有一种针对它的方法。在此示例中,我使用了 ID 为 slider-nextslider-prev

<ul>
  <li><a id="slider-next" href="#">Next</a></li>
  <li><a id="slider-prev" href="#">Prev</a></li>
</ul>

现在,创建两个 flexer 滑块并将它们放置在您想要的 css 中。我将标题我的主要横幅 .flexslider 和我的标题 .captions。

<div class="flexslider">
  <ul class="slides">
    <li><img src="/assets/images/banner-example.png"  ></li>
    <li><img src="/assets/images/banner-example-2.png"   /></li>
    <li><img src="/assets/images/banner-example-3.png"   /></li>
    <li><img src="/assets/images/banner-example-4.png"   /></li>
  </ul>
</div>
<!-- Some other place in the code -->
<div class="captions">
  <ul id="info" class="slides">
    <li>
      <h2>Example Banner 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
  </ul>
</div>

现在让简单的魔法让它发挥作用。激活 javascript 文件中的两张幻灯片,并在 css 中隐藏横幅和标题的导航控件。这样,您的自定义导航将是唯一可见的控件。然后,只需创建一个函数即可在单击时触发滑块和标题的控制导航。下面的例子。 .trigger jQuery 函数就是这里的魔法。在此处查看其文档:http://api.jquery.com/trigger/

//Load slider after .ready()
$(window).load(function()

    //Activate Both Banner and Caption slides
    $('.flexslider').flexslider(
        controlNav: false,
    );

    $('.captions').flexslider(
        controlNav: false,
    );

    //Sink Control Navs
    $('#slider-next').click(function()
        $('.flexslider .flex-next').trigger('click');
        $('.captions .flex-next').trigger('click');
    );

    $('#slider-prev').click(function()
        $('.flexslider .flex-prev').trigger('click');
        $('.captions .flex-prev').trigger('click');
    )
);

【讨论】:

以上是关于Flex Slider - 如何为两个滑块添加相同的控件的主要内容,如果未能解决你的问题,请参考以下文章

Slick Slider:构建比较滑块

如何为 flex: 0 0 25% 的 flex 项目添加 1px 边距?

如何为滑块(sliderInput)着色?

无法创建小滑块的多个实例

Flex Slider 不适用于手机

Flex 4:具有滑块和文本框组合