bxslider滑块- jquery中的bxslider滑块

Question

我有一个非常基本的滑块使用basic滑块。

我想在And滑块内运行另一个画廊。

请看这把小提琴：http://jsfiddle.net/CHeLE/6/

，您可以看到，当单击Next/Prev时，二级图片库总是返回相同的图像。为什么？它应该显示其他图像.

这是没有道理的，这是为什么会发生，请看我的代码下面。

$(function () {

    var slider = $('ul#slider').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'horizontal',
        touchEnabled: false,
        pager: false
    });

    $('a.slide-next').click(function () {
        slider.goToNextSlide();
        return false;
    });

    $('a.slide-prev').click(function () {
        slider.goToPrevSlide();
        return false;
    });

});

$(function () {

    var gallery3 = $('#gallery3 ul.gallery').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'fade',
        touchEnabled: false,
        pager: false
    });

    $('#gallery3 a.gallery-next').click(function () {
        gallery3.goToNextSlide();
        return false;
    });

    $('#gallery3 a.gallery-prev').click(function () {
        gallery3.goToPrevSlide();
        return false;
    });

});

这是我的成绩

<div class="wrapper">

    <ul id="slider">

        <li class="slide" style="background:black"></li>

        <li id="gallery3" class="slide" style="background:blue">

            <div class="gallery-wrapper">

                <ul class="gallery">

                    <li>

                        <img src="http://www.columbus-international.com/images/heroes/tour_trackday_tuscany.jpg" alt=""/>
                        <img src="http://www.wikipedy.com/images_m/motorbike_kids_s.jpg" alt=""/>

                        <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt=""/>


                    </li> 

                </ul>

            </div>

            <a class="gallery-next" href="#">Gallery Next</a>
            <a class="gallery-prev" href="#">Gallery Prev</a>

        </li>

        <li class="slide" style="background:cyan"></li>
        <li class="slide" style="background:magenta"></li>

    </ul>

</div>

<a class="slide-next" href="#">Next</a>
<a class="slide-prev" href="#">Prev</a>

有人能帮我理解一下为什么我的小提琴不能正常工作吗？

提前谢谢。

http://jsfiddle.net/CHeLE/6/

Answer 1

演示的标记(HTML)有错误：

• 嵌套库<ul class="gallery">只有一个列表项<li>作为唯一的直接子项。根据文件

默认情况下，bxSlider将使用滑块元素的所有直接子元素。

• 每个<img>应该包装在一个列表项标记<li><img src="image.png"/></li>中。
• 或 <li>应该被移除，所以3 <img>将是<ul class="gallery">的直接子代
• 或--如果使用slideSelector: 'img' bxSlider选项，原始标记将工作。
• 原来的图像不起作用，取而代之的是工作图像。

HTML

    <div class="wrapper">
    <ul id="slider">
        <li class="slide" style="background:black"></li>
        <li id="gallery3" class="slide" style="background:blue">
            <div class="gallery-wrapper">
                <ul class="gallery">
                    <li>
                        <img src="http://placehold.it/720x500/000/fff.png&text=SLIDE+1"/>
                    </li>
                    <li>
                        <img src="http://placehold.it/720x500/00e/fc0.png&text=SLIDE+2"/>
                    </li>
                    <li>
                        <img src="http://placehold.it/720x500/fff/000.png&text=SLIDE+3"/>
                    </li>
                </ul>
            </div> 
            <a class="gallery-next" href="#">Gallery Next</a>
            <a class="gallery-prev" href="#">Gallery Prev</a>

        </li>
        <li class="slide" style="background:cyan"></li>
        <li class="slide" style="background:magenta"></li>
    </ul>
</div>
<a class="gallery-next" href="#">Gallery Next</a>
<a class="gallery-prev" href="#">Gallery Prev</a>

演示的脚本(JS(jQuery))需要改进：

• 嵌套库JS有太多的限定符，如$("#gallery a.gallery-next")作为$("a.gallery-next")的作品。

jQuery

$(function () {    
    var slider = $('ul#slider').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'horizontal',
        touchEnabled: false,
        pager: false
    });

    $('a.slide-next').click(function () {
        slider.goToNextSlide();
        return false;
    });

    $('a.slide-prev').click(function () {
        slider.goToPrevSlide();
        return false;
    });

    var gallery3 = $('ul.gallery').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'fade',
        touchEnabled: false,
        pager: false
    });

    $('a.gallery-next').click(function () {
        gallery3.goToNextSlide();
        return false;
    });

    $('a.gallery-prev').click(function () {
        gallery3.goToPrevSlide();
        return false;
    });

});

见更新的演示