Слайд-шоу с несколькими циклами malsup, управляемые одним пейджером - PullRequest
Новая
       37

Слайд-шоу с несколькими циклами malsup, управляемые одним пейджером

0 голосов
/ 24 февраля 2011

Хорошо, ребята, я вернулся с еще одним сложным вопросом. У меня есть большое слайд-шоу, состоящее из 3 отдельных слайд-шоу Malsup Cycle. Текущий слайд находится впереди, а остальные 2 позади него: левый с начальным слайдом -1 текущего и правый с начальным слайдом +1. Это работает. Когда я нажимаю #next, запускаются все три, и это здорово. Проблема в том, что мне нужно реализовать пейджер, а пейджер управляет только центральным слайд-шоу, а не другим 2.

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

Вот код JS: 

function featuresSlideshow(){

$('ul#main-features-leftbehind').cycle({
startingSlide: 0,
fx: 'scrollLeft',
timeout: 0,
speed:   1000,
easing: 'easeInOutQuart',
pager:  '#main-features-nav',
next: 'ul#main-features-upfront'

});
$('ul#main-features-rightbehind').cycle({
startingSlide: 2,
timeout: 0, 
fx: 'scrollLeft',
speed:   1000,
pager:  '#main-features-nav',
easing: 'easeInOutQuart',
next: 'ul#main-features-upfront'
});
$('ul#main-features-upfront').before('<ul id="main-features-nav"></ul>').cycle({
startingSlide: 1,
timeout: 0, 
fx: 'blindX',
rev: 0,
speed:   1000,
easing: 'easeInOutQuart',
next: 'ul#main-features-upfront',
pager:  '#main-features-nav',
//after: afterUpfrontEvent, 
pagerAnchorBuilder: 
function(idx, slide) { 
    var src = $('img',slide).attr('src'); 
    return '<li><a href="#"><img src="' + src + '" width="50" height="50" /></a></li>'; 
    } 
});
}

А вот и HTML: 

<ul id="main-features-leftbehind">
    <li><div style="background:url('../images/features_MainSlideShow_slide-0.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-1.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-2.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-3.jpg') no-repeat" class="bg"></div></li>
</ul>

<ul id="main-features-rightbehind">
    <li><div style="background:url('../images/features_MainSlideShow_slide-0.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-1.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-2.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-3.jpg') no-repeat" class="bg"></div></li>
</ul>

<ul id="main-features-upfront">
    <li>
    <img src="../images/features_MainSlideShow_slide-0.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
    <li>
    <img src="../images/features_MainSlideShow_slide-1.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>

<li>
    <img src="../images/features_MainSlideShow_slide-2.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
                            <li>
    <img src="../images/features_MainSlideShow_slide-3.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
</ul>

Большое спасибо, ребята, я много читал о том, как выполнять несколько слайд-шоу, даже Malsup создал «двойное» слайд-шоу с помощью пейджера, но я не могу заставить его работать с визуальным пейджером.

1 Ответ

0 голосов
/ 27 мая 2011

Вы должны построить свой собственный пейджер.Вот примерно как я это сделал: 

$('#slides').cycle();
$('#titles').cycle();

$('a.nav-button').click(function(e) { 
  var slide = $('a.nav-button').index(this);
  $('#slides').cycle(slide);
  $('#titles').cycle(slide);
  e.preventDefault();
});

Затем просто выведите свои кнопки навигации вручную (или используя PHP / Ruby / любой другой).

...