<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-4/js/jquery.flexisel.js"></script>
<ul id="flexiselDemo1">
<li><img src="images/logo-nyt.png" /></li>
<li><img src="images/logo-microsoft.png" /></li>
<li><img src="images/logo-ebay.png" /></li>
<li><img src="images/logo-hp.png" /></li>
<li><img src="images/logo-youtube.png" /></li>
</ul>
<div class="clearfix"></div>
<ul id="flexiselDemo2">
<li><img src="images/logo-adidas.png" /></li>
<li><img src="images/logo-nike.png" /></li>
<li><img src="images/logo-amazon.png" /></li>
<li><img src="images/flipkart.png" /></li>
<li><img src="images/logo-android.png" /></li>
</ul>
<div class="clearfix"></div>
<ul id="flexiselDemo3">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
<div class="clearfix"></div>
<ul id="flexiselDemo4">
<li><img src="images/bentley.png" /></li>
<li><img src="images/ford.png" /></li>
<li><img src="images/aston-martin.png" /></li>
<li><img src="images/mini.png" /></li>
<li><img src="images/lamborghini.png" /></li>
<li><img src="images/ferrari.png" /></li>
<li><img src="images/ferrari.png" /></li>
<li><img src="images/benz.png" /></li>
<li><img src="images/audi.png" /></li>
<li><img src="images/bmw.png" /></li>
<li><img src="images/logo-Volkswagen.png" /></li>
<li><img src="images/logo-jaguar.png" /></li>
</ul>
body {
background:#fff;
font-family:Arial, sans-serif;
}
p {
margin-bottom:20px;
}
.clearfix {
height:20px;
clear:both;
margin:50px 0px;
}
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {
display:none;
}
.nbs-flexisel-container {
position:relative;
max-width:100%;
}
.nbs-flexisel-ul {
position:relative;
width:99999px;
margin:0px;
padding:0px;
list-style-type:none;
text-align:center;
overflow: auto;
}
.nbs-flexisel-inner {
position: relative;
overflow: hidden;
float:left;
width:100%;
background:#fcfcfc;
background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */
background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */
background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */
background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */
background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.clearfix{clear:both}
.ftl{font-size:16px;padding:50px 0 20px;margin:0 auto;font-style:italic;text-align:center;}
.ftl a{color:#09C;text-decoration:none !important;}
.ftl a:hover{color:#999}
.nbs-flexisel-item {
float:left;
margin:0px;
padding:0px;
cursor:pointer;
position:relative;
line-height:0px;
}
.nbs-flexisel-item img {
max-width: 100%;
cursor: pointer;
position: relative;
margin-top: 10px;
margin-bottom: 10px;
}
/*** Navigation ***/
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
padding:5px 10px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
position: absolute;
cursor: pointer;
z-index: 4;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: #fff;
}
.nbs-flexisel-nav-left {
left: 10px;
}
.nbs-flexisel-nav-left:before {
content: "<"
}
.nbs-flexisel-nav-left.disabled {
opacity: 0.4;
}
.nbs-flexisel-nav-right {
right: 5px;
}
.nbs-flexisel-nav-right:before {
content: ">"
}
.nbs-flexisel-nav-right.disabled {
opacity: 0.4;
}
$(window).load(function() {
$("#flexiselDemo1").flexisel();
$("#flexiselDemo2").flexisel({
visibleItems: 4,
itemsToScroll: 3,
animationSpeed: 200,
infinite: true,
navigationTargetSelector: null,
autoPlay: {
enable: false,
interval: 5000,
pauseOnHover: true
},
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1,
itemsToScroll: 1
},
landscape: {
changePoint:640,
visibleItems: 2,
itemsToScroll: 2
},
tablet: {
changePoint:768,
visibleItems: 3,
itemsToScroll: 3
}
},
loaded: function(object) {
console.log('Slider loaded...');
},
before: function(object){
console.log('Before transition...');
},
after: function(object) {
console.log('After transition...');
},
resize: function(object){
console.log('After resize...');
}
});
$("#flexiselDemo3").flexisel({
visibleItems: 3,
itemsToScroll: 1,
autoPlay: {
enable: true,
interval: 5000,
pauseOnHover: true
}
});
$("#flexiselDemo4").flexisel({
infinite: false
});
});