1

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.

Explicación

7
  • 1
    Actualmente esta pregunta incluye múltiples preguntas en una. Debería centrarse en un solo problema. el 28 nov. 2022 a las 23:54
  • La he modificado y dejado la segunda pregunta, la primera ya la solvente al final de mi pregunta. Gracias por tu respuesta
    – Miguel
    el 29 nov. 2022 a las 10:27
  • Hola, intenta explicar un poco mejor que es lo que quieres conseguir, porque hay cosas que no entiendo. ¿Donde está el servicio 1? ¿Esa es la posición del servicio activo?¿Porqué la barra solo tiene 3 posiciones cuando hay 5 servicios? Creo que si explicas un poco gráficamente lo que quieres conseguir, podría ayudarte, pero necesito entenderlo. Gracias.
    – DigiSoul
    el 29 nov. 2022 a las 10:55
  • Claro en el lado derecho hay 5 servicio y en la barra 3, es por que todo son pruebas. Voy a probar a preparar un esquema y lo subo aquí, gracias por tu respuesta @DigiSoul
    – Miguel
    el 29 nov. 2022 a las 11:33
  • Hola @DigiSoul he añadido una foto con el esquema de funcionamiento al final de la pregunta, espero sea de más ayuda
    – Miguel
    el 29 nov. 2022 a las 13:09

1 respuesta 1

3
+100

al final he tenido un momento.
Esto se puede hacer de muchas formas y más elegantemente, pero he querido mantener tu estructura html sin tocar nada ni agregar id's ni clases, así que te explico:
La idea es jugar con el html de cada contenedor, así que asumimos que lo que contenga la clase "w40" es el contenido del elemento activo y todas las clases "w33" contienen elementos del carrusel.
Partiendo de ahí, para el botón avanzar que corre todo el carrusel a la izquierda y rellena la última posición con el elemento activo, hacemos lo siguiente:

        var html_actual = $('.w40').html();
        var html_carrusel = $('.w33');
        var cantidad_carrusel = $('.w33').length - 1;
        var contador = 0;    

Nos guardamos en la variable html_actual, el html del elemento actual, en html_carrusel, guardamos un array con los elementos del carrusel actual, en cantidad_carrusel guardamos el número de elementos que hay en el carrusel y le quitamos 1 porque lo utilizaremos como valor máximo del array y por último inicializamos un contador.

            $(".w33").each(function(){
            if (contador === 0) {
                $('.w40').html($(html_carrusel[0]).html());
                $(this).html($(html_carrusel[1]).html());
            }
            if (contador > 0 && contador < cantidad_carrusel) {
                $(this).html($(html_carrusel[contador + 1]).html());                    
            }
            if (contador === cantidad_carrusel) {
                $(this).html(html_actual);
            }
            contador ++;
        });    

Ahora recorremos todos los elementos del carrusel en su orden natural y si el contador es 0 es que estamos en el primer elemento, por tanto metemos su html en el espacio del elemento seleccionado y le ponemos a este el html del elemento siguiente que hemos guardado anteriormente en el array.
Si el contador es mayor que 0 o menor que el último elemento, es decir no es el primero ni el último, le asignamos el html del elemento siguiente.
Y para finalizar, si es el último elemento, le asignamos el html del elemento seleccionado anterior, que hemos guardado en la variable html_actual. Agregamos 1 al contador y listo, hemos conseguido que todos los elementos se haya movido desde n a n-1, que el primero haya pasado al elemento activo y este al último.
El botón anterior, es básicamente lo mismo, pero con la salvedad que vamos a recorrer el carrusel al revés.

        var html_actual = $('.w40').html();
        var html_carrusel = $('.w33');
        var cantidad_carrusel = $('.w33').length - 1;
        var contador = cantidad_carrusel; 

Inicializamos las variables como en el anterior botón, pero esta vez el contador empieza con el valor máximo.

$.fn.reverse = [].reverse;

