Seem to have javascript conflict with Anything Slider

[Laughhearty]

Hi Everyone!
Nice to finally join this community!
Okay, so I’m trying to use the Anything Slider, which I’ve actually used before and had no problem.
This time around, I need video functionality. So I’m using additional scripts. I’ve already got two other dynamic elements on the page requiring their own scripts. If I shuffle the order of the initialization scripts some things stop working, but the Anything Slider never works. I’ve even deleted all scripts and still it won’t work.

My code:

http://codepen.io/Laughhearty/pen/wgzqr

the site:

http://sandbox.intrepidrealist.com/lucidity-fest

Thanks!

[margaux]

Hi

I had a similar problem on a website I built using Anything Slider with a javascript dropdown menu which I resolved using jquery.noConflict. Try implementing the noConflict variable on one of the other scripts (i.e. not the Anything Slider one). You can set var = j as opposed to var = $j. It worked for me so maybe worth a try.

[Mottie]

Hi @Laughhearty!

Hmmm, codepen doesn’t seem to want to run that code. Something about iframe security. So I moved your code over to [jsFiddle](http://jsfiddle.net/Mottie/KPFxd/) and did the following:

1.Removed the `var $j = jQuery.noConflict()` because you’re already using jQuery for other plugins and there isn’t any conflict with other libraries.

2.Removed `navigationFormatter: formatText` because `formatText` hasn’t been defined, so it was just causing an error.

3.Changed `$j(‘#slider1’).anythingSlider` to `jQuery(‘#slider’).anythingSlider` because there isn’t a `1` in the ID.

You could also combine all of the document ready functions into one as I did in this [updated jsFiddle](http://jsfiddle.net/Mottie/KPFxd/1/).

Lastly, this script is missing (404 error): `css_browser_selector.js`

[Laughhearty]

Thank you so much for the help!
Mottie, I implemented your suggestions and it’s not working for me locally or remotely. And all the more aggravating, because I can see it working just fine in jsFiddle! Aarghhhhhh!!!

What have I missed?

[Mottie]

I’m not sure what the problem could be, did you open the javascript console (F12 in most browsers) and look to see if there were any script errors?

[Laughhearty]

I clicked the console tab in firebug and got no errors. Is this what you’re talking about?

[Mottie]

Well, I guess I’d need to see the live site. I’m not that good at guessing ;)

[Laughhearty]

Okay, got an answer over at Experts-Exchange from Kravamir (he’s a God!) Apparently, without a doctype in jsFiddle an error wasn’t showing up. I needed to add change this:

buildComplete: function() {
splash.find(‘li.slide-closed div’).css(‘display’, ‘none’);
splash.find(‘li.slide-open div’).fadeIn();
},

to this:

buildComplete: function() {
var splash=jQuery(‘#splash’);
splash.find(‘li.slide-closed div’).css(‘display’, ‘none’);
splash.find(‘li.slide-open div’).fadeIn();
},

So I got it working, now I just need to make the images fade instead of slide. I’ve downloaded animate.css, but of course that’s not working for me either!

[Mottie]

Just set the [`mode` option](https://github.com/CSS-Tricks/AnythingSlider/wiki/Appearance-Options#wiki-mode) to `fade`.

[Author]

Posts