bootstrap 3 horizontal scroll website

by ravimallya

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.plus.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>
<div class="container" id="main-content">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <h1>ASDF </h1>
                            <img src="http://www.placehold.it/400x200" class="img-responsive" alt="sliderImg" />
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <h1>ASDF </h1>
                            <img src="http://www.placehold.it/400x200" class="img-responsive" alt="sliderImg" />
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <h1>ASDF </h1>
                            <img src="http://www.placehold.it/400x200" class="img-responsive" alt="sliderImg" />
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <h1>ASDF </h1>
                            <img src="http://www.placehold.it/400x200" class="img-responsive" alt="sliderImg" />
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <h1>ASDF </h1>
                            <img src="http://www.placehold.it/400x200" class="img-responsive" alt="sliderImg" />
                        </div>
                        <div...

CSS

/* Sticky footer styles  */
 html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
 #wrap {
    min-height: 100%;
    height: auto;
    /* Negative indent footer by its height */
    margin: 0 auto -60px;
    /* Pad bottom by footer height */
    padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
 #footer {
    height: 60px;
    background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */

/* Not required for template or sticky footer method. */
 #wrap > .container {
    padding: 60px 15px 0;
}

@media (min-width:768px) {
.container {
width:100%;
}
#main-content{
     min-height: 100%;
    height: auto; 
   
}
#main-content > .row {

     overflow-y:hidden;
    white-space:nowrap;
}    
#main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:none;
    display:inline-block;
}

JavaScript

$("#main-content > .row").niceScroll();

   $("#main-content .row").carouFredSel({
                width: "100%",
                height: "100%",
                auto: true,
                // responsive:true,
                items: {
                    visible: 4,
                    width: "100%",
                    height: "100%",
                    minimum: 4
                },
                scroll: 4
            });