将滑块连接到菜单

Question

我有一个flexslider，我正在尝试连接到我的网站。在网站上我有几个元素的菜单。我想将滑块连接到菜单的第一个元素。有一个淡入/淡出功能，一旦点击第一个元素，滑块就会淡入。现在我尝试了几次连接它，但是一旦我点击菜单的第一个元素（aaaaaaa），我什么也得不到。有什么帮助吗？

网站的Jsfiddle：https://jsfiddle.net/vL7ojznz/ 滑块的Jsfiddle：http://jsfiddle.net/t3sgbq5w/

我的网站有3个分隔符（item11，item22和item33）： HTML：

        <div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1"><button>aaaaaaaa</button></li>
            <li id="item2"><button>bbbbbbb</button></li>
            <li id="item3"><button>ccccccc        </button></li>
            <li id="item4"><button>dddddddd         </button></li>
            <li id="item5"><button>eeeeeee eee.   </button></li>
            <li id="item6"><button>ffffff       </button></li>
            <li id="item7"><button>ggggggg       </button></li>

        </ul>
        </div>


     <div id="container">
<div id="first" class="inner-container">
   <div id="item11" class="item"> <a name="item11"></a>

                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
    <div id="second" class="inner-container">
      <div id="item22" class="item"> <a name="item11"></a>

                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
  <div id="third" class="inner-container">
     <div id="item33" class="item"> <a name="item11"></a>

                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
        </div>

我想只用整个滑块替换item11。请帮帮忙，谢谢..

Answer 1

我认为您的主要问题是，在.flexslider淡出后，您必须初始化#container。

看看这个Fiddle。