Как слайдер изображений может отображать более 1 изображения одновременно в режиме слайд-шоу в Reactjs? - PullRequest
Новая
       10

Как слайдер изображений может отображать более 1 изображения одновременно в режиме слайд-шоу в Reactjs?

0 голосов
/ 17 июня 2019

Я создаю одностраничный сайт в ReactJS, кстати, я новичок в этом. У меня проблема с показом слайдов.

Я хочу видеть более 1 изображения в разделе слайдов, например, можно ли показывать 3 или 4 изображения одновременно?

Мой компонент слайд-секции работает, он работает, но отображается только 1 изображение за раз. 

import React from 'react';
import './ImgSlider.scss';
import PropTypes from "prop-types";
import Img1 from "../../../assets/img/ImgSlider/adult-blur-church-1309052.png"
import Img2 from "../../../assets/img/ImgSlider/adult-cellphone-cheerful-1530313.png"
import Img3 from "../../../assets/img/ImgSlider/adult-commerce-cook-375889.png"
import Img4 from "../../../assets/img/ImgSlider/aisle-arches-architecture-2090830.png"
import PrArrow from "../../../assets/img/ImgSlider/Rectangle 3.153 (1).png"
import NtArrow from "../../../assets/img/ImgSlider/Rectangle 3.153.png"

class ImgSlider extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      images: [
        `${Img1}`,
        `${Img2}`,
        `${Img3}`,
        `${Img4}`        
      ],
      currentIndex: 0,
      translateValue: 0
    }
  }

  goToPrevSlide = () => {
    if(this.state.currentIndex === 0)
    return;
    this.setState(prevState => ({
      currentIndex: prevState.currentIndex -1,
      translateValue: prevState.translateValue + this.slideWidth()
    }))
  }

  goToNextSlide = () => {
    if(this.state.currentIndex === this.state.images.length -1) {
      return this.setState({
        currentIndex:0,
        translateValue: 0
      })
    }

    this.setState(prevState => ({
      currentIndex: prevState.currentIndex +1,
      translateValue: prevState.translateValue + - (this.slideWidth())
    }));
  }

  slideWidth = () => {
    return document.querySelector('.slide').clientWidth
  };

  render() {
    return(
      <div className="ImgSlider_Container">      

        <div className="ImgSlider_Container_Wrapper"
        style={{
          transform: `translateX(${this.state.translateValue}px)`,
          transition: 'transform ease-out 0.45s'
        }}>
          {
            this.state.images.map((image, imageIndex) => (
              <Slide key={imageIndex} image={image}/>
            ))
          }
        </div>

        <LeftArrow
        goToPrevSlide={this.goToPrevSlide} 
        />

        <RightArrow
        goToNextSlide={this.goToNextSlide}
        />

      </div>

    );
  }
}

const Slide = ({ image }) => {
  const styles = {
    backgroundImage: `url(${image})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '50% 60%'
  }
  return <div className="slide" style={styles}></div>
}

const LeftArrow =(props) => {
  return (
    <div className="backArrow arrow" onClick={props.goToPrevSlide}>

      <img className="la-icon" src={PrArrow} />

    </div>
  );
}

const RightArrow = (props) => {
  return (
    <div className="nextArrow arrow" onClick={props.goToNextSlide}>
      <img className="ra-icon" src={NtArrow} />
    </div>
  );
}

export default ImgSlider;

К сожалению, я искал, но не смог найти никаких советов.

Пожалуйста, дайте мне знать, что я могу сделать.

Спасибо!

...