jQuery carousel plugin that provides the ability to rotate through the image list with slide transition or fade effects.
automatic image slider with buttons, image carousel examples, automatic image slider in html css source code, carousel auto slide javascript
How to make use of it:
1. Add a list of images with arrow navigation and split bulleted numbering to your web page.
<div class="carousel-container"> <div> <span class="circle-button prev"><</span> <span class="circle-button next">></span> </div> <div class="content-container"> <ul class="content clearfix"> <li data-index=0><a href="#"><img src="1.jpg" alt=""></a></li> <li data-index=1><a href="#"><img src="2.png" alt=""></a></li> <li data-index=2><a href="#"><img src="3.png" alt=""></a></li> <li data-index=3><a href="#"><img src="4.png" alt=""></a></li> <li data-index=4><a href="#"><img src="5.png" alt=""></a></li> </ul> </div> <ul class="quick-nav clearfix"> <li><a href="javascript:void(0)"></a></li> <li><a href="javascript:void(0)"></a></li> <li><a href="javascript:void(0)"></a></li> <li><a href="javascript:void(0)"></a></li> <li><a href="javascript:void(0)"></a></li> </ul> </div>
2. Basic CSS Styles.
* { padding: 0; margin: 0; } .clearfix { overflow: hidden; _zoom: 1; } .carousel-container { width: 500px; margin: 30px auto; position: relative; } .carousel-container li { float: left; list-style: none; } .content-container { width: 500px; height: 250px; overflow: hidden; } .carousel-container .content { position: absolute; left: 0; } .carousel-container .content img { width: 500px; height: 250px; }
3. The style of the carousel controls.
.carousel-container .quick-nav a { display: block; width: 8px; height: 8px; border-radius: 50%; background-color: #e5e5e5; opacity: .5; margin: 4px 5px; } .carousel-container .quick-nav a.active { background: rgba(0,0,0,.8); } .carousel-container .quick-nav { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.5); border-radius: 4px; } .carousel-container .circle-button { display: block; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.5); line-height: 32px; text-align: center; } .carousel-container .prev, .carousel-container .next { position: absolute; top: 50%; margin-top: -16px; color: #fff; cursor: pointer; font-size: 15px; font-weight: bold; z-index: 100; } .carousel-container .prev { left: 10px; } .carousel-container .next { right: 10px; left: auto; }
4. Import the jQuery library and jQuery.carousel.js into the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jQuery.carousel.js"></script>
5. Configure the circle of images using the default settings.
$('.carousel-container').carousel();
6. Default plugin settings.
// class names for carousel & carousel controls nextNavClassName: "next", //'next' prevNavClassName: "prev", //'prev' quickNavClassName: "quick-nav", contentClassName: "content", activeClassName: 'active', // data- attribute name indexName: 'data-index', // enable autoplay autoplay: true, // transition delay duration: 1000, // autoplay interval interval: 3000, // slide or fade effect: 'slide'
minimal automatic image carousel, jquery carousel Plugin/Github
See Demo And Download
Official Website(sheila1227): Click Here
This superior jQuery/javascript plugin is developed by sheila1227. For extra advanced usage, please go to the official website.
Be First to Comment