skrollr конфликтует с пользовательским пейджером слайдера bx?

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

Дело в том, что я делаю одностраничную сеть на основе skrollr: https://github.com/Prinzhorn/skrollr< /а>

и я использую этот фантастический слайдер под названием BX Slider: http://bxslider.com/

Я уже поставил два из трех необходимых мне ползунков (они отлично работают). Проблема возникает, когда я пытаюсь создать собственный пейджер в третьем слайдере, используя этот HTML-код, который слайдер BX предоставляет мне:

<ul class="bxslider">
  <li><img src="/images/730_200/tree_root.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>
  <li><img src="/images/730_200/hill_fence.jpg" /></li>
</ul>

<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="/images/thumbs/tree_root.jpg" /></a>
  <a data-slide-index="1" href=""><img src="/images/thumbs/houses.jpg" /></a>
  <a data-slide-index="2" href=""><img src="/images/thumbs/hill_fence.jpg" /></a>
</div>

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

Как вы, возможно, знаете, библиотека Skrollr использует атрибуты HTML5 data- для определения нескольких наборов стилей (каждый из них называется ключевым кадром), и skrollr выполняет интерполяцию между ними. В базовом примере скроллра...

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">
WOOOT
</div>

Итак, я предполагаю... может быть, они конфликтуют с этим атрибутом данных в обоих кодах?? если да, то почему меня это не беспокоит, когда код находится в пейджере bx-slider по умолчанию ??

Как я могу это исправить? Есть идеи?

Спасибо за помощь!! :)


html jquery skrollr pager bxslider
person Nacho Fernández    schedule 31.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

HTML нужно только:

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Вы должны инициализировать структуру, вызвать .bxslider() на

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Затем вы можете попробовать изменить стили css, чтобы улучшить внешний вид:

.bx-pager-link{
    width: 30px;
    height: 30px;
    background-image: url('/images/pic1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 100%;
    border-radius: 0;
}
person dgomez    schedule 02.06.2015
comment
Спасибо за ваш ответ, dgomez, у меня уже так работает на моем сайте, проблема возникает, когда я хочу использовать пользовательский пейджер с миниатюрами, тогда мне нужно использовать вторую часть кода, но по какой-то причине это не работает. и я думаю, что проблема в конфликте с другим jquery, который я использую на сайте. - person Nacho Fernández; 03.06.2015