Scroll horizontal - Bretema Digital Studio

Para crear un efecto de desplazamiento horizontal, o scroll horizontal, necesitaremos desarrollar una estructura básica HTML para el contenido que deseemos mostrar. Podemos usar cualquier tipo de contenedor HTML que deseemos, una lista ordenada o no ordenada, o una serie de divs. A modo de ejemplo, en esta ocasión utilizaremos una lista ordenada:

<div class="container">
<ul class="scroll-horizontal">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
</ul>
</div>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

<li>Elemento 4</li>

<li>Elemento 5</li>

<li>Elemento 6</li>

</ul>

</div>

A continuación, debes aplicar estilos CSS al contenedor y al elemento de lista para crear el efecto de scroll horizontal. Aquí te proporciono un ejemplo de estilos CSS que puedes utilizar:

.container {
overflow-x: scroll;
}
.scroll-horizontal {
display: flex;
flex-wrap: nowrap;
padding: 0;
margin: 0;
list-style: none;
}
.scroll-horizontal li {
flex: 0 0 auto;
margin-right: 10px;
width: 200px; /* ajusta el ancho de cada elemento de la lista según tus necesidades */
}

.container {

overflow-x: scroll;

}

.scroll-horizontal {

display: flex;

flex-wrap: nowrap;

padding: 0;

margin: 0;

list-style: none;

}

.scroll-horizontal li {

flex: 0 0 auto;

margin-right: 10px;

width: 200px; /* ajusta el ancho de cada elemento de la lista según tus necesidades */

}

Explicación de los estilos CSS:

overflow-x: scroll: este estilo se aplica al contenedor y crea una barra de desplazamiento horizontal si el contenido es demasiado ancho para caber en el ancho del contenedor.

display: flex: este estilo se aplica al elemento de lista y lo convierte en un contenedor flexible.

flex-wrap: nowrap: este estilo se aplica al elemento de lista y evita que los elementos se envuelvan a la siguiente línea.

padding: 0; y margin: 0: estos estilos eliminan cualquier relleno y margen predeterminado que se aplique al elemento de lista.

list-style: none: este estilo elimina cualquier viñeta o numeración predeterminada que se aplique al elemento de lista.

flex: 0 0 auto: este estilo se aplica a cada elemento de lista y establece el crecimiento, la reducción y el ancho inicial en automático.

margin-right: 10px: este estilo se aplica a cada elemento de lista y establece un margen derecho de 10 píxeles para separar cada elemento.

width: 200px: este estilo se aplica a cada elemento de lista y establece un ancho de 200 píxeles para cada elemento. Puedes ajustar este valor según tus necesidades.

Puedes ver un ejemplo de su uso aquí