JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://github.com/jsor/jcarousel/raw/master/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" href="http://github.com/jsor/jcarousel/raw/master/skins/tango/skin.css">
<ul id="mycarousel" class="jcarousel-skin-tango">
<!-- The content goes in here -->
</ul>
JavaScript
var items = 10;
var visibleItems = 3;
var itemWidth = 75;
var margin = 10;
var itemList = [
{url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
{url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
{url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
{url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
{url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
{url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
{url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
{url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
{url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
{url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];
visibleItems = Math.min(visibleItems, items);
createCSS('.jcarousel-skin-tango .jcarousel-container-horizontal,.jcarousel-skin-tango .jcarousel-clip-horizontal', 'width: ' + (visibleItems * itemWidth + (visibleItems-1) * margin) + 'px;');
$(function(){
$(itemList.slice(0, items)).map(function() {
return $('<li><img src="' + this.url + '" title="' + this.title + '" /></li>');
}).appendTo('#mycarousel');
$('#mycarousel').jcarousel({
scroll: visibleItems
});
});
// http://snippets.dzone.com/posts/show/3817
function createCSS(selector, declaration) {
// test for IE
var ua = navigator.userAgent.toLowerCase();
var isIE = (/msie/.test(ua)) && !(/opera/.test(ua)) && (/win/.test(ua));
// create the style node for all browsers
var style_node = document.createElement("style");
style_node.setAttribute("type", "text/css");
style_node.setAttribute("media", "screen");
// append a rule for good browsers
if (!isIE)...