CODEWITHSUNDEEP
javascriptjqueryjcarousel
Can Poyrazoğlu
Can Poyrazoğlu

Reputation: 34780

jCarousel 0.3.0 not working

I am trying to implement a simple carousel using the documentation here:

http://sorgalla.com/jcarousel/docs/index.html

I've got jQuery working properly, I've downloaded and referenced jCarousel 0.3.0, and according to documentation (http://sorgalla.com/jcarousel/docs/reference/installation.html). I've added the minimal required CSS (according to here http://sorgalla.com/jcarousel/docs/reference/installation.html#reference-installation-setup) I have this setup (with actual links to valid, loading JPGs):

<div style="height:114px" id="sidebarcarousel">       
    <ul>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
    </ul>            
 </div>

and in my JavaScript:

$(document).ready(function(e){
    $("#sidebarcarousel").jcarousel();
});

But absolutely nothing happens when I open up the web page. ready method of the document is called corectly, and there are no broken links to any JS or CSS files. What could be the reason? I've commented out the code with the carousel, and nothing changed. Also, no problem seen in the JavaScript console. I've tried it in both latest Safari, Firefox, and Chrome.

What can be the reason? I am using 0.3.0 (so don't bring older-version-related documents as they probably won't work as 0.3.0 is a breaking change).

Upvotes: 3

Views: 4598

Answers (2)

W. Eb
W. Eb

Reputation: 9

You are sure that you included the correct versions of jQuery and jCarousel javascript files?

<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.jcarousel.min.js" type="text/javascript"></script>

At this moment you only see the carousel. It doesn't do anything unless you add code to make it slide. You can use code to make it slide automatically or you can simply add navigation buttons as explained here.

Upvotes: 1

sensei
sensei

Reputation: 7562

You didn't include any class for your <ul> and you have to give that id to your <ul>, not to div.

In your case: <ul id="sidebarcarousel" class="jcarousel-skin-tango">

Why? Because it uses that structure and class in .js plugin code for operating with <ul> element.

jQuery call:

jQuery(document).ready(function() {
     jQuery('#sidebarcarousel').jcarousel();
});

HTML:

<ul id="sidebarcarousel" class="jcarousel-skin-tango">
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
</ul>

Please check an example I made for you here: http://jsfiddle.net/UCgEU/2/

PS: I added external plugins resources for this example. You can find them on the left under "manage resources".

Upvotes: 0

Related Questions