Jquery Cycle - как использовать круг для пейджера? - PullRequest
Новая
       43

Jquery Cycle - как использовать круг для пейджера?

0 голосов
/ 29 сентября 2011

У меня проблема с тем, чтобы заставить мой пейджер выглядеть правильно с циклом jquery. Следующий код 

$(document).ready(function() {
    $('#slider_container')
    .after('<div id="pager">')
    .cycle({
    fx: 'scrollRight',
    speedIn: 400,
    speedOut: 200,
    timeout: 10000,
    pause: 1,
    delay: -4000,
    easeIn:  'easeInCirc',
    sync: false,
    pager: '#pager',
    pagerAnchorBuilder: function(idx, el) {
        return '<li><a href="#"><img src="images/grey_dot.png" width="10" height="10" /></a></li>';
        }
    });
});

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

Я попытался оставить бит img вне pageAnchorBuilder и использовать backgrounf: (url) в CSS, а другой - в .activeSlide, но безрезультатно.

Буду признателен за помощь, спасибо.

1 Ответ

1 голос
/ 29 сентября 2011

Я знаю, что вы сказали, что уже пытались оформить их с помощью CSS, и это не сработало? Но в теории это должно работать. Я думаю, тебе стоит попробовать еще раз.

Пример: 

#pager a{
    display:block;
    background:url(pagerBg.png) no-repeat;
}
#pager a.activeSlide{
    background:url(activePagerBg.png) no-repeat;
}

Это работает на моем локальном хосте. В идеале вы можете использовать конструктор якоря страницы, чтобы скрыть числа: 

pagerAnchorBuilder: function(idx, el) {
    return '<a href="#"></a>';
    }

Надеюсь, это поможет!

EDIT:

Прежде всего. Вот демонстрация того, как это должно работать: http://jsfiddle.net/Lywtt/1/

Теперь вам следует попробовать следующее:

- полностью удалить анкерный строитель

Как только вы удалите anchorbuilder, вы увидите простые ссылки с количеством слайдов, верно? Как "123"


-Следующее, что мы хотим сделать, это стилизовать эти ссылки, поэтому добавьте в ваш css следующее: 

#pager{
    width:200px;
    margin-top:5px;
    border:1px solid blue;
    text-align:center;
}
#pager a{
    display:inline-block;
    width:20px;
    margin-left:5px;
    background:green;
}
#pager a.activeSlide{
    background:yellow;
}

Очевидно, что большинство из приведенных выше стилей только для демонстрационных целей и могут быть удалены, когда все будет работать, как вы хотите.

Это должно работать теоретически, однако, если это все еще не работает, чем связать ваш обновленный сайт (без компоновщика привязок и с новыми стилями), и мы можем проверить это снова.

Редактировать 2:

Рад слышать, что это работает! Теперь использовать изображения вместо зеленых и желтых (для активных слайдов) блоков довольно просто. Давайте снова начнем с демонстрации: http://jsfiddle.net/Lywtt/2/

Что нам нужно сделать, это следующее:

Просто замените CSS следующим образом: 

#pager a{
    display:inline-block;
    width: 20px; /* width of the image */
    height: 20px; /* height of the image */
    margin-right:5px; /* space between the images */
    background:url(pagerBg.png) no-repeat;
}
#pager a:last-child{
    margin-right:0; /* we need no space after the last pager link */
}
#pager a.activeSlide{
    background:url(activePagerBg.png) no-repeat;
}

Как видите, мы просто заменим background:green; и background:yellow; соответствующими изображениями. Конечно, вам придется настроить ссылки изображений в соответствии со структурой вашего сайта.

Теперь вы должны видеть числа с изображениями в качестве фона вместо зеленого и желтого фона.

В качестве последнего шага мы хотим удалить эти цифры. Для этого нам нужно снова вставить простой anchorBuilder в наш скрипт: 

pagerAnchorBuilder: function(idx, el) {
    return '<a href="#" title="Slides"></a>';
    }

Вы видите, что мы вставляем простой anchorBuilder для отображения пустых ссылок (без цифр).

Теперь вы сможете видеть изображения только без цифр.

Если я не сделал опечатку или другую ошибку, теперь все должно работать нормально. Если нет, не стесняйтесь говорить об этом!

Привет! * * 1060

...