Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

200
Visualizações
¿Cómo puedo hacer un control deslizante como en la imagen? Desplazable y con texto e imágenes

Quiero hacer un control deslizante con una imagen desplazable justificada a la derecha y texto como en la imagen, ¿cómo puedo hacer esto? https://prnt.sc/26mtj6v

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Estoy enviando un sitio de muestra y una imagen, puede verificarlo. La imagen que envié tiene una imagen desplazable y una sección de cuadro para texto. La mitad de la segunda imagen será visible y cuando se deslice hacia la izquierda en la lógica del control deslizante, aparecerán 2 imágenes al frente y el texto dentro del cuadro cambiará.

https://prnt.sc/26mtuw6

Aunque no es exactamente lo mismo, nuestra última sección de proyectos en este sitio es un ejemplo http://paul-themes.com/html/liarch/home-default.html

about 4 years ago · Juan Pablo Isaza Relatório

0

Si desea hacer un diseño como el img a continuación:

objetivo


Para las imágenes de mi código a continuación, estoy usando Bootstrap 5.1.3 (los nombres de clase son en su mayoría del marco)

1) necesitará usar alguna display: flex en un contenedor para tener elementos en una fila y uno al lado del otro (créelo en su CSS para usar eso, si no está usando Bootstrap Framework). Además, agregue un width:100% en ese contenedor para que ocupe todo el espacio (es la clase w-100 de Bootstrap, o bien, agréguelo en su CSS personal; aquí 100% es 100% del cuerpo)

2) deberá hacer que ese contenedor se pueda desplazar con overflow-x:scroll

3) deberá crear un bloque (div) para su título y párrafo que debe estar en position: absolute y darle las coordenadas top/bottom/right/left

5) necesitará que su contenedor esté en position: relative , por lo que el título/párrafo (paso 3) se coloca según el contenedor

6) deberá darle a sus imágenes un width lo suficientemente grande para que el desplazamiento realmente comience a funcionar (necesita que los elementos dentro de su contenedor sean más grandes que el ancho total del contenedor para que se pueda desplazar)


Este es un ejemplo rápido que hice:

ejemplo


Aquí está el código de mi ejemplo.

html:

HTML

CSS:

CSS

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda