JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<body>
<div id="wrapper">
<div class="shell">
<div class="container">
<header id="header">
<h1 id="logo"><a href="#">Curve</a></h1>
<div class="search">
<form method="post">
<span class="field"><input type="text" class="field" value="keywords here ..." title="keywords here ..." /></span>
<input type="submit" class="search-btn" value="" />
</form>
</div>
</header>
<nav id="navigation">
<a href="#" class="nav-btn">HOME<span class="arr"></span></a>
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">SOLUTIONS</a></li>
<li><a href="#">CONTACTS</a></li>
</ul>
</nav>
<div class="m-slider">
<div class="slider-holder">
<span class="slider-shadow"></span>
<span class="slider-b"></span>
<div class="slider">
<div id="owl-demo" class="owl-carousel owl-theme">
</div>
</div>
</div>
</div>
<div class="socials">
<div class="socials-inner">
<h3>Follow us</h3>
<ul>
<li><a href="#" class="facebook-ico"><span></span>Facebook</a></li>
<li><a href="#" class="twitter-ico"><span></span>Twitter</a></li>
<li><a href="#" class="rss-feed-ico"><span></span>Rss-feed</a></li>
<li><a href="#" class="myspace-ico"><span></span>myspace</a></li>
<li><a href="#" class="john-doe-123-ico"><span></span>john.doe.123</a></li>
</ul>
<div class="cl"> </div>
</div>
</div>
...
CSS
* { margin: 0; padding: 0; outline: 0; }
body, html { height: 100%; }
body {
font-size: 12px;
line-height: 22px;
font-family: arial, sans-serif;
color: #828282;
background: url(images/body.png) repeat 0 0;
min-width: 100%;
}
/*font-family: 'Open Sans', sans-serif;*/
a { color: #0252aa; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }
a.more { color: #2b9208; text-decoration: underline; padding-left: 11px; background: url(images/arr-ico.png) no-repeat 0 5px; }
a.more:hover { text-decoration: none; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }
.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }
article, aside, details, footer, header, menu, nav, section { display: block; }
.shell { width: 990px; margin: 0 auto; }
.container { background: #fff; box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; -moz-box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; -webkit-box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; -o-box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; }
#header { height: 54px; padding-top: 21px; padding-left: 33px; padding-right: 17px; }
#logo { width: 81px; float: left; font-size: 0; line-height: 0;}
#logo a { height: 33px; display: block; background: url(images/logo.png) no-repeat 0 0; text-indent: -4000px; }
.search { float: right; }
.search input.field { border: 1px solid #d6d6d6; background: #ededed; width: 166px; height: 24px; line-height: 22px; padding: 0px 10px; float: left; font-size: 11px; font-family: verdana, arial, helvetica, serif; color: #bebebe; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;}
.search input.search-btn { width: 22px; height: 26px; margin-left: 3px; border: 0;...
JavaScript
//my plugin code in file matchCarousel.plugin.js
(function ($) {
$.fn.matchCarousel = function(options) {
var settings = { 'maxMatches': 10 };
if (options) { $.extend(settings, options); }
//var url = "URL-to-JSON-file"; //url setting if plugin is standalone (without Owl carousel) and it isn't necessary in my case
function customDataSuccess(data) { //this line would be replaced with $.getJSON(url, function (data) { if plugin is standalone (without Owl carousel) and it isn't necessary in my case
var counter = 0;
$.each(data.doc[0].data[0].realcategories, function (index, value) {
var realCat = this.name;
$.each(this.tournaments, function (x, y) {
tourName = this.name;
var tourSeasName = this.seasontypename;
$.each(this.matches, function (i, j) {
var resultHome = this.result.home;
var resultAway = this.result.away;
var teamHome = this.teams.home.name;
var teamHomeId = this.teams.home.uid;
var teamAway = this.teams.away.name;
var teamAwayId = this.teams.away.uid;
var time = this._dt.time;
var date = this._dt.date;
var statusId = this.status._id;
var statusName = this.status.name;
var matchId = this._id;
var content = $('div.slider div#owl-demo').append('<div id="' + index + i + '" class="item"><img id="' + index + i + '" class="slider ' + index + i + '" alt="' + realCat + ': ' + tourName + ' - ' + tourSeasName + '" /><p class="league">' + tourName + ' - ' + tourSeasName + '</p><p class="catName">' + realCat + '</p><div class="teams"><div class="team1"><img src="http://ls.betradar.com/ls/crest/big/' + teamHomeId + '.png" alt="' + teamHome + '"/ ><p class = "teamName">' + teamHome + '</p></div><div...