Responsive Image Slider Plugin with Arrow & Image Navigation - ddHeroSlider

ddHeroSlider is a simple, easy-to-use jQuery plugin for creating a fully responsive image slider/slideshow with image cross-fade transition and arrows navigation.

How to use it:

1. Load the required modernizr.js and app-min.css in the head section of your web page.

<script src="js/modernizr.js"></script>
<link rel="stylesheet" href="css/app-min.css">

2. Load the jQuery javascript library and the jQuery ddHeroSlider plugin at the bottom of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/ddHeroSlider.js"></script>

3. Create an image slider with navigation following the Html structure like this.

<div class="module module-hero indexed-slideshow-wrapper">
  <div class="inner-container">
    <div class="floatcontainer"> <a href="#" class="hero-arrow-right icon" ></a> </div>
    <div class="hero-show">
      <div class="slideshow-idx-container hero-slide active" data-slide="firstSlide">
        <div class="content">
          <div class="main-block block-link style-schwab">
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
          </div>
        </div>
        <div class="fullbg small-stacked" > <img src="http://lorempixel.com/g/1000/600/business/1"/> </div>
      </div>
      <div class="slideshow-idx-container hero-slide" data-slide="secondSlide">
        <div class="content">
          <div class="main-block block-link style-schwab">
            <h3>Lorem ipsum dolor sit amet.</h3>
          </div>
        </div>
        <div class="fullbg small-stacked" > <img src="http://lorempixel.com/g/1000/600/business/2"/> </div>
      </div>
      <div class="slideshow-idx-container hero-slide" data-slide="thirdSlide">
        <div class="content">
          <div class="main-block block-link style-schwab">
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</h3>
          </div>
        </div>
        <div class="fullbg small-stacked" > <img src="http://lorempixel.com/g/1000/600/business/3"/> </div>
      </div>
      <div class="slideshow-idx-container hero-slide" data-slide="fourthSlide">
        <div class="content">
          <div class="main-block block-link style-schwab">
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h3>
          </div>
        </div>
        <div class="fullbg small-stacked" > <img src="http://lorempixel.com/g/1000/600/business/4"/> </div>
      </div>
      <div class="content slideshow-idx">
        <div class="boxes"> <a class="box hero-pagination active" data-link="firstSlide"> <span>Slide 1</span> </a> <a class="box hero-pagination" data-link="secondSlide"> <span>Slide 2</span> </a> <a class="box hero-pagination" data-link="thirdSlide"> <span>Slide 3</span> </a> <a class="box hero-pagination" data-link="fourthSlide"> <span>Slide 4</span> </a> </div>
      </div>
    </div>
  </div>
</div>

---

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