Responsive Showcase Slider Plugin with jQuery and CSS3

Showcase Slider is a small responsive image slider plugin which allows you to showcase your products/projects with CSS3 based transition animations.

More features:

• Carousel mode, which allows to loop through a set of images.
• Animated image captions.
• Autosize as the window's size changed.
• Arrows navigation.
• Customizable CSS3 animations.
• jQuery easing plugin supported.

How to use it:

1. Include the slider.css in the head section and the sc-slider.js at the bottom but after jQuery library.

<link rel="stylesheet" href="css/slider.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/sc-slider.js"></script> 

2. Include the jQuery easing plugin for easing options (Optional).

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. The Html structure for the showcase slider.

<div id="showcase_slider">
  <div class="sc_inner">
    <div class="sc_viewport"> <span data-dir="next"></span> <span data-dir="prev"></span>
      <div class="sc_inner">
        <article class=""> <img src="images/image1.png" alt="">
          <div class="sc_cap_cont"> <span class="sc_caption">Caption One</span> </div>
        </article>
        <article class=""> <img src="images/image2.png" alt="">
          <div class="sc_cap_cont"> <span class="sc_caption">Caption Two</span> </div>
        </article>
        <article class=""> <img src="images/image3.png" alt="">
          <div class="sc_cap_cont"> <span class="sc_caption">Caption Three</span> </div>
        </article>
      </div>
    </div>
  </div>
</div>

4. Initialize the plugin with default settings.

$(document).ready(function(){
$('#showcase_slider').showcaseSlider();
})

5. All the default settings.

$(document).ready(function(){
$('#showcase_slider').showcaseSlider({
speed : 800, // speed at which a new slide will fade in in milliseconds.
wrapper : 'article', // the html element wrapper used to enclose your image and caption.
carousel : true, // enable auto scrolling through slide when the mouse is not hovering over the slider.
timer : 5000, // determine how long between each new slide in milliseconds.
forceAnim : false, // overrive the default use of jQuery.animate(). 
easing : 'swing', // easing options.
caption : true // enable image captions.
});
})

---

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