Simple Clean Image Carousel Plugin For jQuery - Blossom
File Size: | 10 KB |
---|---|
Views Total: | 1565 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Blossom is a simple, lightweight jQuery plugin used to create a nice clean carousel slider from an unordered list of images, featuring autoplay, endless loop, and arrows/bullets navigation.
How to use it:
1. Load the jQuery Blossom's stylesheet for primary carousel styles.
<link rel="stylesheet" href="blossom.css">
2. Load the jQuery Blossom's script after loading jQuery JavaScript, before the closing body tag.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="blossom.js"></script>
3. Insert a list of images into a carousel container.
<div id="myCarousel"> <ul> <li><img src="https://unsplash.it/600/450?image=441"></li> <li><img src="https://unsplash.it/600/450?image=442"></li> <li><img src="https://unsplash.it/600/450?image=443"></li> <li><img src="https://unsplash.it/600/450?image=435"></li> <li><img src="https://unsplash.it/600/450?image=433"></li> </ul> <div> </div> </div>
4. Call the plugin on the container to generate an image carousel.
$('#myCarousel').blossom(//OPTIONS);
5. Default plugin options.
// width of the carousel carouselWidth: "400px", // height of the carousel carouselHeight: "400px", // styles for bullets navigation orbColor: "#ccc", orbSelectColor: "#aaa", orbBoxColor: "white", orbAlignment: "center", // animation speed animationSpeed: 1000, animationStyle: "slide", //or "fade" // enable autoplay on initialize autoPlay: true, // autoplay interval autoPlaySpeed: 3000, minimal: false
Change log:
2015-04-08
- Update blossom.js and blossom.css
This awesome jQuery plugin is developed by tschafma. For more Advanced Usages, please check the demo page or visit the official website.