bxslider within a bxslider - jquery

Question

I have a really basic slider using bxslider.

And I would like run another gallery within the bxslider itself.

Please see this fiddle: http://jsfiddle.net/CHeLE/6/

You can see the secondary gallery always returns the same image when the Gallery Next/Prev is clicked. Why? It should display other images.

It does not make sense why this is happening, please see my code below..

$(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;
    });

});

And this is my mark up

<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>

Can anyone please help me understand why my fiddle is not working properly?

Thanks in advance.

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

Answer 1

The demo's markup (HTML) had errors:

• The nested gallery <ul class="gallery"> had only one list item <li> as the only immediate child. According to the documentation

by default, bxSlider will use all immediate children of the slider element

• Each <img> should be wrapped in a list item tag <li><img src="image.png"/></li>
• or the <li> should be removed so the 3 <img> would be the immediate children of <ul class="gallery">
• or the original markup would work if you use slideSelector: 'img' bxSlider option.
• The original images were not working, they're replaced by working ones.

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>

The demo's script (JS(jQuery)) needed refining:

• The nested gallery JS had too many qualifiers like $("#gallery a.gallery-next") works as $("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;
    });

});

See updated demo