Very Simple Slider

HTML Code :
———————————–
<section class=”demo”>
<button class=”next”>Next</button>
<button class=”prev”>Previous</button>

 <section class=”container”>
<section style=”display: inline-block;”>Slider Images</section>
<section>Slider Images</section>
<section>Slider Images</section>
<section>Slider Images</section>
<section>Slider Images</section>
</section>

CSS :
———————————–
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}

button {
position: absolute;
}

.next {
right: 5px;
}

.prev {
left: 5px;
}

Jquery :
———————————–

var currentIndex = 0,
items = $(‘.container section’),
itemAmt = items.length;

<!– display current slider –>
function cycleItems() {
var item = $(‘.container section’).eq(currentIndex);
items.hide();
//item.css(‘display’,’inline-block’);
item.fadeIn();
}

<!– Auto Slide –>
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt – 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);

<!– Next Button –>
$(‘.next’).click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt – 1) {
currentIndex = 0;
}
cycleItems();
});

<!– Prev Button –>
$(‘.prev’).click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt – 1;
}
cycleItems();

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s