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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<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">
  ...
</div>

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

$(function(){

  $(".dnSlide-main").dnSlide();

});

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

$(".dnSlide-main").dnSlide({
  "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
$(".dnSlide-main").dnSlide('destroy');

// show the carousel
$(".dnSlide-main").dnSlide('show');

// hide the pluign
$(".dnSlide-main").dnSlide('hide');

---

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