Actualmente estoy empezando en esto de JavaScript y pues e decidido usar JQuery para hacer un slider, sin embargo, al agregarle al elemento la propiedad $('.fondo').show(); solo me avanza un puesto en dicha posición de imagen y no me muestra las 3 imágenes que deseo mostrar cada que le de clic a el botón con que deseo mostrarlo, pero... si le quito el .hide del final si me muestra las 3, de que manera puedo hacer que me muestre las 3 pero que 1 no se ponga debajo de la otra.
Adjunto HTML:
<div class="grande">
<header id="header" class="header fondo bg1">
<div class="botones">
<button id="prev" ><i class="fas fa-chevron-left"></i></button>
<button id="next" class="active"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="text-white text-center do">
<h2>TO TRAVEL IS TO LIVE</h2>
<h5>You dont need Magic to Dissapear, all you need is a destination</h5>
<div class="ibfo mt-4">
<button type="button" class="btn ds">SHOW ON THE MAP</button>
<button type="button" class="btn ">MORE INFO</button>
</div>
</div>
</header>
<header id="header" class="header fondo bg2">
<div class="botones">
<button id="prev" ><i class="fas fa-chevron-left"></i></button>
<button id="next" class="active"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="text-white text-center do">
<h2>TO TRAVEL IS TO LIVE</h2>
<h5>You dont need Magic to Dissapear, all you need is a destination</h5>
<div class="ibfo mt-4">
<button type="button" class="btn ds">SHOW ON THE MAP</button>
<button type="button" class="btn ">MORE INFO</button>
</div>
</div>
</header>
<header id="header" class="header fondo bg3">
<div class="botones">
<button id="prev" ><i class="fas fa-chevron-left"></i></button>
<button id="next" class="active"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="text-white text-center do">
<h2>TO TRAVEL IS TO LIVE</h2>
<h5>You dont need Magic to Dissapear, all you need is a destination</h5>
<div class="ibfo mt-4">
<button type="button" class="btn ds">SHOW ON THE MAP</button>
<button type="button" class="btn ">MORE INFO</button>
</div>
</div>
</header>
JavaScript:
$(document).ready(function () {
var prev = $("#prev");
var next = $("#next");
$('.bg2').hide();
$('.bg3').hide();
var items = $('.fondo').length;
var pocisiondeI = 1;
next.click(function () {
nez()
});
function nez() {
if (pocisiondeI >= 5) {
pocisiondeI = 1;
}else{
pocisiondeI++;
}
$('.fondo').hide();
$('.fondo:nth-child('+ pocisiondeI +')').show();
console.log(pocisiondeI);
};
});
Ese dos es el número del slider que se muestra con el console.log
del final de mi código de JS.