Quiero crear una animación, una barra de progreso calculando la duration
del Slider.
Similar al Slider de presentación de este sitio web: http://themeinthebox.com/demo/color/
Si es posible optimizar el código jQuery del slider, solo si es posible.
$(function() {
var SliderModule = (function() {
var pb = {};
pb.el = $('#slider');
pb.items = {
panel: pb.el.find('li')
}
// Variables Necesarias
var SliderInterval,
currentSlider = 0,
nextSlider = 1,
lengthSlider = pb.items.panel.length;
// Initialize
pb.init = function(settings) {
this.settings = settings || {duration: 8000}
var output = '';
// Activamos nuestro slider
SliderInit();
for(var i = 0; i < lengthSlider; i++) {
if (i == 0) {
output += '<li class="active"></li>';
} else {
output += '<li></li>';
}
}
// Controles del Slider
$('#slider-controls').html(output).on('click', 'li', function (e){
var $this = $(this);
if (currentSlider !== $this.index()) {
changePanel($this.index());
};
});
}
var SliderInit = function() {
SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
}
pb.startSlider = function() {
var panels = pb.items.panel,
controls = $('#slider-controls li');
if (nextSlider >= lengthSlider) {
nextSlider = 0;
currentSlider = lengthSlider-1;
}
// Efectos
controls.removeClass('active').eq(nextSlider).addClass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(nextSlider).fadeIn('slow');
// Actualizamos nuestros datos
currentSlider = nextSlider;
nextSlider += 1;
}
// Funcion para controles del slider
var changePanel = function(id) {
clearInterval(SliderInterval);
var panels = pb.items.panel,
controls = $('#slider-controls li');
// Comprobamos el ID
if (id >= lengthSlider) {
id = 0;
} else if (id < 0) {
id = lengthSlider-1;
}
// Efectos
controls.removeClass('active').eq(id).addClass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(id).fadeIn('slow');
// Actualizamos nuestros datos
currentSlider = id;
nextSlider = id+1;
// Reactivamos el slider
SliderInit();
}
return pb;
}());
SliderModule.init({duration: 4000});
});
/*!
* @Design slider
*/
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
img {
height: auto;
max-width: 100%;
}
ul li {
list-style-type: none;
}
.slider-container{
width:779px;
height:448px;
margin: 0 auto;
background-color:#FFF;
}
.slider-wrapper {
position: relative;
z-index: 90;
height: 360px;
width: 100%;
}
.slider-wrapper li {
display: none;
}
li.slide-current {
display: block;
}
.slider-wrapper li img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}
.slider-controls {
text-align: center;
margin-top: -125px;
position: relative;
z-index: 90;
}
.slider-controls li {
background: #415066;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
height: 12px;
width: 12px;
margin: 0 4px;
cursor: pointer;
}
.slider-controls li.active {
background: #00c5b9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"><!-- Root slide -->
<div class="slider-container"><!-- Root slider container -->
<ul id="slider" class="slider-wrapper">
<li class="slide-current">
<img src="http://themeinthebox.com/demo/color/images/slider/bg1.jpg" alt="" /></li>
<li><img src="http://themeinthebox.com/demo/color/images/slider/bg2.jpg" alt="" /></li>
<li><img src="http://themeinthebox.com/demo/color/images/slider/bg3.jpg" alt="" /></li>
</ul>
<ul id="slider-controls" class="slider-controls"></ul>
</div><!-- End slider container -->
</div><!-- End slide -->