JCarousel jQuery plugin

Question

I use of JCarousel jQuery plugin for controlling a list of images but it won't work. What can I do?

There is a demo in http://jsfiddle.net/mk1z6p3x/

$(function () {
    $('.jcarousel').jcarousel();
});

.jcarousel {
    position: relative;
    overflow: hidden;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jsor/jcarousel/master/dist/jquery.jcarousel.min.js"></script>
<div class="jcarousel">
    <ul dir="rtl">
      <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img1.jpg');"></li>
      <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img2.jpg');"></li>
      <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img3.jpg');"></li>
      <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img4.jpg');"></li>
      <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img5.jpg');"></li>
      <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img6.jpg');"></li>
    </ul>
</div>

EDIT: I changed them as the telling me @redelschaap , i add a new style in css .jcarousel li, but still it doesn't work this plugin. see here: jsfiddle.net/mk1z6p3x/1

Answer 1

You use the images as background images and leave your list items empty. You don't see them because they have no width/height. Give your items a (min) width and height or use the images as <img> tags within the list items.

Edit: You also forgot to include the jcarousel.basic.js file and the jquery.jcarousel.min.js couldn't be loaded for a reason. I've updated your fiddle: http://jsfiddle.net/mk1z6p3x/2/. Check the external resources menu.