Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Scroll horizontal con CSS

27/31
Recursos

Aportes 92

Preguntas 23

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

overflow-x

La propiedad de CSS overflow-x establece lo que se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento a nivel de bloque. Puede que no sea nada, una barra de desplazamiento o el contenido adicional.

overscroll-behavior

la propiedad de css overscroll-behabior establece lo que hace un navegador cuando alcanza el límite de un área de desplazamiento. Es una abreviatura de overscroll-behavior-x y overscroll-behavior-y.

scroll-snap-type

La propiedad CSS scroll-snap-type establece qué tan estrictamente se aplican los puntos de snap en el contenedor de desplazamiento en caso de que haya uno

Con el siguiente código pueden decorar mejor el scrollbar 😃

.planes-container--slider::-webkit-scrollbar {
  background-color: var(--soft-orange);
  height: 3px;
}
.planes-container--slider::-webkit-scrollbar-thumb {
  background-color: var(--bitcoin-orange);
}

Bueno después de HORAS investigando y cientos de paginas de stack-overflow** he conseguido el scroll con flechitas que quería. ** Este scroll con flechitas es mi bebe así que mírenlo con amor.

Aqui esta un gif del resultado:
https://i.imgur.com/tnxPZBX.gif

Código en JS

/* Codigo para hacer scroll a un div horizontal por medio de flechas.
Uso el tamaño de las cajas dentro del slide para restarselo al scrollLeft y llevarme
a la posicion deseada.
Además oculto las flechas dependiendo de en que posicion me encuentre*/

//obtengo los dos elementos de flecha
var gray_arrow_left = document.getElementById("left-gray-arrow");
var gray_arrow_right = document.getElementById("right-gray-arrow");

//el contenedor de los planes aka donde se hace scroll
var plans_container = document.getElementById("plans-slider");
//las tarjetas de planes porque necesito saber su tamaño, y este puede variar
var plans_card = document.getElementsByClassName("plans-container--card");
//averiguo el tamaño de las tarjetas, esta es la posicion central donde deberia emepezar
var size = plans_card[1].clientWidth;

//Para que la cajita del centro se muestre por default
plans_container.scrollLeft = size;

gray_arrow_left.addEventListener("click", function(){
    gray_arrow_right.style.display = "inline-block";
    //Le resto el tamaño de las tarjetas  a la posicion del scroll para mover a la izquierda
    plans_container.scrollLeft -= size;
    //Si se encuentra en la primera tarjeta deberia esconder la flecha izquierda,
    // pues porque ya no puede seguir llendo a la izquierda :P
    if(plans_container.scrollLeft <= size*2){
        gray_arrow_left.style.display = "none";
    }
});

gray_arrow_right.addEventListener("click", function(){
    gray_arrow_left.style.display = "inline-block";
    plans_container.scrollLeft += size;
    if(plans_container.scrollLeft >= size){
        gray_arrow_right.style.display = "none";
    }
});

Estilos de las flechitas
Primero agregue un div en el html para envolver toodo el slide, y ahi es que voy a poner las flechas, porque si las pongo dentro del elemento que hace scroll ellas hacian scroll con el elemento y yo no quería eso.

     <div class= "slider-container">
             <span id="left-gray-arrow" class="arrow"></span></a>
                <span id="right-gray-arrow" class="arrow"></span>
		.
		el section con scroll va aqui
		.

Y en css

.slider-container{
    width: 100%;
    position: relative;
}
.slider-container .arrow{
    position: absolute;
    bottom: calc(50% - 20px);
    z-index: 1;
    display: inline-block;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
}
.slider-container #left-gray-arrow{
    left: calc(100% - 80%);
    background-image: url(./assets/icons/arrow-gray-left.svg);
}
.slider-container #right-gray-arrow{
    right:  calc(100% - 80%);
    background-image: url(./assets/icons/arrow-gray-right.svg);
}

Ahora yo quería que cuando pasara a cada una de las cajitas de planes, esta me quedara en el centro bien bonita. Y esto lo podría hacer en teoría, agregando un padding a los lados del elemento scroll. PERO NO porque resulta que el padding-right no se aplica a el scroll horizontal
La solución que me inventé fue** crear un elemento con visibility: hidden del ancho que yo quería que tuvera el padding** y asi engañar a el navegador que me quería hacer la vida dificil

     <article class="plans-container--card" id="dummy"></article>

