Jump to content

skrollr conflicts bx slider custom pager?


Recommended Posts

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!! :)

Link to comment
Share on other sites

Hey justsomeguy! thanks for the response,


I cant make it work on a standalone right now, but I used to make it work earlier, maybe im doing something wrong...


It does have a javascript error in the console that i hadn't before, what am i missing?

Uncaught ReferenceError: javascript is not defined    at <anonymous>:2:1    at Object.InjectedScript._evaluateOn (<anonymous>:895:140)    at Object.InjectedScript._evaluateAndWrap (<anonymous>:828:34)    at Object.InjectedScript.evaluate (<anonymous>:694:21)(anonymous function) @ VM253:2InjectedScript._evaluateOn @ VM73:895InjectedScript._evaluateAndWrap @ VM73:828InjectedScript.evaluate @ VM73:694

for the record, I have properly linked jquery and works in other parts of the site...



I have uploaded the site im working on so you can see yourself my problems: http://restaurantemardepedregalejo.com/prueba/#home


As you can see, jquery is working on the entire page, and there are two slides at home section.


But, if you go to "CURSOS" section: http://restaurantemardepedregalejo.com/prueba/#cursos


you will see a bunch of unstyled links. Those are the links from the slider that isnt working...


if you click on "next" and "previous" buttons will actualy work but if you click on the others will take you to index.html. and Thats the problem.



Thank you!!

Edited by nachosen
Link to comment
Share on other sites

You are using multiple jquery versions, this could be the problem, try reducing to one version only to see if latest jquery version works with all jquery code features, if not! you will have to use .noConflict() so you can change '$' prefix to another such as jQuery.noConflict(); so '$'(.....) will now become jQuery(....) so specific features that use a different version do not conflict with another.

Link to comment
Share on other sites

Thanks for your answer dsonesuk,


like you recommended I am using now only one version of jquery, but still doesn't work. I am starting to think the problem is I have one slider inside of another, and then the conflict happens inside.


I think I have not enough knowledge of jquery to fix this properly myself, so I think I will work arround with html and css instead. it will be easier for me.


Nevertheless, if someone happens to have the same problem and a solution I will be happy to hear It, If only to learn more.


Thank you everyone!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...