Anteriormente ya publique una pregunta del mismo tema @Alvaro Montoro me ayudo a crear una barra de progreso.
Ahora en el mismo código quiero sustituir los elementos ul
y li
que corresponden a la presentación del Slider Quiero remplazarlos por un Div
.
Ejemplo: El contenedor del Slider de Este sitio web. Si pueden observar la presentación del Slider es por medio de un
Div
tanto las imagenes por medio de unbackground-image
como el cuerpo del contenido.
A pesar de que tengo el mismo diseño el mismo efecto. Quiero remplazar los elementos ul y li por un Div que todo el contenido correspondan en la presentación por medio de un Div
.
Para ende así no mostrar las imagenes por medio de <img src="">
. Si no crear un background-image en cada Div.
Ejemplo el Slider de Este sitio web.
Código completo:
$(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);
$("#barra").animate({
width:"100%"
},
pb.settings.duration,
"linear",
pb.startSlider
);
}
pb.startSlider = function() {
$("#barra").css("width", 0);
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;
SliderInit();
}
// Funcion para controles del slider
var changePanel = function(id) {
//clearInterval(SliderInterval);
$("#barra").stop().css("width", 0);
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;
}
#barra {
position:relative;
margin-top:15px;
height:10px;
background:#00c5b9;
width:0%;
z-index:99;
}
<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 id="barra"></div>
</div><!-- End slider container -->
</div><!-- End slide -->
Espero haber sido claro, trate de cambiar los elementos ul y li pero no logre que funcionara, me ayudan a remplanzar los elementos.