SHARE
TWEET

Untitled

a guest Jun 17th, 2019 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import './ImgSlider.scss';
  3. import PropTypes from "prop-types";
  4. import Img1 from "../../../assets/img/ImgSlider/adult-blur-church-1309052.png"
  5. import Img2 from "../../../assets/img/ImgSlider/adult-cellphone-cheerful-1530313.png"
  6. import Img3 from "../../../assets/img/ImgSlider/adult-commerce-cook-375889.png"
  7. import Img4 from "../../../assets/img/ImgSlider/aisle-arches-architecture-2090830.png"
  8. import PrArrow from "../../../assets/img/ImgSlider/Rectangle 3.153 (1).png"
  9. import NtArrow from "../../../assets/img/ImgSlider/Rectangle 3.153.png"
  10.  
  11. class ImgSlider extends React.Component {
  12.   constructor(props) {
  13.     super(props)
  14.  
  15.     this.state = {
  16.       images: [
  17.         `${Img1}`,
  18.         `${Img2}`,
  19.         `${Img3}`,
  20.         `${Img4}`        
  21.       ],
  22.       currentIndex: 0,
  23.       translateValue: 0
  24.     }
  25.   }
  26.  
  27.   goToPrevSlide = () => {
  28.     if(this.state.currentIndex === 0)
  29.     return;
  30.     this.setState(prevState => ({
  31.       currentIndex: prevState.currentIndex -1,
  32.       translateValue: prevState.translateValue + this.slideWidth()
  33.     }))
  34.   }
  35.  
  36.   goToNextSlide = () => {
  37.     if(this.state.currentIndex === this.state.images.length -1) {
  38.       return this.setState({
  39.         currentIndex:0,
  40.         translateValue: 0
  41.       })
  42.     }
  43.  
  44.     this.setState(prevState => ({
  45.       currentIndex: prevState.currentIndex +1,
  46.       translateValue: prevState.translateValue + - (this.slideWidth())
  47.     }));
  48.   }
  49.  
  50.   slideWidth = () => {
  51.     return document.querySelector('.slide').clientWidth
  52.   };
  53.  
  54.   render() {
  55.     return(
  56.       <div className="ImgSlider_Container">      
  57.  
  58.         <div className="ImgSlider_Container_Wrapper"
  59.         style={{
  60.           transform: `translateX(${this.state.translateValue}px)`,
  61.           transition: 'transform ease-out 0.45s'
  62.         }}>
  63.           {
  64.             this.state.images.map((image, imageIndex) => (
  65.               <Slide key={imageIndex} image={image}/>
  66.             ))
  67.           }
  68.         </div>
  69.  
  70.         <LeftArrow
  71.         goToPrevSlide={this.goToPrevSlide}
  72.         />
  73.  
  74.         <RightArrow
  75.         goToNextSlide={this.goToNextSlide}
  76.         />
  77.  
  78.       </div>
  79.  
  80.     );
  81.   }
  82. }
  83.  
  84. const Slide = ({ image }) => {
  85.   const styles = {
  86.     backgroundImage: `url(${image})`,
  87.     backgroundSize: 'cover',
  88.     backgroundRepeat: 'no-repeat',
  89.     backgroundPosition: '50% 60%'
  90.   }
  91.   return <div className="slide" style={styles}></div>
  92. }
  93.  
  94. const LeftArrow =(props) => {
  95.   return (
  96.     <div className="backArrow arrow" onClick={props.goToPrevSlide}>
  97.  
  98.       <img className="la-icon" src={PrArrow} />
  99.  
  100.     </div>
  101.   );
  102. }
  103.  
  104. const RightArrow = (props) => {
  105.   return (
  106.     <div className="nextArrow arrow" onClick={props.goToNextSlide}>
  107.       <img className="ra-icon" src={NtArrow} />
  108.     </div>
  109.   );
  110. }
  111.  
  112. export default ImgSlider;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top