Hi Steph,

Are you getting any errors in the console?

Deffo sounds like its not picking up the js or the jquery selector is wrong to initiate the slider.

Damian

Did you see this comment:

You mentioned to paste "jquery.carouFredSel-6.2.1.js" but later on in your code you've included "jquery.carouFredSel-6.2.1-packed.js", so it won't work out of the box.

Hi Damian,

I got it to work, I just had to insert the script tags into the head of the layout and it picked up on the js file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel.js" type="text/javascript"></script>

Only problem now is that in Internet Explorer it is nicely centered and in Firefox the banner starts to be displayed completely off to the right of the page, starting from the last navigational button.

I think this may be css related but not entirely sure why it works in IE and not firefox.

Regards,

Steph

Hi

Why doesn't that surprise me. IE/FF/Chrome all have their quirks! :o/

In IE a lot of the time, with images, it is down to not having sizes specified for the image and so it doesnt know how to render them properly.

Also if you have any errors in the html some browsers handle it better than others.

Check your opens and closes on divs, lists etc. too

Run it through a W3c tool to check your html:

http://validator.w3.org/

Damian

Hi,

Perhaps you already tried it, but have you checked out http://docs.dev7studios.com/jquery-plugins/caroufredsel ? There are some good tips, for example, to ensure the plugin is able to measure the correct sizes, always use display: block; for the items. In a horizontal carousel, you should also make the items float: left;.

Also, it is a good idea to add

#carousel {             
    width: 870px;       
    height: 175px;      
    overflow: hidden;
}

to prevent "F.O.U.C.".

Good luck, Martin

Hi Martin,

Thanks for your advise. I'll have to experiment with the CSS sometime, we had a lot of those parameters with slightly different values. What fixed it was very odd, I just added an empty set of div tags above it and then it displayed in the center for both browsers. It works so we will keep them in for now but we will have to have a code review to find out a better way of managing it.

Thanks.

Steph

is working on a reply...