Simple Clean Image Carousel Plugin For jQuery - Blossom

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.