change group of images in jQuery slideshow

Question

I have slideshow and 3 list of slides at the bottom as links.

I load the slideshow with the default group and want to change the group by clicking on appropriate group.

Javascript

$(function() {
    var html = new Array(); //this array contains slides

    /* Loading slideshow */
    $('#get-slide').append(html[0]).slidesjs();        

    /* Changing slides group and loading the slideshow */
    $('.slides').click(function() {
        var id = $(this).data('id');
        $('#get-slide').empty().append(html[id]).slidesjs();

    }) 
});

HTML

<div id="get-slide"> 
</div>
<ul>
    <li><span class="slides" data-id="0">List of slides 1</span></li>
    <li><span class="slides" data-id="1">List of slides 2</span></li>
    <li><span class="slides" data-id="2">List of slides 3</span></li>
</ul>

but when i click the slideshow effect disappears, and I have only that list. What is wrong?

Answer 1

You would try this out. In your HTML, you could put all your slides at once and avoid loading it with javascript:

<div class="container">
 <div class="slides" id="slide1">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
 </div>
</div>

<div class="container">
 <div class="slides" id="slide2">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
 </div>
</div>

<ul>
    <li><span class="slides" data-id="0">List of slides 1</span></li>
    <li><span class="slides" data-id="1">List of slides 2</span></li>
    <li><span class="slides" data-id="2">List of slides 3</span></li>
</ul>

Your javascript

    $.each($('.container'), function( index, value ){
        var slide= $($(this).children('.slides')[0]);
        slide.slidesjs({
            width: 940,
            height: 528
        });
    });

    $('span.slides').click(function() {
        var id = $(this).data('id');
        $('.container').hide();
        $($('.container')[id]).show();
    });

Some CSS

div[class*='container'] {
  display:none;
}

Does it help you?