まず、私が準備したjsfiddleをご覧ください。
外部でホストされているコードに依存するべきではないことを理解しているので、質問の最後に追加します。
私がやろうとしているのは、ここにプラグインのデモを複製することです
違いは、ワードプレスサイトの作成者を引っ張っていて、このhtmlがページに正しく出力されていることですが、何らかの理由で、アバターをカルーセル内のページの全幅に並べて配置することができません。
.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>