TransWikia.com

Mostrar todos los elementos de un slider

Stack Overflow en español Asked on December 11, 2020

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.

Ese dos es el numero del slider que se muestra con el console.log del final de mi código de js

javascriptjquery

One Answer

Tienes varios elementos con el mismo ID. Por ejemplo, la siguiente línea solo afectará al primero de los botones:

var next = $("#next");

Por consiguiente, tu función de [click] no aplicará a los 3 botones sino solamente al primero.

Es recomendable que utilices un solo código del [header /header] y que, a partir del click que realices tanto en {prev} como en {next} en el Jquery hagas el cambio de imagen. Algo como esto:

HTML:

<div class="grande">
    <header id="header" class="header fondo imgchange">
        <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>
</div>

Jquery:

$(document).ready(function () {
    // Array que contiene las imágenes a mostrar con sus rutas respectivas
    var img_bg = new Array("img/img1.png", "img/img2.png", "img/img3.png");

    // Variable que sirve que control para saber cuál es la imagen a mostrar
    var imgpos = 0;

    var prev = $("#prev");
    var next = $("#next");

    // No hay imagen de fondo. Se asigna la primera imagen al div que contiene
    // la clase imgchange.
    // Nótese que el primer elemento del array comienza con cero
    $('.imgchange').css("background", "url('" + img_bg[0] + "')");

    // Al hacer click en prev
    prev.click(function () { 
        // Utilizamos un operador ternario para actualizar cual será la imagen
        // a mostrar. Se utiliza un decremento en 1 hasta que llegue al primer             
        // elemento del array img_bg. 
        imgpos = imgpos > 0 ? --imgpos : 2;
        nez(imgpos);
    });

    // Al hacer click en next
    next.click(function () { 
        // Mismo caso que en prev pero con un incremento en 1.
        imgpos = imgpos < 2 ? imgpos++ : 0;
        nez(imgpos);
    });

    function nez(imgpos) {
        // Asigna la imagen del array de acuerdo a la posicion actual de imgpos
        var image = img_bg[imgpos];

        // Cambia el fondo del div
        $('.imgchange').css("background", "url('" + image + "')");
    }       
}

Correct answer by mcalonga on December 11, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP