JQuery Carousel

by Apple Ilagan

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>

<h2>Show the left and the right slides</h2>
    <div class="slideshow-container">
        <div class="slideshow responsive" 
            data-cycle-fx=carousel
            data-cycle-timeout=1000
            data-cycle-carousel-visible=1
            data-cycle-carousel-fluid=true
            >
            <img src="http://malsup.github.io/images/beach1.jpg">
            <img src="http://malsup.github.io/images/beach2.jpg">
            <img src="http://malsup.github.io/images/beach3.jpg">
            <img src="http://malsup.github.io/images/beach4.jpg">
        </div>
    </div>

CSS

.slideshow-container {
    overflow: hidden !important;
    width: 100%;
}

.slideshow {
    overflow: visible !important;
    width: 80%;
    margin-left: 10%;
    text-align:center;
}