jquery隐藏/显示内容切换器内的多个FlexSliders。

Question

我有一个jquery内容切换器，在单击适当的链接时显示/隐藏div。 每个Div中都有一个FlexSlider。 第一个弹性滑块工作得很好，但是当您单击链接以显示不同的Div时，弹性滑块会混乱，它会同时显示所有3个幻灯片。 如果您散焦并重新聚焦浏览器窗口（单击桌面以使窗口散焦，然后在窗口中单击返回以重新聚焦），则柔性滑块可以正常工作。 解释这是一个问题，最好是在行动中看到它。 该网站是： http ： //www.benhenschel.com

“Web”是第一个工作正常的Slider，但如果你单击“Mobile”，第二个Flex Slider会出现，你可以看到它一次显示所有3个幻灯片。 如果您对浏览器窗口进行散焦和重新对焦，则可以正确显示弹性滑块。

以下是内容切换器和Flex Slider的代码

<!--Hide/Show-->
    <script type="text/javascript" charset="utf-8">
        $(function(){

function contentSwitcher(settings){
    var settings = {
       contentClass : '.workContent',
       navigationId : '#navigation'
    };

    //Hide all of the content except the first one on the nav
    $(settings.contentClass).not(':first').hide();
    $(settings.navigationId).find('li:first').addClass('active');

    //onClick set the active state, 
    //hide the content panels and show the correct one
    $(settings.navigationId).find('a').click(function(e){
        var contentToShow = $(this).attr('href');
        contentToShow = $(contentToShow);

        //dissable normal link behaviour
        e.preventDefault();

        //set the proper active class for active state css
        $(settings.navigationId).find('li').removeClass('active');
        $(this).parent('li').addClass('active');

        //hide the old content and show the new
        $(settings.contentClass).hide();
        contentToShow.show();

    });
}
contentSwitcher();
});

    </script>

    <!--Flex Slider-->
    <script type="text/javascript" charset="utf-8">
    $(window).load(function() {
    $('.flexslider').flexslider();
    });
    </script>

这是HTML

                <!-- Web -->
                <div id="webContainer" class="workContent flexslider">
                    <h3>Web</h3>
                    <ul class="slides">
                        <!-- Slide 1 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/urbanSurvivorWeb.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Urban Survivor</h4>
                                <p>
                                    The goal of this project, was to create a teaser page for a iPhone app called Urban Survivor. This simple one page site was designed to introduce the app, and generate interest. By providing a email sign up that interest can be measured.
                                    <br /><br />
                                    <a href="http://www.urbansurvivorapp.com">Visit Site</a> 
                                </p>
                            </div>
                        </li>

                        <!-- Slide 2 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/taykey.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Taykey</h4>
                                <p>
                                    I was tasked with redesigning Taykey's website, the goal was to better communicate what Taykey had to offer, and how Taykey works. Additionally, provide general information about the company, jobs available as well as contact information for the various offices. The redesign also aimed at brining a more concise visual brand across other Taykey marketing material.                               
                                    <br /><br />
                                    <a href="http://www.taykey.com">Visit Site</a> 
                                </p>
                            </div>
                        </li>

                        <!-- Slide 3 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/ireland.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>I'm Off To Ireland</h4>
                                <p>
                                    This was a personal website I created so I could share my experiences while studying abroad in Waterford, Ireland.                              
                                    <br /><br />
                                    <a href="http://www.imofftoireland.com">Visit Site</a> 
                                </p>
                            </div>

                        </li>

                    </ul>
                </div>
                <!-- END Web -->

                <!-- Mobile -->
                <div id="mobileContainer" class="workContent flexslider">

                    <h3>Mobile</h3>
                    <ul class="slides">

                        <!-- Slide 1 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/urbanSurvivor/app.png" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Urban Survivor iPhone App</h4>
                                <p>
                                    Urban Survivor alerts the user when they have physically entered an area with a high crime rating. Additionally, the user will be able to check the threat level of their current physical location and see a broader view of their surroundings through the use of a heat map. Both the threat meter and the heat map use a simple, color-coded visual cue (green = low, yellow = neutral, red = high). Finally, there is a panic button dials 911 when pressed.                                
                                </p>
                            </div>
                        </li>

                        <!-- Slide 2 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/urbanSurvivor/wireframe.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Urban Survivor App: Wireframe</h4>
                                <p>
                                    A major requirement for this app was a super simple navigation. After several iterations we landed on having two buttons in the top left and right hand corner of the screen that, when taped, would swipe left/right reveling the content of the new screen. As an alternate to this navigation, the user would swipe left or right with their fingers to also revel the content.                                   
                                </p>
                            </div>
                        </li>

                        <!-- Slide 3 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/urbanSurvivor/workflow.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Urban Survivor App: User Workflow</h4>
                                <p>
                                    This flowchart shows the entire user workflow, and how the user could interact with the app.                                 
                                </p>
                            </div>
                        </li>
                    </ul>

                </div>
                <!-- END Mobile -->

我真的不太了解jQuery，所以任何帮助都将非常感激。

Answer 1

好吧，在尝试了不同的标签系统和自制的jquery解决方案后，我以一种不同且极其简单的方式解决了同样的问题！

您只需创建第一张幻灯片，其中包含5张幻灯片，并在每张幻灯片中放置另一张幻灯片。 将controlNav设置为true并使用导航html结构设置manualControls。

这是我的设置：

//first slideshow
  $('.flexslider_cont').flexslider({
    animation: "slide",
    slideshow: 0,
    useCSS: true,
    controlNav: true,
    selector: ".slides_l1 > .slide_l1",
    manualControls: "#navorizzontale li", //navigation structure
    directionNav: false,

  });     

        $('.flexslider2a').flexslider({
          animation: "slide",
          slideshow: 0,
          useCSS: true,
          controlNav: false,
          directionNav: true,
        });

        $('.flexslider2b').flexslider({
          animation: "slide",
          slideshow: 0,
          useCSS: true,
          controlNav: false,
          directionNav: true
        });

      $('.flexslider2c').flexslider({
          animation: "slide",
          slideshow: 0,
          useCSS: true,
          controlNav: false,
          directionNav: true
        });

        $('.flexslider2d').flexslider({
          animation: "slide",
          slideshow: 0,
          useCSS: true,
          controlNav: false,
          directionNav: true
        });