Estoy intentando programar este slider pero hay cosas que no se como ejecutar.
El servicio que está a la izquierda es el activo, si avanzo la proxima tarjeta se tiene que poner como el diseño del primer servicio y así consecutivamente. Es decir se tienen que ir deslizando hacia delante o hacia atrás.
Estoy haciendo pruebas, no seais malos con mi código.
Además de lo que necesito que no se como hacer, tiene que seguir pasando lo que pasa ahora, se cambia el fondo, se cambia el número de slider que estoy viendo y la barra crece o mengua.
window.addEventListener('load', () => {
// initial slide
let slide = 1;
// total slides
let slides = document.querySelectorAll(".carrouselImages .slid");
total = slides.length;
var tamanoBarra = 100/total;
var numero = tamanoBarra;
$('.barraInt').css("width", numero+"%");
// show first side
showSlide(1);
next = document.querySelector(".next");
prev = document.querySelector(".prev")
next.addEventListener('click', (evt) => {
evt.preventDefault();
slide++;
if (slide > total){
slide = 1;
numero = tamanoBarra;
$('.barraInt').css("width", numero+"%");
$('#numeroSlid').html(slide);
}else{
$('#numeroSlid').html(slide);
numero = numero + tamanoBarra;
$('.barraInt').css("width", numero+"%");
}
showSlide(slide);
})
prev.addEventListener("click", (evt) => {
evt.preventDefault();
slide--;
if (slide < 1) {
slide = total;
numero = 100;
$('.barraInt').css("width", numero+"%");
$('#numeroSlid').html(slide);
console.log("ahora");
}else{
$('#numeroSlid').html(slide);
numero = numero - tamanoBarra;
$('.barraInt').css("width", numero+"%");
}
showSlide(slide);
})
function showSlide(n) {
n--; // decrement 1
for (i = 0; i < slides.length; i++) {
(i == n) ? slides[n].style.display = "block" : slides[i].style.display = "none";
}
}
})
.slider_home {
height: 100vh;
overflow: hidden;
position: relative;
}
.slider_home:before {
position: absolute;
left: 0;
right: 0;
bottom: 0px;
/* bottom: 0; */
margin: auto;
/* height: 29%; */
height: 310px;
width: 100%;
background-image: -webkit-linear-gradient(bottom, #0F0F0F 0, rgba(255, 255, 255, 0.00) 96%);
background-image: -o-linear-gradient(bottom, #0F0F0F 0, rgba(255, 255, 255, 0.00) 96%);
background-image: linear-gradient(to top, #0F0F0F 0%, rgb(255 255 255 / 0%) 75%);
z-index: 1;
content: '';
}
#overlay {
background-color: #000000;
opacity: 0.58;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
width: 100%;
height: 100%;
z-index: 0;
position: absolute;
bottom: 0px;
left: 0px;
}
.he100 {
height: 100%;
}
.carrouselImages .slid {
animation-name: fade;
animation-duration: 1s;
}
.images_slider {
object-fit: cover;
font-family: "object-fit: cover;";
width: 100%;
height: 100%;
}
.zona_slider {
position: absolute;
width: 100%;
margin: 0 auto;
bottom: 10%;
padding: 0px 50px;
padding-right: 0px;
z-index: 1;
}
.w40 {
width: 37%;
margin: 0px 15px;
}
.barra_decora {
width: 60px;
height: 8px;
background: #EDE201;
border-radius: 10px;
margin-bottom: 15px;
}
.zona_slider h3 {
font-size: 16px;
font-weight: 400;
}
.zona_slider h2 {
font-weight: 900;
font-size: 3.4rem;
margin-bottom: 10px;
}
.zona_slider p {
font-size: 16px;
font-weight: 400;
}
.zona_slider a {
font-size: 13px;
color: #ede23c;
font-weight: 500;
border: solid 1px;
padding: 10px 17px;
border-radius: 20px;
margin-top: 10px;
display: inline-flex;
}
.w59 {
width: 59.2%;
margin: 0px 15px;
margin-right: 0px;
}
.grid-servicios {
position: relative;
margin: 0;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.w33 {
width: 33.3%;
margin: 0px 5px;
display: inline-block;
}
.fondo_servicios {
background: #201F1F;
padding: 19px;
border-radius: 20px;
white-space: initial;
}
.hueco_img {
height: 168px;
}
.tit_servicio {
font-size: 17px;
font-weight: 700;
color: #ede23c;
margin-bottom: 8px;
}
.exp_servicio {
font-size: 15px;
font-weight: 400;
color: #dadada;
}
.indicador {
margin-top: 22px;
}
.ico_cambia {
font-size: 30px;
}
.tama_barra {
width: 80%;
}
.barraInf {
background: #201F1F;
height: 10px;
position: relative;
top: 11px;
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.barraInt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
text-align: center;
background-color: #ede23c;
transition: width .6s ease;
}
.numberSlid {
font-weight: 700;
color: #ede23c;
font-size: 32px;
position: relative;
top: -8px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="slider_home">
<div id="overlay"></div>
<div class="carrouselImages he100">
<div class="slid he100">
<img src="https://www.lifeder.com/wp-content/uploads/2019/07/dice-1264058_640.jpg" alt="" class="images_slider">
</div>
<div class="slid he100">
<img src="https://img.europapress.es/fotoweb/fotonoticia_20220201103236_420.jpg" alt="" class="images_slider">
</div>
<div class="slid he100">
<img src="https://definicion.de/wp-content/uploads/2015/03/variable-aleatoria.jpg" alt="" class="images_slider">
</div>
<div class="slid he100">
<img src="https://fondosmil.com/fondo/21960.jpg" alt="" class="images_slider">
</div>
<div class="slid he100">
<img src="https://lh3.googleusercontent.com/tr3PPRZVtKKhQAZAHVFxhYhPwjtHI9LAIF2Xe3_SpWmjRz6x-LLUOIcVSuBTuayG54g" alt="" class="images_slider">
</div>
</div>
<div class="zona_slider row">
<div class="w40">
<div class="barra_decora"></div>
<h3>Servicio 1</h3>
<h2>Titulo1</h2>
<p>Descripción 1</p>
<a href="">CONOCER MÁS</a>
</div>
<div class="w59">
<div class="grid-servicios">
<div class="w33">
<div class="fondo_servicios">
<div class="hueco_img"></div>
<div class="tit_servicio">Servicio 2</div>
<div class="exp_servicio">Descipción 2</div>
</div>
</div>
<div class="w33">
<div class="fondo_servicios">
<div class="hueco_img"></div>
<div class="tit_servicio">Servicio 3</div>
<div class="exp_servicio">Descripción 3</div>
</div>
</div>
<div class="w33">
<div class="fondo_servicios">
<div class="hueco_img"></div>
<div class="tit_servicio">Servicio 4</div>
<div class="exp_servicio">Descipción 4</div>
</div>
</div>
<div class="w33">
<div class="fondo_servicios">
<div class="hueco_img"></div>
<div class="tit_servicio">Servicio 5</div>
<div class="exp_servicio">Descripción 5</div>
</div>
</div>
</div>
<div class="indicador">
<div class="d-flex">
<div class="p-2">
<i class="far fa-arrow-alt-circle-left ico_cambia prev"></i>
<i class="far fa-arrow-alt-circle-right ico_cambia next"></i>
</div>
<div class="p-2 tama_barra">
<div class="barraInf">
<div class="barraInt" style="width: 0%;"></div>
</div>
</div>
<div class="p-2">
<div class="numberSlid">0<span id="numeroSlid">1</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
Adjunto esquema del funcionamiento.