Simple Clean Image Carousel Plugin For jQuery - Blossom

File Size: 10 KB
Views Total: 1589
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="blossom.js"></script>

3. Insert a list of images into a carousel container.

<div id="myCarousel">
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
  <div> </div>

4. Call the plugin on the container to generate an image carousel.


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:


  • 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.