Question

I am using the carouFredSel ( http://caroufredsel.frebsite.nl/ ) to create an image carousel, which is up and working – my code looks like:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.carouFredSel-5.6.1.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            $(".carousel").carouFredSel ({
                align: "center",
                auto: false,
                circular: true,
                infinite: true,
                next: ".next",
                prev: ".prev",
                scroll: 1,
                width: 1072,
            });
        });
    </script>

I am only having a small issue – hopefully. The website I am working with is http://ellenandjosh.com/ you can see carouFredSel right on the front page.

However, if you try and click on the previous button the carousel disappears. It works great if I have already hit the next button, but when I hit the previous button straight out of the gate that’s what happens. I was expecting it to show me the last image. Any ideas?

Answer 1

Here’s how you fix it:

to your CSS add:

.carousel-thumbnail {height: 222px !important}

The issue is that once you click back, the carousel gets confused and sees an empty list sets height to 0px and the element disappears.

For your script, it looks like there is a problem with sizes, so change

            $(document).ready(function() {

to

$(window).ready(function() {

as per tip here: http://caroufredsel.frebsite.nl/support/tips-and-tricks.php

It should work, but I can test only using firebug.

Btw: your script has trailing comma in the dict, remove it so it will work on IE 🙂