No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Scroll horizontal con CSS

27/32
Recursos

Ahora que las has terminado de aplicar estilos a las tarjetas, debemos crear este scroll horizontal que se genera al navegar entre ellas.

Como desarrollador fronted vas a ocupar muchas veces frameworks para acelerar tu proceso de creaci贸n, como para crear este tipo de efectos. Sin embargo, para esta ocasi贸n usaremos s贸lo c贸digo CSS con la intenci贸n de comprender c贸mo est谩n construidos. 隆Vamos a nuestra hoja de estilos!

Primero, para que nuestro contenedor pueda generar el scroll entre las tarjetas estas deben tenerlo. Centramos todas las tarjetas para general un scroll con scroll-snap-align: center. Esta l铆nea la colocamos justo debajo del position: relative del contenedor de nuestra tarjeta.

.plans-container--card {
    position: relative;
    scroll-snap-align: center;
    ...
}

C贸mo hacer un scroll

  • Llamamos la clase del contenedor de las tarjetas con .plans-container鈥搒lider.
  • display: flex ya nos genera un scroll horizontal, pero se desborda del contenedor y se genera un overflow por fuera.
  • Le damos una altura de 316px, mayor al contenedor de las tarjetas.
  • Generamos un scroll sobre el eje x con overflow-x: scrol. Esta propiedad 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-behabior establece lo que hace un navegador cuando alcanza el l铆mite de un 谩rea de desplazamiento.
  • Para que al deslizarnos sobre las tarjetas la vista se centre en el centro de cada una de ellas como si tuviesen un iman, usamos scroll-snap-type: x proximity.
.plans-container--slider {
    display: flex;
    height: 316px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}
image(228).png

En el navegador podemos observar que las tarjetas est谩n pegadas una a otra. En CSS hay una nueva propiedad llamada gap que nos ayuda a resolver este problema.

Actualmente gap es soportado por casi todos los navegadores, sin embargo, para usar una propiedad nueva, debemos al menos confirmar que tenga un 95% de disponibilidad para evitar que los usuarios tengan una mala experiencia.

Puedes consultar en la p谩gina Can I Use, entre otras cosas, la cantidad de navegadores en que una propiedad est谩 disponible. En este caso para solucionarlo vamos al contenedor de las tarjetas y buscamos la propiedad de margin.

.plans-container--card {
    ...
    margin: 50px auto 0;
    ...
 }

Cambiamos el atributo auto por 15px.

.plans-container--card {
    ...
    margin: 50px 15px 0;
    ...
 }

Y ya tendr铆amos este resultado:
image(229).png

Y as铆 hemos terminado esta 煤ltima secci贸n de planes por completo. Quiz谩s te preguntes por los 铆conos de navegaci贸n a los costados. Por supuesto que a煤n se puede hacer m谩s usando Javascript y a帽adiendo interacciones al hacer clic, pero eso te lo dejamos a ti. Ya sabes construir un scroll usando 煤nicamente CSS, eso es bastante genial.

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor), con aportes de John Steven Bernal Gonzalez.

Aportes 115

Preguntas 31

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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!馃槃

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

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

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

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

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

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;
}

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

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.

