JCarousel jQuery 插件

Question

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

中有演示

$(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

您将这些图片用作背景图片，并将列表项留空。你看不到他们是因为他们没有width/height。为您的项目指定（最小）宽度和高度，或将图像用作列表项目中的 <img> 标签。

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

JCarousel jQuery 插件

JCarousel jQuery plugin

javascript

css

jquery

jcarousel