Ошибки пейджера плагина jQuery Cycle

Я пытаюсь ввести один вход jquery Cycle для управления 4 разными циклами на веб-сайте. Все они имеют разные теги идентификаторов, однако блок управления пейджером появляется 4 раза. Вот мой jquery:

$('#homeslide, #hairslide, #panamaslide, #chawtonsslide') 
.cycle({ 
fx: 'fade', 
speed: '1000', 
timeout: '8000', 
next: '#next',
prev: '#prev',
cleartypeNoBg: 'true',
pager: '#controls'
});

HTML:

<div id="banner-container">
    <div id="prev"></div>
    <div id="next"></div>
    <div id="controls"></div>
    <div id="homeslide">
        <img src="template/banner1.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="hairslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="panamaslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="chawtonsslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
</div>

введите описание изображения здесь

Он работает, кроме отображения 4-х дивов на пейджер. Я собирался попробовать подсчитать $ .each, но, поскольку им всем нужны идентификаторы, я не думаю, что смогу это сделать. Стоит отметить, что этими различными блоками изображений управляет наша CMS, и только определенные из них отображаются на странице. Пример: home.htm показывает только #homeslide

Спасибо, парни


plugins jquery cycle
person Andy Holmes    schedule 04.02.2013    source источник
comment
К сожалению, это для клиента на работе, и я не могу опубликовать ссылку. Я попробую взять код и выложить его, 2 секунды   -  person Andy Holmes    schedule 04.02.2013
comment
добавил столько, сколько мог   -  person Andy Holmes    schedule 04.02.2013
comment
Значит, вам нужен только 1 пейджер для всех? или нет управления пейджером?   -  person IanO.S.    schedule 04.02.2013
comment
только один элемент управления пейджером, как вы можете видеть, их 4 ха-ха.   -  person Andy Holmes    schedule 04.02.2013
comment
Итак, есть 4 страницы, каждая из которых отображает другой цикл div? а вы хотите на каждой странице ровно один цикл и ровно один пейджер?   -  person Dawid Dziadkiewicz    schedule 05.02.2013
comment
да, у меня есть правильное слайд-шоу, просто он продолжает добавлять все пейджеры в один, вместо того, чтобы использовать один пейджер и добавлять нужное количество тегов ‹a› на основе текущего слайд-шоу, добавляя их все   -  person Andy Holmes    schedule 05.02.2013

Ответы (2)


arrow_upward
0
arrow_downward

Почему бы вам не использовать функцию .each () для динамического добавления элементов управления пейджером в каждый цикл.

$.each( $('#homeslide, #hairslide, #panamaslide, #chawtonsslide'), function(i, e){
    $(e).before('<div id="nav' + i + '">').cycle({
        // other options here
        pager:  '#nav' + i
    });
});
person Dawid Dziadkiewicz    schedule 04.02.2013
comment
Это тоже просто все ломает. Он убивает весь код jquery. Есть идеи, почему? - person Andy Holmes; 04.02.2013

arrow_upward
0
arrow_downward

Как насчет добавления класса слайд-шоу к каждому слайд-шоу, а не вызова каждого лайка на основе класса, чтобы вы могли сохранить свой идентификатор

http://www.malsup.com/jquery/cycle/pager-double.html

person IanO.S.    schedule 04.02.2013
comment
Пробовал, он просто все ломает :( Я думаю, это потому, что у div есть идентификатор и класс вместе. Это не имеет смысла, но мне нужны оба lol - person Andy Holmes; 04.02.2013
comment
Кроме того, в некоторых из них содержится разное количество изображений, поэтому точки внизу будут разными на каждой странице. Я весьма озадачен - person Andy Holmes; 04.02.2013