javascript - 如何使用按钮 onClick 自动滚动 div

Question

嗨，我正在尝试创建一个可以使用下一个/上一个按钮滑动的图像滑块。我还有一组数据将被映射。所以这是我的代码。

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 FirstSection

这是样式化的组件

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

问题是如何使SecondContainer每次单击按钮时将其 x 轴滚动 100vw，以便它显示下一个ThirdContainer并创建图像滑块效果。我也想让它动画流畅。那么有什么想法可以解决这个问题吗？感谢你！

标签： javascriptcssreactjs

Answer 1

Add a class name to your container

<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 FirstSection

please note this is not tested in an actual environment. the method could help you to implement it. if it still not working please post your code to slackBits and share the link in comments