Question

首先，请参阅我准备的jsfiddle：

我知道我们不应该依赖外部托管的代码，因此我会将其添加到问题的底部。

我要做的是复制插件here

的演示

不同之处在于我正在拉动我的wordpress网站的作者并且这个html在页面上正确输出但是由于某种原因我不能让化身并排坐在旋转木马内的页面的整个宽度。

我已经尝试更改.jcarousel-skin-tango .jcarousel-container-horizontal和.jcarousel-skin-tango .jcarousel-clip-horizontal的宽度，这似乎使它更宽，但化身之间的距离也增加了所以当按钮从远处进入时按下而不是它们坐在水平线上，它们之间有一个小间隙。

更改宽度会弄乱下一个和上一个按钮，但可以轻松修复以匹配新的轮播宽度。

我根本不知道为什么它不像演示版那样出现，我所改变的只是按钮的一些css。

任何帮助非常赞赏。

CODE

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

你是否下载了jcarousel？

他们有问题，js坏了，请检查url

他们的example也不起作用：

输入here

并下载项目，并使用本地'js'

Answer 2

用小提琴演奏了一下这个结尾我：http://jsfiddle.net/PWdWR/

我说解决问题的关键部分在javascript：j visible: 6 jcarousel

的选项中

另一方面，有很多CSS改变了任何可以删除的内容，下面的课程将适应你所看到的内容：.jcarousel-skin-tango .jcarousel-clip-horizontal

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

2 个答案: