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

Question

Это мой первый вопрос, задающий вопрос здесь, я совершенно нуб, поэтому не сердитесь на меня, если я немного испортил.

Дело в том, я делаю одну страницы веб на основе 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> 

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

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

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

Answer 1

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; 
}