bxslider внутри bxslider — jquery

У меня есть действительно простой слайдер, использующий bxslider.

И я хотел бы запустить еще одну галерею в самом bxslider.

См. эту скрипту: http://jsfiddle.net/CHeLE/6/

Вы можете видеть, что вторичная галерея всегда возвращает одно и то же изображение при нажатии кнопки "Следующая/предыдущая" в галерее. Почему? Он должен отображать другие изображения.


Непонятно, почему это происходит, см. мой код ниже.

$(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/


jquery bxslider
person Joshc    schedule 30.01.2013    source источник
comment
этот ответ может помочь: stackoverflow.com/a/12608357/1428241   -  person Barlas Apaydin    schedule 30.01.2013

Ответы (1)


arrow_upward
2
arrow_downward

В разметке демо (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;
    });

});

Посмотреть обновленную демонстрацию

person zer00ne    schedule 24.06.2015