Aproveché la clase de mis otras cajitas de planes para que tengan los mismo estilos y que no me salga ninguna sorpresita por un margin o cualquier cosa rara

#dummy{
    min-width: calc(100% - 70%);
    visibility: hidden;
}

Y ahí esta! Seguro hay alguna otra solución mejor. Cualquier aporte es super bien recibido!
😃

Y yo que pensaba que necesitariamos javascript para el slide 😛

Para los que esten viendo este curso en 2021 o más adelante, sepan que ya pueden usar gap. El 13 de agosto de 2021 ya es soportado en la mayoría de los navegadores.

Yo preferí agregar un carousel automatico 😃

.
HTML:

<section class="plans-container--slider">
  <article class='carousel__item'>
    <div class="plans-container--card">
      <div class="plan-info-container">
        <h3 class="plan-card--title">Pago Mensual</h3>
        <p class="plan-card--price"><sup>$</sup>19</p>
        <p class="plan-card--saving">*Ahorras $1 comparado al plan mensual.</p>
        <button class="plan-card--ca">Escoger este <span></span></button>
      </div>
    </div>
  </article>
  <article class='carousel__item'>
    <div class="plans-container--card">
      <div class="plan-info-container">
        <h3 class="plan-card--title">Pago Trimestral</h3>
        <p class="plan-card--price"><sup>$</sup>39</p>
        <p class="plan-card--saving">*Ahorras $72 comparado al plan mensual.</p>
        <button class="plan-card--ca">Escoger este <span></span></button>
      </div>
    </div> 
  </article>
  <article class='carousel__item'>
    <div class="plans-container--card">
      <p class="recommended">Recomendado</p>
        <div class="plan-info-container">
          <h3 class="plan-card--title">Pago Anual</h3>
          <p class="plan-card--price"><sup>$</sup>99</p>
          <p class="plan-card--saving">*Ahorras $129 comparado al plan mensual.</p>
          <button class="plan-card--ca">Escoger este <span></span></button>
        </div>
    </div>
  </article>
</section>

.
CSS:

.plans-container--slider {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  /* gap: 8%; */
  height: 316px;
  overflow-x: hidden;
}

/* Carousel */

.carousel__item {
  display: flex;
  justify-content: center;
  position: absolute;
  opacity: 0;
  /* filter: drop-shadow(0 2px 2px #555); */
  will-change: transform, opacity;
  animation: carousel-animate-vertical 15s linear infinite;
}

.carousel__item:nth-child(1) {
  animation-delay: calc(5s * -1);
}

.carousel__item:nth-child(2) {
  animation-delay: calc(5s * 0);
}

.carousel__item:last-child {
  animation-delay: calc(-5s * 2);
}

@keyframes carousel-animate-vertical {
  0% {
    transform: translateX(70%) scale(0.5);
    opacity: 0;
    visibility: hidden;
  }
  3%, 33.3333333333% {
    transform: translateX(70%) scale(0.7);
    opacity: 0.4;
    visibility: visible;
  }
  36.3333333333%, 66.6666666667% {
    transform: translateX(0) scale(1);
    opacity: 1;
    visibility: visible;
  }
  69.6666666667%, 100% {
    transform: translateX(-70%) scale(0.7);
    opacity: 0.4;
    visibility: visible;
  }
  103% {
    transform: translateX(-70%) scale(0.5);
    opacity: 0;
    visibility: visible;
  }
  /* 100% {
    transform: translateX(-100%) scale(0.5);
    opacity: 0;
    visibility: hidden;
  } */
}

/* Fin carousel */

Aparte lleva los mismos estilos de la clase para las cards como se vio en la clase.
El carousel lo vi en un codepen y lo adapte para un proyecto pasado.
.
Espero que les sea de ayuda!😄

Ya se puede usar el gab sin problema ya esta a un 96% de implementación

Así quedo mi repo, espero les guste : https://amaurysg.github.io/mobile-first-batatabit/

codigo del scroll horizontal

