Cross-browser Coverflow Carousel Plugin - jQuery dnSlide

File Size: 3.17 MB
Views Total: 4997
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Cross-browser Coverflow Carousel Plugin - jQuery dnSlide

dnSlide is a lightweight and easy-to-use jQuery plugin to create a cross-browser, coverflow-style carousel from a sequence of images.

How to use it:

1. Load the Stylesheet dnSlide.css in the head, and the JavaScript file dnSlide.js at the end of the html document.

<link rel="stylesheet" href="css/dnSlide.css">
<script src="" 
<script src="js/dnSlide.js"></script>

2. Add your own images to the carousel container.

<div class="dnSlide-main">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
  <img src="6.jpg">

3. Call the function on the container element to initialize the coverflow carousel.




4. To config the coverflow carousel, override and pass the following options to the dnSlide() method.

  "isOddShow" : false , 
  "width"     : 800, 
  "height"    : 234, 
  "dnSlideFirstWidth" : 600, 
  "dnSlideFirstHeight" : 234, 
  "autoPlay"  : false,
  "delay"     : 5000,
  "scale"     : 0.9,
  "speed"     : 500,
  "verticalAlign" : "middle", // or 'bottom', 'top'
  "afterClickBtnFn" : null

5. API methods.

// destroy the pluign

// show the carousel

// hide the pluign

This awesome jQuery plugin is developed by devin-huang. For more Advanced Usages, please check the demo page or visit the official website.