Minimal jQuery Slideshow with Thumbnail Navigation - Amichels Slider
File Size: | 305 KB |
---|---|
Views Total: | 8465 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery plugin for creating an image slideshow/carousel that features auto rotation, custom slide animations and thumbnails navigation.
How to use it:
1. Insert your images with caption text into your document following the markup structure like below. The plugin will automatically generate a thumbnails navigation at the bottom of the slideshow/carousel.
<div class="carousel-wrap"> <div class="carousel-con"> <div class="carousel"> <div class="carousel-slide"> <img class="carousel-img" src="images/slide1.jpg"> <div class="carousel-caption"> <h2 class="carousel-cap-header">Slide 1</h2> <p class="carousel-cap-desc">Description 1</P> </div> </div> <div class="carousel-slide"> <img class="carousel-img" src="images/slide2.jpg"> <div class="carousel-caption"> <h2 class="carousel-cap-header">Slide 2</h2> <p class="carousel-cap-desc">Description 2</P> </div> </div> <div class="carousel-slide"> <img class="carousel-img" src="images/slide3.jpg"> <div class="carousel-caption"> <h2 class="carousel-cap-header">Slide 3</h2> <p class="carousel-cap-desc">Description 3</P> </div> </div> <div class="carousel-slide"> <img class="carousel-img" src="images/slide4.jpg"> <div class="carousel-caption"> <h2 class="carousel-cap-header">Slide 4</h2> <p class="carousel-cap-desc">Description 4</P> </div> </div> </div> </div> <div class="carousel-thumbs cf"></div> </div>
2. The core CSS to style the image slideshow/carousel.
.carousel-con { margin-bottom: 1px; height: 331px; overflow: hidden; position: relative; } .carousel { position: relative; } .carousel-slide { position: relative; float: left; } .carousel-img { display: block; } .carousel-caption { background: url(../images/white-trans-bg.png); position: absolute; bottom: 0; right: 0; left: 0; padding: 14px; color: #282b2e; } .carousel-cap-header { margin: 0; font-size: 24px; text-transform: uppercase; } .carousel-cap-desc { margin: 0; font-size: 14px; } .carousel-thumbs { text-align: center; } .carousel-thumb-item { padding-top: 12px; margin-right: 10px; display: inline-block; zoom: 1; *display: inline; width: 159px; position: relative; } .carousel-thumb { display: block; width: 100%; cursor: pointer; } .carousel-thumb-active { background: url(../images/carousel-arw.png) 50% 0 no-repeat; } .carousel-thumb-active .carousel-thumb-over { border: 3px solid #0084d9; position: absolute; top: 9px; /* height of carousel background img */ z-index: 10; bottom: 0; left: 0; right: 0; } .carousel-thumb-last { margin-right: 0; }
3. Include jQuery CDN and the jQuery Amichels Slider plugin at the end of the document.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="scripts/jquery.amichels.slider.js"></script>
4. Call the plugin on the wrapper element to create a basic image slideshow/carousel with default settings.
$(document).ready(function(){ $(".carousel-wrap").carousel(); });
5. All the default settings.
$("SELECTOR").carousel({ // contains all the carousel elements carouselWrap: ".carousel-wrap", // carousel element carousel: ".carousel", // slide element slide: ".carousel-slide", // thumbnail control container thumbCon: ".carousel-thumbs", // thumbnail control element thumb: ".carousel-thumb-item", // start slide startingSlide: 0, // speed moving to next slide speed: 500, // time between slide moves duration: 5000, // auto-rotation auto: false, // pause if user's mouse enters carouselWrap area pauseOnHover: true });
This awesome jQuery plugin is developed by amichels. For more Advanced Usages, please check the demo page or visit the official website.