jquery - 每个 jQuery Accordion 面板中的图像 slider

Question

因此，我需要在每个 jQuery Accordion 面板中放置一个图像 slider 。到目前为止，我已经尝试过 bxSlider 和 Unslider。 BxSlider 仅适用于第一个面板，如果我切换面板则停止工作。 Unslider 崩溃并且不显示某些图片。

也许你们中有人做过类似的事情？任何帮助表示赞赏!

我的 fiddle使用 Unslider 代码!

我的部分代码:

<div class="accordion">
    <h3>Title 1</h3>
    <div>
        some content
        <ul class="slider">
            <li><img src="img1.jpg"></li>
            <li><img src="img2.jpg"></li>
            <li><img src="img3.jpg"></li>
            <li><img src="img4.jpg"></li>
            <li><img src="img5.jpg"></li>
        </ul>
    </div>
    <h3>Title 2</h3>
    <div>
        some content
        <ul class="slider">
            <li><img src="img1.jpg"></li>
            <li><img src="img2.jpg"></li>
            <li><img src="img3.jpg"></li>
            <li><img src="img4.jpg"></li>
            <li><img src="img5.jpg"></li>
        </ul>
    </div>
</div>

Answer 1

检查遗嘱是否适合您。

Fiddle

        <p>You are here: <span id="here"></span></p>
    <div id="accordion">
        <h3>Zero</h3>
        <div class="accord">
            <div class="panel a">0</div>
            <div id="a">
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="a1"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="a2"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="a3"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="a4"></div>
            </div>
            <ul class="control" data-show="a">
                <li><a class="b">back</a></li>
                <li><a class="f">fwd</a></li>
            </ul>
        </div>
        <h3>One</h3>
        <div class="accord">
            <div class="panel b">0</div>
            <div id="b">
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="a1"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="a2"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="a3"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="a4"></div>
            </div>
            <ul class="control" data-show="b">
                <li><a class="b">back</a></li>
                <li><a class="f">fwd</a></li>
            </ul>
        </div>
        <h3>Two</h3>
        <div class="accord">
            <div class="panel c">0</div>
            <div id="c">
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="a1"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="a2"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="a3"></div>
                <div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="a4"></div>
            </div>
            <ul class="control" data-show="c">
                <li><a class="b">back</a></li>
                <li><a class="f">fwd</a></li>
            </ul>
        </div>
    </div>