Before we proceed, take a look at this jsfiddle that I have prepared:
I am aware of the importance of not relying on externally hosted code, so I will include it at the end of this question.
My goal is to recreate the demonstration of the plugin available here.
The challenge I am facing is aligning the avatars of authors from my WordPress site in a carousel layout. While the HTML output displays correctly on the page, for some reason, the avatars are not positioned side by side horizontally within the carousel to span the full width of my page.
I have attempted adjusting the widths of
.jcarousel-skin-tango .jcarousel-container-horizontal.jcarousel-skin-tango .jcarousel-clip-horizontalIf I modify the width, it affects the alignment of the next and previous buttons, but that can be easily adjusted to match the new carousel width.
I cannot figure out why the display does not mirror the demo version, as I only made changes to the CSS for the buttons.
Any assistance would be GREATLY appreciated.
CODE
jCarousel Initialization
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
(preformatted text block containing CSS styles)