ddHeroSlider

ddHeroSlider is a responsive Susy slider with simple jQuery. Includes caret and image pagination.

• Built with Susy framework
• Responsive slider
• lightweight

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE JS AND CSS FILES

<script src="js/modernizr.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/ddHeroSlider.js"></script>
<link rel="stylesheet" href="css/app-min.css" />

2. HTML

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