First of all please see the jsfiddle I’ve prepared:
I understand that we shouldn’t rely on externally hosted code so I will add it at the bottom of the question.
What I am trying to do is replicate the demo of the plugin here
The difference is I am pulling the authors of my wordpress site and this html is outputted correctly on the page but for some reason I cannot get the avatars to sit side by side the full width of my page inside the carousel.
I have tried changing the width of .jcarousel-skin-tango .jcarousel-container-horizontal and .jcarousel-skin-tango .jcarousel-clip-horizontal and this does seem to make it wider but the distance between the avatars is increased as well so they travel in from a great distance when the buttons are pressed instead of them sitting in a horizontal line with a small gap between them.
Changing the width will mess up the next and previous buttons but that can easily be fixed to match the new carousel width.
I simply have no idea why it isn’t appearing like the demo version, all I have changed is some css for the buttons.
Any help is GREATLY appreciated.
CODE
jCarousel Initialisation
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;
}
Playing around a bit with the fiddle ended me with this: http://jsfiddle.net/PWdWR/
I’d say the key to resolving your issue is partially in the javascript:
visible: 6option of jcarouselAnd on the other side there’s alot of the CSS that changes nothing that can be removed and the following class will adapt what you’re seeing:
.jcarousel-skin-tango .jcarousel-clip-horizontal