javascript - 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由于某种原因无法加载。我已经更新了你的 fiddle :http://jsfiddle.net/mk1z6p3x/2/ .检查外部资源菜单。