0

Estoy trabajando con html, css y js creando una página personalizada. Resulta que el slide principal dejo de funcionar, pero lo extraño es que no muestra el error al inspeccionar elemento en js, los bullets tampoco funcionan si hago click en uno de ellos.

Este es el código del carousel:

<div class="profundo carousel fade-carousel slide" data-ride="carousel" data-interval="3000" id="bs-carousel">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <img class="logo" src="img/logo-blanco-home.png" alt="">
                </div>
                <div class="col-12 text-right">
                    <img class="siguiente" src="img/siguiente.png" alt="Aproblemados">
                </div>
            </div>
        </div>
        <!-- Overlay -->
        <div class="overlay"></div>

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#bs-carousel" data-slide-to="1"></li>
            <li data-target="#bs-carousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item slides active">
                <div class="slide-1"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 1</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <a href="#contacto" class="btn btn-hero btn-lg">Contáctanos</a><br>
                        <img src="img/escritorio/mouse.png" alt="Aproblemados">
                    </div>
                </div>
            </div>
            <div class="item slides">
                <div class="slide-2"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 2</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <button class="btn btn-hero btn-lg" role="button">Contáctanos</button><br>
                        <img src="img/escritorio/mouse.png" alt="Aproblemados">
                    </div>
                </div>
            </div>
            <div class="item slides">
                <div class="slide-3"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 3</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <button class="btn btn-hero btn-lg" role="button">Contáctanos</button><br>
                        <img src="img/escritorio/mouse.png" alt="Aproblemados">
                    </div>
                </div>
            </div>
        </div>
    </div>

Les comparto la url para que puedan ver de lo que les hablo:

https://marketadvisor.cl/aproblemados/

La pregunta es, que me falta para que el slide funcione ?

3 respuestas 3

1

Examinando un poco tu código desde la terminal. Me he dado cuenta que no tienes los archivos para tu carousel, o quizá yo no lo hallé, asegurate de estar incluyendo los archivos css y js del carousel que estás intentando hacer funcionar.

1

Estás usando mal la clase carousel-item, pues has puesto item a secas en su lugar.

En bootstrap 4 se usa carousel-item. En bootstrap 3 se usa item, y tu estás usando la versión 4.6 en tu web.

Por lo tanto, busca item y modificalo por carousel-item y empezará a funcionarte bien.

Aquí te dejo un snippet funcionando con tu código y ese cambio que acabo de decir:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>


<div class="profundo carousel fade-carousel slide" data-ride="carousel" data-interval="3000" id="bs-carousel">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <img class="logo" src="img/logo-blanco-home.png" alt="">
                </div>
                <div class="col-12 text-right">
                    <img class="siguiente" src="img/siguiente.png" alt="Aproblemados">
                </div>
            </div>
        </div>
        <!-- Overlay -->
        <div class="overlay"></div>

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#bs-carousel" data-slide-to="1"></li>
            <li data-target="#bs-carousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="carousel-item slides active">
                <div class="slide-1"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 1</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <a href="#contacto" class="btn btn-hero btn-lg">Contáctanos</a><br>
                        <img src="img/escritorio/mouse.png" alt="Aproblemados">
                    </div>
                </div>
            </div>
            <div class="carousel-item slides">
                <div class="slide-2"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 2</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <button class="btn btn-hero btn-lg" role="button">Contáctanos</button><br>
                        <img src="img/escritorio/mouse.png" alt="Aproblemados">
                    </div>
                </div>
            </div>
            <div class="carousel-item slides">
                <div class="slide-3"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 3</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <button class="btn btn-hero btn-lg" role="button">Contáctanos</button><br>
                        <img src="img/escritorio/mouse.png" alt="Aproblemados">
                    </div>
                </div>
            </div>
        </div>
    </div>

1

Si estas usando bootstrap 4, cambia estas clases de estilo "item slides" por carousel-item y asegúrate de agregar las referencias.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://marketadvisor.cl/aproblemados/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="carousel slide" data-ride="carousel" data-interval="3000" id="bs-carousel">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <img class="logo" src="img/logo-blanco-home.png" alt="">
                </div>
                <div class="col-12 text-right">
                    <img class="siguiente" src="img/siguiente.png" alt="Aproblemados">
                </div>
            </div>
        </div>
        <!-- Overlay -->
        <div class="overlay"></div>

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#bs-carousel" data-slide-to="1"></li>
            <li data-target="#bs-carousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="slide-1"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 1</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <a href="#contacto" class="btn btn-hero btn-lg">Contáctanos</a><br>
                        <img src="https://marketadvisor.cl/aproblemados/img/escritorio/persona-natural.png" alt="Aproblemados">
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="slide-2"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 2</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <button class="btn btn-hero btn-lg" role="button">Contáctanos</button><br>
                        <img src="https://html.com/wp-content/uploads/flamingo.webp" alt="Aproblemados">
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="slide-3"></div>
                <div class="hero">
                    <hgroup>
                        <h1>Que no sea DEMASIADO TARDE 3</h1>
                        <h3>Te asesoramos con tus problemas legales</h3>
                    </hgroup>
                    <div class="btn-slide text-center">
                        <button class="btn btn-hero btn-lg" role="button">Contáctanos</button><br>
                        <img src="https://marketadvisor.cl/aproblemados/img/escritorio/servicio-empresa.png" alt="Aproblemados">
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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