This is my first time asking a question here, I'm quite a noob so don't be mad at me if I mess up a little.
The thing is, I am doin a one page web based on skrollr: https://github.com/Prinzhorn/skrollr
and I use this fantastic slider called BX Slider: http://bxslider.com/
I have already put two of the three sliders i need (those works great). The problem comes when I try to make a custom pager in the third slider using this HTML code BX slider provides me:
<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>
The problem is, when I click one of those pager items it redirects me to index.html not allowing me to interact with the actual slider.
As you may know, Skrollr library use the HTML5 data- attributes to define multiple sets of styles (they call each of them keyframe) and skrollr interpolates between them. In a skrollr basic example...
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
So my guess is... could it be they are in conflict with that data- attribute in both codes?? if so, Why doesn't that bother me when the code is in default bx-slider pager??
How could I fix this? Any Ideas?
Thanks for the help!!