Cómo crear Scroll horizontal para una barra o nav de categorías.

[Maowmartello]

Hola, qué tal todos por acá. Ando buscando información para hacer algo exactamente igual en la sección de menu de un sitio web de restaurante Un scroll horizontal. En mobile se ve precioso, el sitio web del referente es este: por si lo quieren ver en el celular: app.distritoburgerbar.com

Pero aún no he dado con la solución. Estuve probando con flexbox en elementor, pero no logro el scroll horizontal aún, Incluso con CSS, y nada. ¿Alguien sabe qué plugin puedo usar para lograr el mismo resultado del referente?

 

Y

Optimización Wordpess elementor

Donde puedo sacar plantillas para el product single?

[Cosmin Vladut]

Hola compañero, puedes utilizar PLUS ADDONS para Elementor, tiene un opción que es de scroll Horizontal, aunque no estoy seguro que tenga exactamente la opción de que haga scroll solo cuando el cursor este por encima de la flecha. Para eso puedes crear el Scroll Horizontal y después a las flechas darle una clase, y mediante código enlazarlo con los elementos del carrusel, aunque debes saber un poco de JS.

Si necesitas ayuda de como crear un Scroll Horizontal con PLUS ADDONS nos pides ayuda ;) Espero te sirva.

 

[martincho@]

genial

 

[Jesuiz]

Ese scroll se puede hacer solo con CSS

.horizontal-scroll-container {
  display: flex;
  overflow-x: auto; /* Permite el scroll horizontal */
  scroll-snap-type: x mandatory; /* Ayuda a que el scroll sea más fluido */
  gap: 10px; /* Espaciado entre los elementos */
  padding: 10px;
  -webkit-overflow-scrolling: touch; /* Mejora en dispositivos móviles */
}

.scroll-item {
  min-width: 200px; /* Ancho mínimo de cada elemento */
  height: 150px;
  background-color: #ffd700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-align: center;
  scroll-snap-align: start; /* Alineación en el scroll */
}

 

[martincho@]

genial

 

[limhi123]

excelente aporte gracias, me ayudaron sus comentarios

 

[Maowmartello]

Gracias a todos, fue de mucha ayuda sus recomendaciones

 

[mikkespr]

se ve bastante chulo
que tal el rendimiento?

 

[Axelm]

👍

 

[Rayco]

Gran idea, lo probare a ver como funciona y si va fluido lo implementare. Gracias por el aporte

 

[nzt28root]

con GSAP

 

[Cosmin Vladut]

Me alegra que os ha sido de ayuda los comentarios! Un saludo!