Question

所以，我需要在每个jQuery手风琴面板中放置一个图像滑块。到目前为止，我已经尝试过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>

每个jQuery手风琴面板中的图像滑块

1 个答案: