Более одного слайд-шоу на одной странице с помощью jQuery

Question

Возможно ли создать более одного слайд-шоу (каждое слайд-шоу с различным набором изображений, конечно) на одной и той же веб-странице, используя jQuery (или какой-либо подобный пакет)? Если да, то как?

Все попытки пока не сработали, поскольку все изображения были либо показаны в обоих слайд-шоу, нумерация была неправильной, либо возникли другие эффекты интерференции.

Answer 1

Да, это возможно.

я имел хорошие результаты, используя код Coda Slider здесь: http://www.ndoherty.biz/demos/coda-slider/2.0/

Код будет выглядеть примерно так, где панель является одним из элементов в вашем слайдера:

<div class="slider-wrap"> 
    <div id="slider1" class="csw"> 
    <div class="panelContainer">     
     <div class="panel" title="Panel 1"> 

Вы также можете сделать их самостоятельно, используя соответствующие CSS, JS и jQuery с плагинами, такими как http://gsgd.co.uk/sandbox/jquery/easing/, чтобы помочь создать плавные анимации.

Answer 2

да, я использовал плагин цикла на: http://malsup.com/jquery/cycle/

Я вложен каждый из моих IMG в двух дивы и двух дивы, чтобы обернуть вещи ...

<div id="before_window_wrapper"> 
    <div name="before_n_after_window"> 

    <div id="before_slide_wrapper"> 
     <div id="before_slide"> 
     <img src"my/image/directory/1.img"/> 
     </div> 
    <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
    </div> 

    </div> 
</div> 

<div id="before_slide_wrapper"> 
    <div id="before_slide"> 
    <img src"my/image/directory/3.img"/> 
    </div> 
    <div id="slide_comment"> 
    <h3>person comment for this img goes here</h3> 
    </div> 
</div> 

и :

<div id="after_window_wrapper"> 
    <div name="before_n_after_window"> 

     <div id="after_slide_wrapper"> 
     <div id="after_slide"> 
      <img src"my/image/directory/2.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    <div id="after_slide_wrapper"> 
     <div id="after_slide"> 
     <img src"my/image/directory/4.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    </div> 
</div> 

дети "before_n_after_window" - это th е дивы, что в настоящее время закрывались:

$("#before_n_after_window").each(function(index){ 
    $(this).cycle(); 
}); 

Скользящие оберток (before_slide_wrapper и after_slide_wrapper) находятся в стадии цикла() 'ы полный контроль -fine. Тем не менее, любая вещь, вложенная внутри нее, отсутствует, поэтому вы можете разместить больше братьев и сестер для слайдов (before_slide и after_slide) - следовательно, div #slide_comment.

«before_n_after_window» находится только под полуконтролем цикла() и использует ваш код css, который не конфликтует с его собственным. «#before_window_wrapper» и «#after_window_wrapper» находятся под полным контролем (css-wise).

Теперь, когда у вас есть «#before_n_after_window» и его дети, просто итерацию через них и имя и указать элементы управления для каждой пары:

var i = index; 
var current_slide = $(this); 

// hides the pause button 
$('#pause_button_'+i).hide(); 
//checks index for odd or even 
i = (i%=2) ? ((index+1)/2) : ((index/2)+1); 

$(current_slide).cycle({ 
    fx: 'fade', 
    pager: '#nav_' + i, 
    prev:  '#previous_button_' + i, 
    next:  '#next_button_' + i, 
}); 

// I want to only show the play or pause button at any given time 
$(current_slide).cycle('pause'); 
$('#play_button_'+i).click(function(){ 
    $(current_slide).cycle('resume', true); 
    $('#pause_button_'+i).show(); 
    $('#play_button_'+i).hide(); 
}); 
$('#pause_button_'+i).click(function() { 
    $(current_slide).cycle('pause'); 
    $('#pause_button_'+i).hide(); 
    $('#play_button_'+i).show(); 
}); 

Вы должны следовать соглашению об именах выше или любой другой, вы можете решить, на. фактические элементы управления можно размещать где угодно, кроме внутренних проблем с ошибками.

На боковой ноте я установил эти пары на паузу сразу после того, как они были задействованы, потому что я не хотел, чтобы на слайде было несколько слайдов. Я хотел, чтобы пользователь выбирал, какой из них нужно циклировать. Кроме того, я должен найти способ отключить любые другие циклы, которые могут работать. Однако:

if(better_solution){ 
    return please_post; 
}