issue with caroufredsel and jquery

Question

I am using jquery 1.8.2 and caroufredsel 6.2.1. The js files are added to the page. In my document.ready function, I am calling $('#carousel1').carouFredSel() where carousel1 is one of many carousels on the page.

    <script type="text/javascript" language="javascript">
$(document).ready(function() {
                $('#carousel1').carouFredSel();

            });
        </script>

The HTML is copied below (${imgName} below is a valid image):

    <div id="c-carousel">
        <div id="wrapper">
<div id="carousel1" class="carousel1">
    <img src="${imgName}" width="150"/>

</div>
</div>
</div>

Any ideas as to what I am missing in order for me to ensure that I can see the slider on the html page? Any helpful suggestions would be quite welcome. Thanks in advance

ali haider ali haider · Accepted Answer · 2013-04-24T21:28:24

I finally got this to work. These are the steps I took:

ensure that jquery is in the Head section of the html
Ensure that jcaroufredsel is right after that in the head section of the html page (you may wish to use jquery.easnig as well - though I don't believe its required unless you're using the easing options in the carousel config)
Your content needs to be in a div (which you will call caroufredsel on) e.g. c-carousel1. I add my list items in an unordered list format (used ). Make sure that you use a div wrapper that wraps the content in horizontal format (so that the list does not appear in vertical fashion).
When the page loads (document.ready or windown.onLoad), you can call caroufredsel as follows:

$('#c-carousel1 ul').carouFredSel();

It worked for me after these steps. Hope it helps!

issue with caroufredsel and jquery

1 Answers