Проблема с несколькими JQuery слайд-шоу - PullRequest
Новая
       15

Проблема с несколькими JQuery слайд-шоу

0 голосов
/ 20 июля 2010

По сути, я настраиваю страницу с несколькими слайд-шоу, используя плагин jQuery Cycle. Каждое слайд-шоу («. Слайд-шоу») имеет собственную навигацию в виде пейджера («. Control»). Однако каждый раз, когда я нажимаю на значок пейджера, все слайд-шоу на странице исчезают до следующего слайда. Как я могу предотвратить это, чтобы только рассматриваемое слайд-шоу имело транзистор. Я думал, что мой код ниже будет работать, но это не так, и как мне показать, какой значок пейджера выбран?

Мой код указан ниже: 

$(document).ready(function(){
$('.slideshow').each(function(){
var $this = $(this), $ss = $this.closest('.slideshow');
var pager = $ss.find('.controls');

$this.cycle({
fx:     'fade',
speed:  'slow',
timeout: 5000,
pager:  pager,
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.controls li:eq(' + (idx) + ') a';
}
}); 

});
});

HTML выглядит так, но с кратными на странице: 

<div class="slider">
<div class="slideshow">
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a>
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a>
 <a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a>
  <a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a>
</div>
    </div>
     <!--/slider-->
    <ul class="controls">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
     </ul>

1 Ответ

0 голосов
/ 21 июля 2010

Эта часть кажется странной: 

$('.slideshow').each(function(){
  var $this = $(this), $ss = $this.closest('.slideshow');
  var pager = $ss.find('.controls');

Попробуйте 

$('.slideshow').each(function(){
var $this = $(this);
var pager = $this.find('.controls');

У вас уже есть ссылка на элемент .slideshow, который соответствует $ this, поэтому вы не можетеneed ss.

Если это не сработает, пожалуйста, опубликуйте фрагмент своего HTML или, что еще лучше, настройте тест на http://jsfiddle.net и свяжите его здесь.

...