jquery - jCarousel 的 CSS 问题 - 根本无法解决

Question

首先请看jsfiddle我已经准备好了:

我明白我们不应该依赖外部托管的代码，所以我会把它添加到问题的底部。

我想做的是复制插件的演示 here

不同之处在于我拉动了我的 wordpress 网站的作者并且此 html 在页面上正确输出但由于某种原因我无法让头像在轮播中并排坐在我页面的整个宽度上。

我尝试改变 .jcarousel-skin-tango .jcarousel-container-horizo​​ntal 和 .jcarousel-skin-tango .jcarousel-clip-horizo​​ntal 和这似乎确实使它变宽了，但化身之间的距离也增加了，因此当按下按钮时，它们会从很远的距离进入，而不是坐在一条水平线上，它们之间有一个小间隙。

更改宽度会弄乱下一个和上一个按钮，但可以很容易地修复它以匹配新的轮播宽度。

我根本不知道为什么它看起来不像演示版，我所做的只是一些按钮的 css。

非常感谢任何帮助。

代码

jCarousel 初始化

jQuery(document).ready(function() {

    jQuery('#authorcarousel').jcarousel({
        scroll: 1,
        visible: 1,
        animation: 1000,
        auto: 0,
        wrap: 'circular',
        itemFallbackDimension: 75
    });
});​

HTML

<ul id="authorcarousel" class="jcarousel-skin-tango">
    <li>
        <img src="http://cdn2.iconfinder.com/data/icons/humano2/128x128/apps/comix.png" alt="" width="128" height="128" class="photo" />
    </li>
    <li>
        <img src="http://cdn5.iconfinder.com/data/icons/iconshock_guys/128/andrew.png" alt="" width="128" height="128" class="photo" />
    </li>
    <li>
        <img src="http://cdn4.iconfinder.com/data/icons/STROKE/communications/png/128/avatar.png" alt="" width="128" height="128" class="photo" /></li>
    <li>
        <img src="http://cdn2.iconfinder.com/data/icons/holloweenavatars/PNG/Frankenstein.png" alt="" width="128" height="128" class="photo" />
    </li>
    <li>
        <img src="http://cdn5.iconfinder.com/data/icons/iconshock_guys/128/matthew.png" alt="" width="128" height="128" class="photo" />
    </li>
</ul>

CSS

ul#authorcarousel  {
    list-style: none;
    width: 800px;
    margin: 20px auto 50px auto;
    padding: 0;
}

#authorcarousel li {
    margin: 0 0 5px 0;
    list-style: none;
    height: 90px;
    padding: 15px 0 15px 0;
    float: left;
    width: 90px;
}

#authorcarousel img {
    width: 75px;
    height: 75px;
    float: left;
    margin: 0 10px 0 0;
    padding: 3px;
}

#authorcarousel img:hover {
    opacity: 0.7;
    cursor: pointer;
}

/* = jCarousel
----------------------------------------------- */ 
.jcarousel-skin-tango .jcarousel-container {
    background: #FFFFFF;
    border: none;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 100px;
    padding: 5px 20px;
} 


.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  100px;
    height: 110px;
}


.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}


.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
 }

 /**
 *  Horizontal Buttons
 */
 .jcarousel-skin-tango .jcarousel-next-horizontal {
     background: #F15A23 url(http://demo.samuli.me/smartstart/img/slider-arrows-medium.png) no-repeat -5px 37px;
    filter: alpha(opacity=60);
    background: rgba(241, 90, 35, 0.6) url(http://demo.samuli.me/smartstart/img/slider-arrows-medium.png) no-repeat -5px 37px;
    color: transparent;
    cursor: pointer;
    display: block;
    font: 0/0 a;
    height: 88px;
    margin: -26.5px 0 0;
    position: absolute;
    text-shadow: none;
    top: 42%;
    left: 90%;
    width: 30px;
    z-index: 90;
    background-position: -42px 36px;    
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
   filter: alpha(opacity=100);
   opacity: 1;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    filter: alpha(opacity=100);
    opacity: 1;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    filter: alpha(opacity=100);
    opacity: 1;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    background: #F15A23 url(http://demo.samuli.me/smartstart/img/slider-arrows-medium.png) no-repeat -5px 37px;
    filter: alpha(opacity=60);
    background: rgba(241, 90, 35, 0.6) url(http://demo.samuli.me/smartstart/img/slider-arrows-medium.png) no-repeat -5px 37px;
    color: transparent;
    cursor: pointer;
    display: block;
    font: 0/0 a;
    height: 88px;
    margin: -26.5px 0 0;
    position: absolute;
    text-shadow: none;
    top: 42%;
    left: 17%;
    width: 30px;
    z-index: 90;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    filter: alpha(opacity=100);
    opacity: 1;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    filter: alpha(opacity=100);
    opacity: 1;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    filter: alpha(opacity=60);
    opacity: 0.6;
}

Answer 1

用 fiddle 玩了一下，结果是这样的:http://jsfiddle.net/PWdWR/

我想说解决您的问题的关键部分在于 javascript: visible: 6 jcarousel 的选项

另一方面，有很多 CSS 没有改变任何可以删除的东西，下面的类将适应你所看到的:.jcarousel-skin-tango .jcarousel-clip-horizo​​ntal