首先请看我准备的jsfiddle ：
我知道我们不应该依赖外部托管的代码，所以我会将它添加到问题的底部。
我想做的是在这里复制插件的演示
不同之处在于我正在拉动我的 wordpress 网站的作者，并且这个 html 在页面上正确输出，但由于某种原因，我无法让头像并排坐在轮播中我的页面的整个宽度。
我尝试更改 and 的宽度，.jcarousel-skin-tango .jcarousel-container-horizontal这.jcarousel-skin-tango .jcarousel-clip-horizontal似乎使它变宽了，但是化身之间的距离也增加了，因此当按下按钮时它们从很远的距离移动而不是它们坐在水平线上他们之间的差距。
更改宽度会弄乱下一个和上一个按钮，但可以轻松修复以匹配新的轮播宽度。
我根本不知道为什么它不像演示版那样出现，我所更改的只是按钮的一些 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;
}
</p>
</p>