Woothemes Flexslider-在另一个flexslider中的一个独特的flexslider-是否可行?

问题描述

我正在使用Woothemes的最新flexslider，并且尝试将一个flexslider插入另一个.像这样:

I am using the newest flexslider from Woothemes, and I am trying to init one flexslider inside another. Like this:

function initFrontpageSliders() {

    $('#flexsliderFrontpage01').flexslider({
        animation: "slide",
        animationLoop: false,
        pauseOnHover: true,

        start: function(slider) {

            //Fires when the slider loads the first slide
            $('#flexsliderFrontpage02').flexslider({
                animation: "fade",
                directionNav: false,
                animationLoop: false,
                pauseOnHover: true  
            });


        }   
    });
}       

但是当我调用脚本时，是在flexsliderFrontpage01下而不是在幻灯片(列表元素)内部生成flexsliderFrontpage02 ul-像这样:

but when I call the script, is generates flexsliderFrontpage02 ul below flexsliderFrontpage01 and not inside the slide (list element) - like this:

<div id="flexsliderFrontpage01" class="flexslider">
    <div class="flex-viewport">

      <ul class="slides">
        <li>
          <div class="row">
             <div id="flexsliderFrontpage02" class="flexslider"> SLIDES SHOULD BE HERE </div>
          </div>
        </li>
        <li>
          <div class="row">slide 2</div>
        </li>  
      </ul>  

      <ul class="slides">
        <li><div class="row">fade 1</div></li>
        <li><div class="row">fade 2</div></li>
        <li><div class="row">fade 3</div></li>  
      </ul> 
   </div>

   <ol class="flex-control-nav flex-control-paging">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
   </ol>

   <ul class="flex-direction-nav"> </ul>
</div>

你们是否知道是否可以轻松解决flexslider.js或我做错了什么? :-)

Do any of you know if theres an easy fix to flexslider.js or am I doing something wrong ? :-)

我的HTML看起来像这样:

my HTML looks like this:

<div class="flexslider" id="flexsliderFrontpage01">
<ul class="slides">
    <li>
        <div class="row">
            <div class="flexslider" id="flexsliderFrontpage02">
                <ul class="slides">
                    <li><div class="row">fade div 1</div></li>          
                    <li><div class="row">fade div 2</div></li>
                    <li><div class="row">fade div 3</div></li>      
                </ul>
            </div>
        </div>
    </li>


    <li>
        <div class="row">   
            <h1>This is slide 2</h1>
        </div>
    </li>

</ul>           
</div> 

我已通过使用以下示例此处:

I have solved it by using this example here:

Flexslider.js update
slider.container = $(slider.containerSelector, slider).first(); //added .first()
selector: ".slides:first > li", //added :first

也许这可以帮助其他人:-)

Maybe this can help someone else :-)

推荐答案

我只是将默认选择器从".slides > li"更改为".slides:first > li"，如下所示:

I just change the default selector from ".slides > li" to ".slides:first > li"like this:

$(selector).flexslider({
  selector: '.slides:first > li',
  ...
});

它就像一个咒语，我们甚至不需要更改核心js文件.感谢您问题讨论.

It works like a charm, we don't even need to change the core js file. Thanks for the issue dicussion.

这篇关于Woothemes Flexslider-在另一个flexslider中的一个独特的flexslider-是否可行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！