Hola, estoy tratando de crear un control deslizante de imagen que se pueda deslizar con un botón siguiente/anterior. También tengo una matriz de datos que se mapearán. Así que este es mi código.
import React,{useState, useEffect} from 'react' import { ThirdContainer, SecondContainer, ButtonLeft, ButtonRight, ButtonTitle, Container, FirstRow, FirstTitle, SecondRow, SecondTitle, TitleContainer } from './FirstSectionStyled' const FirstSection = ({bgData}) => { //functions const nextSLide = () =>{} const prevSlide = () =>{} return ( <Container> <ButtonLeft onClick={prevSLide}/> <SecondContainer id="scroller"> {bgData.map((data,index) => ( <ThirdContainer key={data.id} backgroundImg = {data.backgroundImg}> <FirstRow> <TitleContainer> <FirstTitle>{data.firstTitle}</FirstTitle> <SecondTitle>{data.secondTitle}</SecondTitle> <ButtonTitle>Buy Now</ButtonTitle> </TitleContainer> </FirstRow> <SecondRow> </SecondRow> </ThirdContainer> )) } </SecondContainer> <ButtonRight onClick={nextSLide} /> </Container> ) } export default FirstSectionY este es el componente con estilo.
export const SecondContainer = styled.div` height:100%; width: 100vw; overflow-x: auto; background: black; display : flex; ` export const ThirdContainer = styled.div` min-width: 100vw; display: grid; grid-template-rows: 70% 30%; background-image: linear-gradient(to bottom, rgb(21, 21, 21, 0.5), rgb(21, 21, 21, 0.2), rgb(21, 21, 21, 0.2), rgb(21, 21, 21, 0.4)), url(${(props) => (props.backgroundImg)}); background-position: center center; background-repeat: no-repeat; background-size: cover; ` El problema es ¿Cómo puedo hacer que SecondContainer desplace su eje x 100vw cada vez que se hace clic en el botón para que muestre el siguiente ThirdContainer y cree el efecto de control deslizante de imagen? También quiero que se anime sin problemas. Entonces, ¿alguna idea para resolver esto? ¡Gracias!
Agregue un nombre de clase a su contenedor
<ThirdContainer className='third-container' ....
import React,{useState, useEffect} from 'react' import { ThirdContainer, SecondContainer, ButtonLeft, ButtonRight, ButtonTitle, Container, FirstRow, FirstTitle, SecondRow, SecondTitle, TitleContainer } from './FirstSectionStyled' const FirstSection = ({bgData}) => { //functions const nextSLide = (index) =>{ let ele = document. getElementsByClassName('third-container')[0] //replace 0 with current active slide index document.getElementByClassName('second-container').scrollTo(ele.offsetWidth) } const prevSlide = () =>{} return ( <Container> <ButtonLeft onClick={prevSLide}/> <SecondContainer className="second-container" id="scroller"> {bgData.map((data,index) => ( <ThirdContainer className='third-container' key={data.id} backgroundImg = {data.backgroundImg}> <FirstRow> <TitleContainer> <FirstTitle>{data.firstTitle}</FirstTitle> <SecondTitle>{data.secondTitle}</SecondTitle> <ButtonTitle>Buy Now</ButtonTitle> </TitleContainer> </FirstRow> <SecondRow> </SecondRow> </ThirdContainer> )) } </SecondContainer> <ButtonRight onClick={nextSLide} /> </Container> ) } export default FirstSectiontenga en cuenta que esto no se prueba en un entorno real. el método podría ayudarte a implementarlo. si aún no funciona, publique su código en slackBits y comparta el enlace en los comentarios