1

estoy queriendo hacer un slider y sigo los pasos pero no me sale el tema de la función de las flechas que deberían pasar a la siguiente imagen, supongo debe ser un tema de JQUERY.

No me funciona ni siquiera los que incluyen CDN, no sé qué pasa.

Si pudieran pasarme el código de JQUERY para realizar tal función se los agradecería, supongo debe ser algo que incluya el "add Event Listener" pero no me salió. Agrego captura de lo que muestra la consola. introducir la descripción de la imagen aquí

Les muestro el código que estoy probando ahora, a ver si hay algo mal. Muchas Gracias.

$(document).ready(function(){

  $('next').on('click', function(){
    
    var currentImg = $('.active');
    var nextImg = currentImg.next();

    if(nextImg.length){
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10);
    }
  });
    
});
*{
    margin: 0px;
    padding: 0px;
}

.clearfix{
    float: none;
    clear: both;
}
#global{
    width: 65%;
    margin: 0px auto;
    margin-top: 30px;
    padding: 25px;
    background: white;
    box-shadow: 0px 0px 50px gray;
}
.container{
    width: 540px;
    margin: 40px auto;
    overflow: auto;
}

.slider-inner{
    width: 500px;
    height: 300px;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 3px;
    border: #666 solid 1px;
}

.slider-inner img{
    display: none;
    width: 500px;
    height: 300px;
}
.slider-inner img.active{
    display: inline-block;
}

.prev,.next{
    float: left;
    margin-top: 130px;
    cursor: pointer;
}

.prev{
    position: relative;
    margin-right: 45px;
    z-index: 100;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        
        <!-- JQUERY Y CSS -->        
        <script type="text/javascipt" src="js/jquery-3.6.0.min.js"></script>
        <link rel="stylesheet" href="css/styles.css">
        <script type="text/javascipt" src="js/main.js"></script>
        <title>Proyecto con Javascript</title>
               
        
    </head>
    <body>
        <section id="global">
            <!--CABECERA PARTE SUPERIOR-->
            <header>
                <div id="logo">
                    <h1>PROYECTO JS</h1>
                </div>

                <div class="clearfix"></div>
            </header>
            
            <!-- SLIDER -->
            <div class="container">
            
                <div class="slider-outer">
                    <a href="" class="prev" alt="prev">&#10094;</a>
                    <div class="slider-inner">
                        <img src="img/cielo.jpg" class="active">
                        <img src="img/hojas.jpg">
                        <img src="img/rojo.jpg">
                    </div>
                    <a href="#" class="next" alt="next">&#10095;</p>
                </div>
            </div>
                
            <div class="clearfix"></div>
            
        </section>
    </body>
</html>

4
  • Sieria mejor que pusieras el por que no te funciona, poner un error de la consola, para así saber que esta fallando. Además donde esta la clase active? En css
    – Christian
    Commented el 17 mar. 2021 a las 18:49
  • El selector $('next') es incorrecto, porque jQuery va a buscar una etiqueta <next>. Si estás usando ID, debería ser $('#next') y, si es clase, entonces $('.next')
    – Triby
    Commented el 17 mar. 2021 a las 18:58
  • Hola @christian. Ahí puse una captura de la consola, eso es lo que muestra. La clase active, según un tutorial, la puse en <img src="img/cielo.jpg" class="active"> en html y .slider-inner img.active{ display: inline-block; } en JAVASCRIPT
    – 1992x c
    Commented el 17 mar. 2021 a las 19:29
  • Hola, @Triby gracias por el detalle de la clase. Igualmente sigue sin funcionar. Según dice en el tutorial el "var nextImg = currentImg.next();" ese ".next();" sería una propiedad predefinida de jquery. :/
    – 1992x c
    Commented el 17 mar. 2021 a las 19:33

1 respuesta 1

1

Sí funciona al especificar correctamente la clase y asegurar que se está cargando jQuery:

$(document).ready(function() {
  // Selector por clase
  $('.next').on('click', function(){
    
    let currentImg = $('.active');
    let nextImg = currentImg.next();

    if(nextImg.length){
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10);
    }
  });
    
});
*{
    margin: 0px;
    padding: 0px;
}

.clearfix{
    float: none;
    clear: both;
}
#global{
    width: 65%;
    margin: 0px auto;
    margin-top: 30px;
    padding: 25px;
    background: white;
    box-shadow: 0px 0px 50px gray;
}
.container{
    width: 540px;
    margin: 40px auto;
    overflow: auto;
}

.slider-inner{
    width: 500px;
    height: 300px;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 3px;
    border: #666 solid 1px;
}

.slider-inner img{
    display: none;
    width: 500px;
    height: 300px;
}
.slider-inner img.active{
    display: inline-block;
}

.prev,.next{
    float: left;
    margin-top: 130px;
    cursor: pointer;
}

.prev{
    position: relative;
    margin-right: 45px;
    z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="global">
            <!--CABECERA PARTE SUPERIOR-->
            <header>
                <div id="logo">
                    <h1>PROYECTO JS</h1>
                </div>

                <div class="clearfix"></div>
            </header>
            
            <!-- SLIDER -->
            <div class="container">
            
                <div class="slider-outer">
                    <a href="" class="prev" alt="prev">&#10094;</a>
                    <div class="slider-inner">
                        <img src="https://images.unsplash.com/photo-1525598912003-663126343e1f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8cGhvbmV8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="active">
                        <img src="https://images.unsplash.com/photo-1534536281715-e28d76689b4d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTJ8fHBob25lfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
                        <img src="https://images.unsplash.com/photo-1584438784894-089d6a62b8fa?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8cGhvbmV8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <a href="#" class="next" alt="next">&#10095;</p>
                </div>
            </div>
                
            <div class="clearfix"></div>
            
        </section>

1
  • Aiii Gracias!! lo probé y funciona. Hace tres días vengo con esto, ahora puedo continuar con el curso Gracias!!
    – 1992x c
    Commented el 17 mar. 2021 a las 20:25

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.