Jump to content
nachosen

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

Share this post


Link to post
Share on other sites

Are there any Javascript errors in the browser's console? If you try the slider code on a standalone page does it work without the other stuff?

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...