.main__card-plan{
	display: flex;
	overflow-x: scroll;
	overscroll-behavio-x:contain;
	scroll-snap-type:  x proximity;
	padding-top: 4rem;

}

.main__card-content{
	scroll-snap-align:center; /*cuando hagas scroll te lleve al centro del elemento*/
	margin-bottom: 0;
	margin: 0 1.5rem;
}

Para el problema de margen de la ultima tarjeta me funciono este margen

para solucionar el tema del scroll de la utlima tarjeta que se corta un poco y queda en el borde lo que hice fue poner un article mas con una etiqueta br dentro, no es la solucion mas elegante pero funciona.

Reto cumplido, lo hice con ayuda de un span y aprovechando la position relative del contenedor de la tarjeta.

.plans--container--card .small--right--arrow {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 24px;
    height: 24px;
    background-image: url("../assets/icons/right-arrow.svg");
    background-repeat: no-repeat;
    color: #BABABA;
}

No sé a ustedes pero a mi me aparecía un feo scroll vertical y lo pude quitar con:

siempre que me toca hacer un scroll horizonatal, vengo a este video 😂, espero y sea la ultima vez y que mi cerebro lo haya entendido

Cuando no lo lograstes:

Ya esta en 70% 😃

Chicos el Scroll vertical es sencillo de conseguir, basicamente es poner los objetos de forma vertical con flex-direction: Column; abrovechando que ya tenemos el display flex. Luego tenemos que cambiar nuestras tres propiedades de overflow que tenemos en x a y.

    display:flex;
    flex-direction:column;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scroll-snap-type: y proximity;```

Lo intente hacer solo y no pude tuve que ver la clase

Estuve todo el curso preguntándome cómo se haría el scroll horizontal y no puedo creer lo fácil que fue. Que gran curso.

Les comparto este artículo de css-trick que habla sobre este tema. Implemente el código de un ejemplo y quedo genial.

“Por internet explorer no se preocupen Microsoft comento que ya lo va matar” De Granda siempre metiendo un poco de humor de vez cuando si de por si sus cursos ya son buenos 😃

En la escuela de javascript, tienen un curso sobre frontend. Enseñan a crear otro slider.

Una posible solución al tema de los márgenes:

.plans-container--slider {
        display: flex;
        height: 316px;
        overflow-x: scroll;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        margin-right: 15px;
        margin-left: 10px;
    }

Actualmente la mayoría de navegadores aceptan la propiedad gap. Así que yo considero que es factible usarla en nuestro slider.

Use el gap ya que es esta en un 69%

Creo que otro punto importante, es que al hacer el scroll las tarjetas laterales quedan muy juntas al borde de la pantalla. Para eso se puede aplicar un margin al slider

.plans-container--slider {
   	display: flex;
	overflow-x: scroll;
	overscroll-behavior-x:contain;
	scroll-snap-type: x proximity;
   margin: 0 30px;
}

¿Cómo hacer que un elemento contenedor tenga un scroll horizontal para poder visualizar los elementos interiores?

Primero hacemos que el contenido no se desborde, que solo sea visible dentro del contenedor aplicándole la siguiente propiedad css al elemneto contenedor:

.container{
display:  flex; /*Esto hace que los elementos hijos se acomoden uno a lado del otro, generando un scroll*/
overflow: scroll;/*Con esta propiedad hacemos que el comportamiento del contenedor contenga sus elementos haciendo que el scroll solo afecte al contenedor  */
overscroll-behavior-x: contain; /*Establece lo que hace un navegador cuando alcanza el límite de un área de desplazamiento*/
}

También le agregamos una regla a los elementos hijos para darle un efecto al deplazmiento, el navegador nos ayuda a centrar el elemento al hacer scroll.

item{
   scroll-snap-type: center;
}

Typo: a typographical error.
Hasta ahora me anime a buscar que significa 😅

Increíble. Hasta ahora había estado trabajando los slides con bootstrap cuando no quería tocar JavaScript directamente.
De seguro es algo que voy a estar utilizando es muchas ocasiones.

Excelente curso 😄

Diciembre del 2021 y gap ya funciona en la mayoria de los navegadores😎

“Can I Use” del Gap de Flex al 26/01/2022 - 87.78%

Pues ya falta poco para poder usar gap 😄

F por Internet Explorer

Excelente, pensé que utilizaríamos javascript para el slider, pero no!

Yo copio el codigo igual pero me sigue apareciendo en columna 😦

overflow-x

La propiedad de CSS overflow-x establece lo que se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento a nivel de bloque. Puede que no sea nada, una barra de desplazamiento o el contenido adicional.

overscroll-behavior

la propiedad de css overscroll-behabior establece lo que hace un navegador cuando alcanza el límite de un área de desplazamiento. Es una abreviatura de overscroll-behavior-x y overscroll-behavior-y.

scroll-snap-type

La propiedad CSS scroll-snap-type establece qué tan estrictamente se aplican los puntos de snap en el contenedor de desplazamiento en caso de que haya uno

Solución definitiva margen de ultima card:

Solo agreguen este after al ultimo hijo, es decir, a la ultima tarjeta. Automaticamente se soluciona el problema que es generado por la misma propiedad de Overflow que solo dimensiona el contenido visible del elemento e ignora margin y padding.

.slider__card:last-child:after {
    content: "";
    width: 70px;
    height: 1px;
    position: absolute;
    left: 100%;
    top: 0px;
}

Me encanto la clase. el javascrip lo agregare despues… quizas

/* Se genera el scroll horizontal solo en este contenedor sin afectar los demás elementos */
overscroll-behavior-x: contain;

scroll-snap-type: x proximity;

proximity
La ventana gráfica de este contenedor de desplazamiento puede descansar en un punto de ajuste si no se desplaza actualmente teniendo en cuenta los parámetros de desplazamiento del agente de usuario. Si se agrega, mueve, elimina o cambia el tamaño del contenido, el desplazamiento de desplazamiento se puede ajustar para mantener el descanso en ese punto de ajuste.

Casi que no me funciona!! me tocaba colocarle un width para que me funcionara

Dios ni siquiera viendo las clases me toma los códigos no se que estoy haciendo mal por ahora voy a continuar porque esto me esta frustrando

Creacion de scroll horizontal, especial para evitar usar carruseles.

Método alternativo del scroll de los planes con flechas (solo con HTML y CSS)

Ver resultado

https://imgur.com/gallery/SebTXfn

Cada flecha fue creado como un enlace (<a></a>), de tal manera que al darle click lo dirija al siguiente plan. En el primer plan, el botón izquierdo lo enlace al tercer plan y el botón derecho lo enlace al segundo plan, en el segundo plan el botón izquierdo lo enlace al primer plan y el botón derecho lo enlace al tercer plan, y de la misma manera con el tercer plan.

HTML

<section id="plans" class="main-plans-container">
    <div class="plans-container__title">
        <h2>Escoge el plan que mejor se ajuste a ti.</h2>
        <p>Cualquier plan te da acceso completo a nuestra plataforma.</p>
    </div>

    <div class="plans-container__slider">
        <article class="plans-container__card" id="plan1">
            <div class="plan-card"> 
                <h3 class="plan-card__title">Pago Anual</h3>
                <p class="plan-card__price"><span>$</span>99</p>
                <p class="plan-card__saving">*Ahorras $129 comparado al plan mensual.</p>
                <button class="plan-card__button">Escoger este <span></span></button>
            </div>
            <a href="#plan3" class="left-arrow">
                <img src="assets/icons/plan-left-arrow.svg" alt="Botón para ir al plan 3">
            </a>
            <a href="#plan2" class="right-arrow">
                <img src="assets/icons/plan-right-arrow.svg" alt="Botón para ir al plan 2">
            </a>
        </article>

        <article class="plans-container__card" id="plan2">
            <p class="recommended">Recomendado</p>
            <div class="plan-card"> 
                <h3 class="plan-card__title">Pago Anual</h3>
                <p class="plan-card__price"><span>$</span>99</p>
                <p class="plan-card__saving">*Ahorras $129 comparado al plan mensual.</p>
                <button class="plan-card__button">Escoger este <span></span></button>
            </div>
            <a href="#plan1" class="left-arrow">
                <img src="assets/icons/plan-left-arrow.svg" alt="Botón para ir al plan 1">
            </a>
            <a href="#plan3" class="right-arrow">
                <img src="assets/icons/plan-right-arrow.svg" alt="Botón para ir al plan 3">
            </a>
        </article>

        <article class="plans-container__card" id="plan3">
            <div class="plan-card"> 
                <h3 class="plan-card__title">Pago Anual</h3>
                <p class="plan-card__price"><span>$</span>99</p>
                <p class="plan-card__saving">*Ahorras $129 comparado al plan mensual.</p>
                <button class="plan-card__button">Escoger este <span></span></button>
            </div>
            <a href="#plan2" class="left-arrow">
                <img src="assets/icons/plan-left-arrow.svg" alt="Botón para ir al plan 2">
            </a>
            <a href="#plan1" class="right-arrow">
                <img src="assets/icons/plan-right-arrow.svg" alt="Botón para ir al plan 1">
            </a>
        </article>
    </div>
</section>

CSS

/* Contenedor general */
.main-plans-container{
    width: 100%;
    min-height: 320px;
    text-align: center;
    padding-bottom: 50px;
}

.plans-container__title{
    min-width: 288px;
    width: 90%;
    margin: 0 auto;
    margin-top: 64px;
}

.plans-container__title h2{
    font-size: 2.4rem;
    line-height: 2.6rem;
    color: var(--warm-dark-color);
}

.plans-container__title p{
    margin-top: 24px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: #757575;
    font-weight: 500;
}

/*Contenedor mayor de todos los planes*/
.plans-container__slider{
    display: flex;
    height: 325px;
    overflow-x: scroll;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; 
}


/*Contenedor de todos los planes ARTICLE*/
.plans-container__card{
    position: relative;
    scroll-snap-align: center;
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 258px;
    margin: 50px 40px 0;
    padding: 0 15px;
    background-color: var(--light-color);
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
}

/*Mensaje de recomendación*/
.recommended{
    position: absolute;
    width: 101px;
    height: 31px;
    top: calc(0% - 31px/2);
    left: calc(50% - 101px/2);
    padding: 8px;
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-family: var(--secondary-family-font);
    text-align: center;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: white;
}

.plan-card__title{
    padding-top: 31px;
    margin-bottom: 8px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: black;
    font-weight: 500;
}

.plan-card__price{
    padding:5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    font-family: var(--secondary-family-font);
    color:black;
    position: relative;
    left:-7px;
}

.plan-card__price span{
    vertical-align: top;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.plan-card__saving{
    margin-top: 16px;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #757575;
    font-weight: 500;
}

.plan-card__button{
    margin-top: 16px;
    margin-bottom: 24px;
    width: 151px;
    height: 48px;
    border-radius: 4px;
    background: var(--off-white);
    border: solid 2px var(--primary-color);
    color: var(--warm-dark-color);
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: bold;
    text-align: center;
}

.plan-card__button span{ 
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("assets/icons/orange-right-arrow.svg");
    vertical-align: text-bottom;
}

.right-arrow{
    position: absolute;
    right: -40px;
    padding: 15px;
    top: calc(50% - 20px);
}
.left-arrow{
    position: absolute;
    left: -40px;
    padding: 15px;
    top: calc(50% - 20px);
}

resultado final de la lección

Hola! al momento de ver este video y al revisar en la pagina la implementación de gap- Flexbox en los distintos navegadores, se evidencia que el uso aumento a un porcentaje de 88.35%.

.plans-container--slider

Hice que haya un poco de interacción creando dos flechas ubicadas con un position:absolute;

  • Las cuales son dos etiquetas tipo ancord(a), ligada a un ID que le puse a cada tabla

  • También le agregué un scroll-behavior: smooth ; para que fuera suave el desplazamiento

-Esto funciona; sin embargo, si es una pantalla más grande, se verán las flechas de la otra tarjeta.

De todas maneras les dejo el codigo por si lo quieren probar, aunq me imagino q más de uno debio intentar algo asi

.plans-container--slider{
  display:flex;
  height: 316px;
  /* voy a crear el scroll, empezamos por overflow-x, para trabjar verticalmente, este solo tiene efecto con los elemento dentro del contenedor */
  overflow-x:scroll;
  scroll-behavior: smooth ;
  overscroll-behavior-x:contain;
  /* scroll-snap-type esta propiedad hace que si me ubico en medio de dos tarjetas, se ira a la más cercana y no quedara parada en la mitad */
  scroll-snap-type: x proximity;
  /* luego de estas propiedades, tenemos que agregarle al contenedor de las tarjetas otra regla para que pueda funcionar y decir en que parte queremos que se centre(scroll-snap-align:center;) */
}
.flecha-izquierda{
  position:absolute;
  top:30%;
  left:5%;
  height: 20px;
  width: 20px;
  background:url(./assets/assets/icons/izquierda-flecha.png) center/cover no-repeat;
  
  
}

.flecha-derecha{
  position:absolute;
  top:30%;
  right:5%;
  height: 20px;
  width: 20px;
  background:url(./assets/assets/icons/derecha-flecha.png) center/cover no-repeat;
 
}

pd: si alguien conoce la extensión para hacer gift pasemela xD

Para centrar los planes añadir en .plans-container–slider

justify-content: center;

Si no quieres que se vea la barra de scrool puedes agregar la propiedad:


scrollbar-width: none;

y listo, queda mucho más estético.

Ya podemos usar la propiedad

gap

puesto que ha sido implementada en todos los navegadores a excepción de IE pero ese no importa en teoría


ya se puede usar gap

Hay personas que dicen css3 es facil de aprender, que un día se aprende jeje

Css es otro mundo :3

Se me ocurrió agregar un margin a los costados de las tarjetas con nth::child - aunque de momento no he sido capaz de centrar en la versión escritorio, supongo que cuando agreguemos los media queries cambiamos el with del slider contenedor

/**margen al lado de las tarjetas*/

.plans-container--slider    
.plans-container--card:nth-child(1) {
    margin-left: 100px;
}

.plans-container--slider    
.plans-container--card:nth-child(3) {
    margin-right: 100px;
}

.

Pude acomodar el diseño de las dos columnas laterales del slider en función a esta implementación del scroll. Así es como me quedó. Código abajo

HTML

<section class="plans-container--slider">
	<!-- Aqui van las cards -->
</section>
<div class=" plans-container--column plans-container--column__left"></div>
<div class="plans-container--column plans-container--column__right"></div>

CSS

.plans-container--slider{
  width: 65%;
  height: 316px;
/*El margin para centrarlo */
  margin: 0 auto;
}

.plans-container--column{
/*El height es el mismo que el card (.plans-container--card)*/
  height: 250px;
  position: absolute;
/*las dos barras juntan un 30%, el gap que se da con la card es el restante del width, que en este caso es de 5%*/
  width: 15%;
  background-color: var(--just-white);
/*Estas columnas están en el contenedor principal (.main-plans-container), el cual tiene un padding vertical de 70px. Poniendo este tamaño como bottom, casi se alinea con el slide, pero el height añadido de la barra del scroll arruina los cálculos. Pero me gusta como quedó xD*/
  bottom: 70px;
  border-radius: 5px;
}

.plans-container--column__left{
  left: 0;
}

.plans-container--column__right{
  right: 0;
}

Propiedad de desbordamiento

overflow - x>

Permite horizontalmente ver el desbordamiento del contenido.

con el valor: scroll: coloca un scroll para la visualización del contenido

Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

Está quedando genial 😃

Por cierto, sabían que con la extensión live server de vscode pueden visualizar en tiempo real la página en sus dispositivos moviles, tan solo deben teclear en el navegador la dirección ip privada del pc donde están codificando y el puerto del servidor, eso sí, deben estar conectados a la misma red.

Con el siguiente CSS, logre que las tarjetas de los bordes tambien se mantengan en el centro, sin embargo, las tarjetas siempre se mantendran de 230px. Este efecto se ve bien para moviles y tablets, para pc, no tanto.

Las fotos son del media query de una tablet (768px, 874px)

.plans-container--slider {
    display: flex;
    height: 316px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.plans-container--card {
    position: relative;
    scroll-snap-align: center;
    margin: 50px 50px 0;
    min-width: 230px;
    height: 250px;
    padding: 0 15px;
    background-color: var(--just-white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(89, 73, 30, 0.16);
}

.plans-container--card:first-child {
    margin-left: calc((100% - 230px + 10px) / 2);
}

.plans-container--card:last-child {
    margin-right: calc((100% - 230px + 10px) / 2);
}

Para los que están tomando el curso en estas fechas, les dejo la tabla de como esta gap al día de hoy.

![](

Si alguien quiere remover el scrollbar:

.plans-container--slider::-webkit-scrollbar {
  display: none;
}
  <section id="plans" class="main-plans-container">

            <div class="plans--title">
                <h2>  Escoge el plan que mejor se ajuste a ti. </h2>
                <p>Cualquier plan te da acceso completo a nuestra plataforma</p>
            </div>
<!--targetas -->

            <section class="plans-container--slider"> 
                <article  class="plans-container--card">
                    <div class="plan-info-container ">
                        <h3 class="plan-car--title">Pago Anual </h3>
                        <p class="plan-card--price"> <span>$</span>99</p>
                        <p class="plan-card-saving">* Ahorra $129 comparando al plan mensual.</p>
                        <button class="plan-card--ca">Escoge este <span></span></button>
                    </div>
                </article>
                <p class="slide-izquierdo"> <span></span></p> 
                <article  class="plans-container--card">
                    <p class="recomendado">Recomendado</p>
                    <div class="plan-info-container ">
                        <h3 class="plan-car--title">Pago Anual </h3>
                        <p class="plan-card--price"> <span>$</span>99</p>
                        <p class="plan-card-saving">* Ahorra $129 comparando al plan mensual. </p>
                        <button class="plan-card--ca">Escoge este <span></span></button>
                    </div>
                </article>
               <p class="slide-derecho"> <span></span></p> 
                
                <article  class="plans-container--card">
                    <div class="plan-info-container ">
                        <h3 class="plan-car--title">Pago Anual </h3>
                        <p class="plan-card--price"> <span>$</span>99</p>
                        <p class="plan-card-saving">* Ahorra $129 comparando al plan mensual.</p>
                        <button class="plan-card--ca">Escoge este <span></span></button>
                    </div>
                </article>
            </section>
           
        </section>
.slide-izquierdo span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/icons/mdi_keyboard_arrow_down.png');
    margin-top: 150px;
}
.slide-derecho span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/icons/mdi_keyboard_arrow_down\(1\).png');
    margin-top: 150px;
}

![](


¿Por que desaparece el margen de esta tarjeta? 😦

Overscroll-behavior no funciona. Alguien podría ayudarme?

Hola Gente! Estuve probando unas cosas con CSS para ver si podía lograr hacer las flechas y logre lo siguiente:

Hay mucho por mejorar pero la idea inicial ya está.

HTML:

<section class="plans-container--slider">
          <article id="1" class="plans-container--card">
            <div class="plan-info-container">
              <h3 class="plan-card--title">Pago Mensual</h3>
              <p class="plan-card--price"><span>$</span> 19</p>
              <p class="plan-card--saving">
                *Paga 1 vez al mes desde el día de tu compra.
              </p>
              <button class="plan-card--ca">Escoger este <span></span></button>
            </div>
          </article>
          <article class="plans-container--card">
            <p class="recommended">Recomendado</p>
            <div class="plan-info-container">
              <h3 class="plan-card--title">Pago Anual</h3>
              <p class="plan-card--price"><span>$</span> 99</p>
              <p class="plan-card--saving">
                *Ahorras $129 comparado al plan mensual.
              </p>
              <button class="plan-card--ca">Escoger este <span></span></button>
              <div>
                <a href="#1">
                  <span class="arrow-left">&#60</span>
                </a>
                <a href="#3">
                  <span class="arrow-right">&#62</span>
                </a>
              </div>
            </div>
          </article>
          <article id="3" class="plans-container--card">
            <div class="plan-info-container">
              <h3 class="plan-card--title">Pago Lifetime</h3>
              <p class="plan-card--price"><span>$</span> 129</p>
              <p class="plan-card--saving">*Ahorro infinito (50 cupos).</p>
              <button class="plan-card--ca">Escoger este <span></span></button>
            </div>
          </article>
        </section>

CSS:

.arrow-left {
  position: absolute;
  bottom: 50%;
  left: -10%;
  font-size: 2rem;
  color: var(--grey);
}
.arrow-right {
  z-index: 2;
  position: absolute;
  bottom: 50%;
  right: -10%;
  font-size: 2rem;
  color: var(--grey);
}

overflow-x La propiedad de CSS overflow-x establece lo que se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento a nivel de bloque. Puede que no sea nada, una barra de desplazamiento o el contenido adicional. overscroll-behavior la propiedad de css overscroll-behabior establece lo que hace un navegador cuando alcanza el límite de un área de desplazamiento. Es una abreviatura de overscroll-behavior-x y overscroll-behavior-y. scroll-snap-type La propiedad CSS scroll-snap-type establece qué tan estrictamente se aplican los puntos de snap en el contenedor de desplazamiento en caso de que haya uno

Esta herramienta me dejo en el sitio.... grande el curso.

Reto cumplido :3

Excelente!! gracias Diego!!

Gran clase!

Comparto mi solucion al problema del margen de la ultima tarjeta y mi resultado

.plan__cards--container {  
  display : flex;
  margin : 5px calc(50% - 125px);
  overflow-x : scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type : x proximity;
  filter : drop-shadow(0 4px 8px rgba(89, 73, 30, 0.3));
}

.plan__cards--container::-webkit-scrollbar-thumb {
  background-color: var(--bitcoin-orange);
}

.plan__cards--container::-webkit-scrollbar {
  height: 5px;
}

.plan__cards--container::-webkit-scrollbar-track {
  background-color: var(--grey);
}

.plan__info-card--container {
  position : relative;
  scroll-snap-align: center;
  display : flex;
  flex-direction : column;
  align-items : center;
  padding : 25px 10px;
  margin : 30px 30px 30px 0;
  min-width : 230px;
  height : auto;
  background-color : var(--just-white);
  border-radius : 15px;
}

Todo el mundo hablando maravillas de la clase y yo también ❤️ es fabuloso aprender cosas nuevas 😉 Never Stop Learning 😄

Wow! today I learned something new.

Para el tema de como se corta la ultima carta, solucione la primera usando left, creo que podria funcionar tambien para la ultima.

De esta manera apliqué los estilos a mis tarjetas buscando reusar la mayor cantidad de código posible

.plans__element {
  position: absolute;
  width: 120px;
  height: 31px;
  padding: 7px;
  top: -15px;
  left: calc(50% - 60px);
  font-size: 1.2rem;
  border-radius: 8px;
  color: var(--just-white);
}

.recommended {
  background-color: var(--bitcoin-orange);
}

.basic {
  background-color: var(--secondary-blue);
}

.premium {
  background-color: var(--black);
}

Ya sé qué poner como la mejor parte del curso 😃

Que tal campeones, Buen dia…
… Aplique otro metodo diferente para reforzar conocimiento = espero les ayude las capturas de pantallas…

Saludos…


Cambié un poco el concepto de las otras dos tarjetas.

![](

👌

Chicos! a mi me paso que usando flex en el contenedor principal de la seccion de planers, no me sirvio el overflow-x, por si a alguien le pasa

Asi se ve en el proyecto que me dispuse a hacer por mi cuenta

.container–slider {
display: flex;
height: 210px;
overflow-x: scroll;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
}

main .main–1st-section .picture {
position: relative;
scroll-snap-align: center;
width: 95%;
min-width: 280px;
max-width: 900px;
margin: 0 10px;
height: 200px;
background-image: url(’./assets/imgs/home-picture.svg’);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

main .main–1st-section .picture2 {
position: relative;
scroll-snap-align: center;
width: 95%;
min-width: 280px;
max-width: 900px;
margin: 0 10px;
height: 200px;
background-image: url(’./assets/imgs/home2.svg’);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

![](

![](

De locos la forma en la que se creó el slide…10/10

no se me alinea el del medio cuando carga la pag, me muestra primero el de la izq! 😦

muy interesante la creación del slide solo con css

He aquí la prueba que ya no necesitas JavaScript para generar un scroll de manera horizontal. Ahora es mucho más fácil crear carrouseles

me encanto esta clase para hacer el slider 😄

excelente clase

En el contenedor para scroll horizontal de las tarjetas colocar

.plans-container--slider {
  display: flex;
  height: 316px;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}```