JCarousel jQuery插件

Question

我使用JCarousel jQuery插件来控制图像列表，但是它不能工作。我能做什么?

在 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>

​

编辑:我修改了它们，作为告诉我@redelschaap，我在css .jcarousel li中添加了一个新的样式，但是它仍然不能工作这个插件。见此处：jsfiddle.net/mk1z6p3x/1

Answer 1

您可以使用这些图像作为背景图像，并将列表项保留为空。你看不到它们，因为它们没有宽度/高度。给您的项目一个(最小)宽度和高度，或使用图像作为<img>标签在列表项目。

编辑:您还忘了包含jcarousel.basic.js文件，并且由于某种原因无法加载jquery.jcarousel.min.js。我更新了你的小提琴：http://jsfiddle.net/mk1z6p3x/2/。检查“外部资源”菜单。