Manual Content Slider with autorotation

by rjasoriano

HTML

<div class="slider">
    <div class="slide"><img src="http://placehold.it/800x350/&text=SLIDE+1"></div>
    <div class="slide"><img src="http://placehold.it/800x350/&text=SLIDE+2"></div>
    <div class="slide"><img src="http://placehold.it/800x350/&text=SLIDE+3"></div>
    <div class="slide"><img src="http://placehold.it/800x350/&text=SLIDE+4"></div>
</div>
<ul class="slider-nav">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>
<ul class="slider-nav-dot">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>
<div class="clear"></div>

CSS

.clear {
    clear:both;
}
.wrapper {
    width:100%;
    margin:0 auto;
}
.slider {
    margin:20px 0;
    height:350px;
    position:relative;
}
.slider .slide {
    display:none;
    position:absolute;
    height:350px;
    width:100%;
    text-align:center;
    color:#fff;
    font-size:24pt;
}
.slider .slide img{
    width:100%;
}
}
.header {
    background:#eee;
    font-size:18pt;
}
.content {
}
.footer {
    background:#eee;
    text-align:center;
}
.slider-nav {
    margin: 0 auto;
    width:100%;
    clear:both;
    text-align:center;
}
.slider-nav li {
    display:inline-block;
    margin:0 5px;
}
.slider-nav-dot {
    margin: 10px auto;
    width:100%;
    clear:both;
    text-align:center;
}
.slider-nav-dot li {
    display:inline-block;
    margin:0 2px;
}
.slider-nav-dot li a {
    display:block;
    width:20px;
    height:20px;
    background-repeat:no-repeat;
    background-position: 0 0;
    background-size:20px auto;
   ...

JavaScript

$('.slider .slide:first').addClass('active').fadeIn(200);
$('.slider-nav li:first').addClass('active');
$('.slider-nav-dot li:first').addClass('active');

function rotate(index) {
    $('.slider-nav li.active').removeClass('active');
    $('.slider-nav-dot li.active').removeClass('active');
    $('.slider .slide.active').removeClass('active').fadeOut(200, function () {
        $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
        $('.slider-nav li:eq(' + index + ')').addClass('active');
        $('.slider-nav-dot li:eq(' + index + ')').addClass('active');
    });
}

$('.slider-nav li a').click(function () {
    var index = $(this).parent('li').index();
    rotate(index);
    return false;
});

$('.slider-nav-dot li a').click(function () {
    var index = $(this).parent('li').index();
    rotate(index);
    return false;
});

setInterval(function () {
    var $next = $('.slider .slide.active').next();

    if ($next.length == 0) $next = $('.slider .slide:first');

    rotate($next.index());
}, 5000);