Как автоматически прокручивать div с помощью кнопки onClick

#javascript #css #reactjs

Вопрос:

Привет, я пытаюсь создать слайдер изображения, который можно перемещать с помощью кнопки next/prev. У меня также есть массив данных, которые будут отображаться на карте. Так что это мой код.

  import React,{useState, useEffect} from 'react'  import { ThirdContainer, SecondContainer, ButtonLeft, ButtonRight, ButtonTitle, Container, FirstRow, FirstTitle, SecondRow, SecondTitle, TitleContainer } from './FirstSectionStyled'  const FirstSection = ({bgData}) =gt; {   //functions  const nextSLide = () =gt;{}  const prevSlide = () =gt;{}   return (  lt;Containergt;  lt;ButtonLeft onClick={prevSLide}/gt;  lt;SecondContainer id="scroller"gt;  {bgData.map((data,index) =gt; (  lt;ThirdContainer key={data.id} backgroundImg = {data.backgroundImg}gt;  lt;FirstRowgt;  lt;TitleContainergt;  lt;FirstTitlegt;{data.firstTitle}lt;/FirstTitlegt;  lt;SecondTitlegt;{data.secondTitle}lt;/SecondTitlegt;  lt;ButtonTitlegt;Buy Nowlt;/ButtonTitlegt;  lt;/TitleContainergt;  lt;/FirstRowgt;  lt;SecondRowgt;  lt;/SecondRowgt;  lt;/ThirdContainergt;  ))  }  lt;/SecondContainergt;   lt;ButtonRight onClick={nextSLide} /gt;  lt;/Containergt;  ) }  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) =gt; (props.backgroundImg)});  background-position: center center;  background-repeat: no-repeat;  background-size: cover; `

Проблема в том, как я могу заставить SecondContainer прокручивать ось x на 100 Вт каждый раз, когда нажимается кнопка, чтобы она отображала следующую ThirdContainer и создавала эффект слайдера изображения. Я также хочу, чтобы он плавно анимировался. Итак, есть идеи, как это решить? Спасибо тебе!

1. element.scrollTo(x-coord, y-coord) используйте scrollTo функцию, прочитайте элемент с помощью document.getByClassName(....)

2. как я могу заставить его прокручиваться на 100 Вт ? потому что это выдает ошибку, когда я вставляю 100 vw.

3. Вы не можете перейти к vw !. вам нужно найти ширину элемента с помощью element.innerWidth , а затем прокрутите до этого значения внутренней ширины

4. не могли бы вы, пожалуйста, объяснить мне, как это сделать? Как я могу получить значение ширины экрана и использовать его scrollto , потому что я хочу, чтобы он был отзывчивым. Извините, потому что я все еще новичок в этом.

5. Опубликую это в ответе

Ответ №1:

Добавьте имя класса в свой контейнер

lt;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}) =gt; {   //functions  const nextSLide = (index) =gt;{  let ele = document. getElementsByClassName('third-container')[0] //replace 0 with current active slide index  document.getElementByClassName('second-container').scrollTo(ele.offsetWidth)  }  const prevSlide = () =gt;{}   return (  lt;Containergt;  lt;ButtonLeft onClick={prevSLide}/gt;  lt;SecondContainer className="second-container" id="scroller"gt;  {bgData.map((data,index) =gt; (  lt;ThirdContainer className='third-container' key={data.id} backgroundImg = {data.backgroundImg}gt;  lt;FirstRowgt;  lt;TitleContainergt;  lt;FirstTitlegt;{data.firstTitle}lt;/FirstTitlegt;  lt;SecondTitlegt;{data.secondTitle}lt;/SecondTitlegt;  lt;ButtonTitlegt;Buy Nowlt;/ButtonTitlegt;  lt;/TitleContainergt;  lt;/FirstRowgt;  lt;SecondRowgt;  lt;/SecondRowgt;  lt;/ThirdContainergt;  ))  }  lt;/SecondContainergt;   lt;ButtonRight onClick={nextSLide} /gt;  lt;/Containergt;  ) }  export default FirstSection

пожалуйста, обратите внимание, что это не тестируется в реальных условиях. этот метод может помочь вам его реализовать. если он все еще не работает, пожалуйста, опубликуйте свой код в slackBits и поделитесь ссылкой в комментариях