2 Sliders on Same Page - Nav Arrows appear on wrong slider and options not working

[frontiercarlos]

I have installed two sliders on the homepage of a site I'm developing. They were working fine locally, but when I put them on the server a couple of strange things have happened. Here is a link to the page.

http://goldminersreport.com/gmindex.html#&panel1-1&panel2-1

You will see a smaller slider first, to the left side of the page with news articles. Then a full-width slider below it with the "World's Top 10 Gold Deposits".

I designed it with navigation arrows on the larger slider and no navigation arrows on the smaller slider. However, this arrangement has flip flopped for some reason.

In the options for the larger slider I have:

enableArrows : true,

And I do not have the option set at all in the smaller slider so it has whatever the default setting is, which I think is 'true' anyway, so this might be redundant.

But I'm just realizing that 'enableArrows' doesn't do what I thought it did. What I'm trying to do is eliminate nav arrows on the smaller top slider and install them on the larger slider.

Can you provide some direction?

Thanks,

[Mottie]

Hi @frontiercarlos!

Well there are a few issues that need to be addressed...

First, I count four copies of jQuery being loaded. You only need one, and I don't think you need to use noConflict() either.

<!-- jQuery (required) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<!-- jQuery Patch for AnythingSlider -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var jq = jQuery.noConflict();
jq(function(){
  jq('#slider').anythingSlider();
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

And secondly, in that snippet above, you're calling AnythingSlider with no options. That's why the first slider (small one) has the arrows; because when the slider is initialized further down the page (with options) any included options are being ignored.

[frontiercarlos]

Thanks for the diagnosis. I'm laughing as I look at it. It's so obvious when somebody else points it out, even though I've been staring at this code for weeks. I'll give it a shot and let you know how it turns out.

[frontiercarlos]

Ok, I removed all the extra jQuery calls and the patch and nothing bad happened. :0)

However, it didn't fix the arrow problem. As I read through the options carefully I couldn't really find anything that calls or suppresses the arrows.

I did however perused the separate css files for each slider and made some adjustments to the sprite url images being called and the image locations, and that got things working.

Thanks again though for the code clean-up advice.