Con esta línea añadimos la función reverse al jQuery, para que nos devuelva el array con los elementos del carrusel al revés.

            $(".w33").reverse().each(function(){
            if (contador === 0) {
                $(this).html(html_actual);                  
            }
            if (contador > 0 && contador < cantidad_carrusel) {
                $(this).html($(html_carrusel[contador - 1]).html());                    
            }
            if (contador === cantidad_carrusel) {
                $('.w40').html($(this).html());
                $(this).html($(html_carrusel[contador - 1]).html());                     
            }
            contador --;
        });  

Ahora recorremos los elementos del carrusel y si el contador es 0, es el primer elemento del carrusel, pero el último que vamos a leer, por tanto simplente le asignamos el elemento activo que habíamos guardado anteriormente en la variable html_actual. Si el contador es mayor que 0 y menor que el último elemento, le asignamos el elemento que anteriormente estaba a su izquierda y si el contador es el último elemento, asignamos su contenido al elemento seleccionado y le asignamos el elemento que anteriormente tenía a su izquierda. Restamos 1 al contador y listo, hemos conseguido que el elemento seleccionado pase a primera posición, que el último pase al seleccionado y que todos los demás se hayan movido a n+1.
Te dejo el código completo en el snipet para que puedas probarlo. Ya solo te queda darle formato a los elementos para que quede "bonito". Espero haberte ayudado. Saludos.

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);
            var html_actual = $('.w40').html();
            var html_carrusel = $('.w33');
            var cantidad_carrusel = $('.w33').length - 1;
            var contador = 0;    
            $(".w33").each(function(){
                if (contador === 0) {
                    $('.w40').html($(this).html());
                    $(this).html($(html_carrusel[1]).html());
                }
                if (contador > 0 && contador < cantidad_carrusel) {
                    $(this).html($(html_carrusel[contador + 1]).html());                    
                }
                if (contador === cantidad_carrusel) {
                    $(this).html(html_actual);
                }
                contador ++;
            });    
        });
    
        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);
            var html_actual = $('.w40').html();
            var html_carrusel = $('.w33');
            var cantidad_carrusel = $('.w33').length - 1;
            var contador = cantidad_carrusel; 
            $.fn.reverse = [].reverse;
            $(".w33").reverse().each(function(){
                if (contador === 0) {
                    $(this).html(html_actual);                  
                }
                if (contador > 0 && contador < cantidad_carrusel) {
                    $(this).html($(html_carrusel[contador - 1]).html());                    
                }
                if (contador === cantidad_carrusel) {
                    $('.w40').html($(this).html());
                    $(this).html($(html_carrusel[contador - 1]).html());                     
                }
                contador --;
            });                    
        });
    
        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>

10
  • Woww que respuesta más elaborada, muchas gracias. Pero una pregunta, el elemento que esta activo tiene que tener los estilos que tiene ahora el elemento activado, es decir sin ese fondo gris, etc... Eso puede ser? @DigiSoul
    – Miguel
    el 30 nov. 2022 a las 13:23
  • El fondo gris sale porque estamos copiando todo el html que hay en el elemento del carrusel al elemento activo y obviamente sale igual. La clase que tiene el fondo gris es "fondo-servicios", si quieres quitarla, después de mover el elemento del carrusel al activo, puedes hacer esto $(".w40").html().replace('fondo-servicios','nada');, con lo que estás cambiando esa clase, por la clase "nada". Después tienes que hacer la inversa antes de mover el elemento activo al carrusel. Pero esto ya es otro tema que compete más a css que a javascript.
    – DigiSoul
    el 30 nov. 2022 a las 15:49
  • Lo del fondo gris es un ejemplo, si te das cuenta el elemento activo tiene unos estilos totalmente diferentes, además de que contienen más texto, botón, etc... Es posible hacer que el que este ahí tenga esos estilos? @DigiSoul
    – Miguel
    el 30 nov. 2022 a las 16:23
  • Por supuesto, puedes hacer lo que quieras, pero primero tienes que saber lo que quieres hacer, porque ahora mismo los del carrusel no se parecen en nada al seleccionado, ni siquiera tienen enlaces.
    – DigiSoul
    el 30 nov. 2022 a las 16:59
  • Y me puedes guiar un poco, la idea la tengo clara desde un principio @DigiSoul
    – Miguel
    el 30 nov. 2022 a las 17:02

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.