<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     
    });    
    
});

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.