1

Agregar los botones para mover las tarjetas con Scroll desde JavaScript

Este es el resultado visualmente
resultado.PNG

Para realizar esto agregué un par de lineas en el código original

Primero, dentro del archivo index.html nos ubicamos en la sección siguiente (esta sección se realizo durante el curso)

 <section class="plans-container--slider">
		<!--Aqui tenemos las tres tarjetas  "articles" correspondientes a los planes --></section>

Justo debajo de esta sección agregue las siguientes lineas de código

 <section class="botones">
                <button class="scroll-button" onclick="scrollLeftNx()" id="bLess"><</button>
                <button class="scroll-button" onclick="scrollRightNx()" id="bMore">></button>
 </section>

Como pueden ver solo son dos botones a los que agregue la misma clase, una **llamada **a una función que ya veremos dentro del **script **y un **Id **que nos permitirá ocultar los botones cuando no sean necesarios, es decir, cuando se visualicen las tres tarjetas en la pantalla.

Aplico los estilos siguientes dentro del archivo principal CSS

Para empezar solo agregue una linea extra en la clase siguiente con el fin de centrar las tarjetas.

.plans-container--slider {
    display: flex;
    height: 316px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin: 050px; /*Esta linea es nueva y necesaria para logar el resultado visual de la imagen */
}

Posteriormente agregué los estilos de los botones y modifique su posición

.botones {
    display: flex;
    align-items: center;
    justify-content: space-between;/*manda los botones al extremo de la pantalla*/
}

.main-plans--container.scroll-button {
    position: relative;
    top: -175px;
    width: 50px;
    padding: 0px2px;
    font-weight: bold;
    font-size: 4rem;
    font-family: sans-serif;
    color: var(--grey);
    border: none;
    border-radius: 50%;
    background-color: var(--just-white);
    box-shadow: 04px3pxrgba(0, 0, 0, 0.16);
    cursor: pointer;
}

Esto sería todo para la sección de estilos, a continuación la parte de JavaScript.

Es necesario crear un archivo Js en su carpeta de trabajo y linkearlo desde el html debajo de la etiqueta footer, que aún se encuentra denro del body. En mi caso mi archivo se llama script.js

2js.PNG
</footer><scriptsrc="./script.Js"></script></body>

Antes de pasar al archivo Js también añadí un par de código a algunas secciones para que pudieran interactuar con Javascript que son las siguientes:

<article class="plans-container--card"id="main_tarjeta">

En este caso solo agregue un id con el fin de obtener su ancho desde JavaScript y con esto hacer algunos cálculos.

También hay una etiqueta que necesitaba tener un id para trabajar con JavaScript

<section class="plans-container--slider"id="seccion_scroleable">

Con un Id en esta sección obtengo el ancho y ademas realizo la funcion de scroll desde JavaScript
y por ultimo

<body onresize="checkButtonsNecesity()">

En el body agrego una llamada a una función encargada de mostrar los botones u ocultarlos cuando ya se muestran todas las tarjetas en pantalla. Es algo similar a un @media

El código que utilice dentro del script es el siguiente

var mover = document.getElementById('seccion_scroleable');//Esta es la sección que contiene las tarjetasvar anchoTarjeta = document.getElementById('main_tarjeta').clientWidth; //Obtengo el ancho de la tarjeta principal que en realidad es el mismo para las tresvar buttonLeft = document.getElementById('bLess');//traigo los botones al scriptvar buttonRight = document.getElementById('bMore');

console.log(anchoTarjeta); //Muestra el ancho en px de la tarjeta functioncheckButtonsNecesity() {
    if ((anchoTarjeta * 3 + 20) < mover.clientWidth) {
        console.warn("Botones innecesarios");//Muestra en consola un mensaje
        buttonLeft.style.display = "none"; //Oculto los botones en caso de visualizar las tres tarjetas 
        buttonRight.style.display = "none";
    } else {
        console.warn("Botones necesarios");//Muestra en consola un mensaje
        buttonLeft.style.display = "block";//Muestra los botones en n caso que no se muestren 
        buttonRight.style.display = "block";//las tres tarjetas en pantalla
    }

}
checkButtonsNecesity();
mover.scroll(anchoTarjeta, 0); /*haciendo un scroll a la tarjeta de en medio que sería la principal o la "recomendada"*/functionscrollRightNx() {

    mover.scroll(mover.scrollLeft + anchoTarjeta, 0);/*Obtiene la posicion del scroll de la seccion y le suma el ancho de la tarjeta para ir a la siguiente*/console.log(mover.scrollLeft); //Muestra en consola la posicion del scroll
}

functionscrollLeftNx() {
    mover.scroll(mover.scrollLeft - anchoTarjeta, 0);
    console.log(mover.scrollLeft); //Muestra en consola la posicion del scroll

}

Con esto tienen lo necesario para realizarlo , si algo no está muy claro háganmelo saber en los comentarios…
Suerte y no paren de aprender !

Escribe tu comentario
+ 2