JCarousel 0.3.0 not working
I am trying to implement a simple carousel using the following documentation:
http://sorgalla.com/jcarousel/docs/index.html
I have jQuery working correctly, I downloaded and referenced jCarousel 0.3.0, and according to the documentation ( http://sorgalla.com/jcarousel/docs/reference/installation.html ), I added the minimum required CSS (here http: // sorgalla.com/jcarousel/docs/reference/installation.html#reference-installation-setup ) I have this setup (with actual links to valid JPG uploads):
<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 the webpage. the finished document method is called corectly and there are no broken links to any JS or CSS files. What could be the reason? I commented out the code from the carousel and nothing has changed. Also, there is no problem in the JavaScript console. I tried it in both the latest Safari, Firefox and Chrome.
What is the reason? I am using 0.3.0 (so don't bring documents related to the older version as they probably won't work as 0.3.0 is a violation).
source to share
Are you sure you have included the correct jQuery and javascript versions of the jCarousel 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 point, you only see the carousel. It doesn't do anything unless you add some code to make it slide. You can use code to make it slide automatically or you can simply add navigation buttons as described here .
source to share
You haven't included any class for yours <ul>
, and you must point it to yours <ul>
, not the div.
In your case: <ul id="sidebarcarousel" class="jcarousel-skin-tango">
Why? Because it uses this structure and class in the .js module to work with the element <ul>
.
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 see the example I gave for you here: http://jsfiddle.net/UCgEU/2/
PS: I have added external plugin resources for this example. You can find them on the left under "Resource Management".
source to share