2

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

我想在 bxslider 本身内运行另一个画廊。

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

当单击 Gallery 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/

4

1 回答 1

2

演示的标记 (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;
    });

});

查看更新的演示

于 2015-06-24T14:50:06.367 回答