Este es el resultado visualmente
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: 0 50px; /*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: 0px 2px;
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: 0 4px 3px rgba(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
</footer>
<script src="./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 tarjetas
var anchoTarjeta = document.getElementById('main_tarjeta').clientWidth; //Obtengo el ancho de la tarjeta principal que en realidad es el mismo para las tres
var buttonLeft = document.getElementById('bLess');//traigo los botones al script
var buttonRight = document.getElementById('bMore');
console.log(anchoTarjeta); //Muestra el ancho en px de la tarjeta
function checkButtonsNecesity() {
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"*/
function scrollRightNx() {
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
}
function scrollLeftNx() {
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 !
