Flat Slider
HTML
<div class="container">
<div id="slider">
<div class="wrapper">
<div class="slide">
<h2>Slide #1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="slide">
<h2>Slide #2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="slide">
<h2>Slide #3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="slide">
<h2>Slide #4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<nav id="slider-nav"></nav>
CSS
body {
background: #141E30;
background: linear-gradient(to left, #141E30 , #243B55);
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
.container {
width: 340px;
margin: 20% auto 4%;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
line-height: normal;
}
.wrapper {
display: block;
position: relative;
overflow: hidden;
}
/* Slider */
#slider {
max-width: 340px;
height: 200px;
margin: 0 auto;
background-color: #fff;
overflow: hidden;
}
#slider .slide {
max-width: 340px;
height: 200px;
float: left;
}
#slide-1 {
background-color: #2ecc71;
}
#slide-2 {
background-color: #3498db;
}
#slide-3 {
background-color: #34495e;
}
#slide-4 {
background-color: #F45B69;
}
#slider-nav {
display: block;
width: 340px;
margin: 0 auto 3% auto;
text-align: center;
}
#slider-nav a {
display: inline-block;
width: 12px;
height: 12px;
background-color: #bbb;
font-size: 0;
color: transparent;
overflow: hidden;
text-indent: -99px;
margin: 0 8px 0 0;
border-radius: 100%;
}
#slider-nav .active {
background-color: #3498db;
}
.slide {
color: #fff;
}
.slide p {
padding: 20px;
}
.slide h2 {
padding: 0 0 0 20px;
font-size: 18px;
font-weight: 700;
}
JAVASCRIPT
$(document).ready(function () {
var
slider = $('#slider'),
wrapper = slider.find('.wrapper'),
nav = $('#slider-nav'),
slide = wrapper.children(),
slider_length = slide.length,
slider_width = slider.width() * slider_length,
slider_height = slider.height(),
autoSlide = null;
wrapper.css({
'position': 'relative',
'width' : slider_width,
'height' : slider_height
});
slide.each(function(index) {
var i = index + 1;
nav.append('<a href="#slide-' + i + '">' + i + '</a>');
$(this).attr('id', 'slide-' + i);
});
nav.find('a').on("click", function(pos) {
nav.find('.active').removeClass('active');
$(this).addClass('active');
pos = $(this).index() * slider.width();
wrapper.animate({
left: '-' + pos + 'px'
}, 600);
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, 3000);
return false;
}).first().addClass('active');
function slideShow() {
if (nav.find('.active').next().length) {
nav.find('.active').next().trigger("click");
} else {
nav.find('a').first().trigger("click");
}
}
autoSlide = setInterval(slideShow, 3000);
});