Cuando no lo lograstes:

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;
}

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.

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;```

驴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 馃槄

Ya esta en 70% 馃槂

Gap 2023 al 93%

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;
}

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

鈥淧or 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;
    }

el profesor confunde con esa forma de nombrar las clases. En el container del medio coloca plan info container y los otros plan card, al momento de acomodar los estilos, los dos contenedores restantes no lo toman porque est谩 todo con nombres distintos. Esta vaina que es dificil y lo dejan m谩s confundido a uno.

Aca mi aporte despues de muchas horas de buscar e investigar, quedo asi: 馃榿馃榿

鉁匰lide mejorado con scroll-sanp y margins calculados para que este centrada cada tarjeta (primer avance):

  • Ahora falta agregar el funci贸n a las flechas con JS >:)
  • En este comentario explico como hice lo mismo para las tablas de las clases pasadas, complementando el aporte de otro compa帽ero (:
  • Estos son algunos de los estilos que us茅 (aqu铆 estan todos):
    :root {
    	--margin-center-plan: calc(50% - (190px / 2));
    }
    
    .plans-container__slider {
      width: 100%;
      height: 280px;
    
      padding-top: 18px;
    
      display: flex;
      overflow-x: scroll;
      overscroll-behavior: contain;
      scroll-snap-type: x proximity;
    }
    
    .plans-container__card {
      width: 190px;
      min-width: 190px;
      max-height: 247px;
      margin: 0 8px;
      padding: 31px 16px 24px;
    
      position: relative;
      scroll-snap-align: center;
    
      text-align: center;
      background-color: var(--white);
      border-radius: 8px;
      box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    }
    
    .plans-container__slider::-webkit-scrollbar {
      display: none; /* Ocultar el scroll */
    }
    
    .monthly { /* Esta clase esta en la 1ra tarjeta */
      margin-left: var(--margin-center-plan);
      margin-right: calc(var(--margin-center-plan) / 5);
    }
    
    .always { /* Esta clase esta en la 3ra tarjeta */
      margin-left: calc(var(--margin-center-plan) / 5);
      margin-right: var(--margin-center-plan);
    }
    
  • El contenido de las tarjetas estaba en Ajustes + Breakpoints al lado izquierdo en Figma

Si alguien tiene problemas con:

  • Scroll Horizontal
  • Scrollbar (la barrita que desliza el contenido)
  • Acomodar bloques
    Les dejo mi c贸digo. Espero les ayude!
.plans-container--slider {
    display: flex;
    gap: 50px;
    height: 316px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}
.plans-container--slider::-webkit-scrollbar {
    background-color: var(--soft-orange);
    height: 3px;
}
.plans-container--slider::-webkit-scrollbar-thumb {
    background-color: var(--bitcoin-orange);
}
.plans-container--card {
    position: relative;
    scroll-snap-align: center;
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    padding: 0 15px;
    background-color: var(--just-white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(89,73,30,0.16);
}

Le agregaron una nueva parte al figma y asi quedo implementada.

Con flechas:

Yo copio el codigo igual pero me sigue apareciendo en columna 馃槮

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%

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馃槑

鈥淐an 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!

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

Jijiji RIP IE, ya lo mat贸. A帽o 2023

Yo le agregue un padding 0 40px para centrar las tarjetas de los extremos en la vista 320 鉁岎煆 y repeti el proceso del video en la secci贸n de las tablas para dar el mismo resultado de scroll. Solo que en este caso, agregue una segunda clase en ambas tablas para agregar la linea de codigo

CSS

.main__tables--container{
    display: flex;
    gap: 15px;
    height: auto;
    padding: 0 40px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}
.main__table{
    scroll-snap-align: center;
}

![](

HTML

![](

En mi slider, no empieza centrado si no que con el primer elemento 馃槮

Les comparto unos ajustes que les ayudara en las vistas m谩s grandes:
con el overflow en auto van a lograr que cuando incremente la pantalla y no necesiten el overflow este desaparezca.
El max-width tambien les va ayudar a organizar los elementos en vistas con m谩s de 770px y el margin 0 auto ayuda a posicionar el slider-container una vez deja de crecer.
Espero les sirva

<code> 
.plans-container--slider {
    display: flex;
    gap: 20px;
    justify-content: start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    overflow-y: hidden;
    height: 316px;
    width: 100%;
    max-width: 770px;
    margin: 0 auto; 
    padding: 0 20px;
}

Vengo del futuro, ya se puede usar GAP.

Est谩 en el 93.6% de los navegadores, solamente falta Internet Explorer.

hola

se puede tambi茅n hacer eso con scroll-snap-type: online mandatory; y las tarjetas su snap-aling: center; normal

Con esto lo puedes decorar y alinear mejor

/*/////////////////Cajas contenedoras del scroll2//////////////////*/
.plans-container--sider
{
    display: flex;
    overflow-x:scroll;
    overscroll-behavior-x: contain;
    scroll-snap-align: center;
    scroll-snap-type: x mandatory;
    padding: 18px 70px;
}
.plans-container--card
{
    display: flex;
    scroll-snap-align: center;
    min-width: 211.2px;
    max-width: 450px;
    height: 270px;
    min-height: 220px;
    margin: 0 20px;
}

驴Quieres obtener el siguiente resultado? Mira los respectivos tutoriales y encontrar谩s el paso a paso 馃憺馃憺馃憺馃毝鈥嶁檧锔忦煔垛嶁檪锔

genial aprend铆 como hacer un slider!!!

CSS para darle Scroll horizontal a la secci贸n Monedas y Comisi贸n

.main-tables-container {
    display: flex;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.main-currency-table, 
.main-commissions-table {
    scroll-snap-align: center;
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;

    font-family: "Inter", sans-serif;
}

Hola les hablo desde el futuro para informar que IE fallecio el 15 de junio 2022.
F en el chat,

GAP, en el
A帽o 2022, ya est谩n en todos los navegadores

Muy interesante este tema!

/* 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鈥搒lider

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!

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

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);
}