Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import "./slider.css";
- import SwipeReact from 'swipe-react';
- export default class Slider extends Component {
- constructor(props) {
- super(props);
- this.state = {
- slides: props.slides,
- timer: props.timer,
- curent: 0,
- curentTime: 0,
- sliderWidth:1000+"%",
- itemWidth: window.innerWidth, //"100vw"
- dots: null
- };
- this.handleAnimation = this.handleAnimation.bind(this);
- this.goLeft = this.goLeft.bind(this);
- this.goRight = this.goRight.bind(this);
- this.handleDotClick = this.handleDotClick.bind(this);
- SwipeReact.config({
- left: () => {
- this.goRight();
- },
- right: () => {
- this.goLeft();
- }
- })
- }
- interval = null;
- componentWillReceiveProps = nextProps => {
- if (nextProps) {
- let go = {};
- if (nextProps.slides) {
- go.slides = nextProps.slides;
- go.sliderWidth = go.slides.length * 100;
- go.itemWidth = window.innerWidth;
- go.slides = go.slides.map((item, index) => (
- <div
- key={index}
- className="slide"
- // style={{ width: go.itemWidth + "px" }}
- >
- {item}
- </div>
- ));
- go.dots = go.slides.map((item, index) => (
- <span
- key={index}
- className={"dot" + ((index === 0 && " active") || "")}
- />
- ));
- }
- if (nextProps.timer) go.timer = nextProps.timer;
- this.setState(go, () => {
- });
- }
- };
- componentDidMount = async () => {
- let slide = await this.state.slides.map((item, index) => (
- <div
- key={index}
- className="slide"
- //style={{ width: "100vw" }}
- style={{ width: this.state.itemWidth + "px" }}
- >
- {item}
- </div>
- ));
- let dots = await this.state.slides.map((item, index) => (
- <span
- key={index}
- className={"dot" + ((index === 0 && " active") || "")}
- />
- ));
- this.setState({ slides: slide, dots });
- // this.setState({dots});
- };
- componentDidMount = () => {
- this.refs.wrap.style.transform = `translate(${this.state.itemWidth *
- this.state.curent}px)`;
- this.refs.wrap.style.transition = `transform 1s linear`;
- this.handleAnimation();
- this.interval = setInterval(this.handleAnimation, 1000);
- };
- handleAnimation = () => {
- let state = this.state;
- if (state.curentTime === state.timer[state.curent]) {
- this.refs.wrap.style.transform = `translate(-${this.state.itemWidth *
- this.state.curent}px)`;
- this.refs.wrap.style.transition = `transform 1000ms linear`;
- let dots = this.state.slides.map((item, index) => (
- <span
- id={"d" + index}
- key={index}
- className={"dot" + ((index === state.curent && " active") || "")}
- onClick={this.handleDotClick}
- />
- ));
- this.setState({
- curentTime: 0,
- curent: (this.state.curent + 1) % this.state.slides.length,
- dots
- });
- } else if (state.curentTime < state.timer[state.curent]) {
- state.curentTime++;
- this.setState(state);
- }
- };
- goRight = e => {
- let dots = this.state.slides.map((item, index) => (
- <span
- id={"d" + index}
- key={index}
- className={
- "dot" +
- ((index === (this.state.curent + 1) % this.state.slides.length &&
- " active") ||
- "")
- }
- onClick={this.handleDotClick}
- />
- ));
- this.refs.wrap.style.transform = `translate(-${window.innerWidth *
- ((this.state.curent + 1) % this.state.slides.length)}px)`;
- this.refs.wrap.style.transition = `transform 1000ms linear`;
- clearInterval(this.interval);
- this.setState(
- {
- curent: (this.state.curent + 1) % this.state.slides.length,
- curentTime: 0,
- dots
- },
- () => {
- this.interval = setInterval(this.handleAnimation, 1000);
- }
- );
- };
- goLeft = e => {
- let dots = this.state.slides.map((item, index) => (
- <span
- id={"d" + index}
- key={index}
- className={
- "dot" +
- ((index ===
- (this.state.curent + this.state.slides.length - 1) %
- this.state.slides.length &&
- " active") ||
- "")
- }
- onClick={this.handleDotClick}
- />
- ));
- this.refs.wrap.style.transform = `translate(-${window.innerWidth *
- ((this.state.curent + this.state.slides.length - 1) %
- this.state.slides.length)}px)`;
- this.refs.wrap.style.transition = `transform 1000ms linear`;
- clearInterval(this.interval);
- this.setState(
- {
- curent:
- (this.state.curent + this.state.slides.length - 1) %
- this.state.slides.length,
- curentTime: 0,
- dots
- },
- () => {
- this.interval = setInterval(this.handleAnimation, 1000);
- }
- );
- };
- handleDotClick = e => {
- let index = parseInt(e.target.id.slice(1));
- let dots = this.state.slides.map((item, dindex) => (
- <span
- id={"d" + dindex}
- key={dindex}
- className={"dot" + ((index === dindex && " active") || "")}
- onClick={this.handleDotClick}
- />
- ));
- this.refs.wrap.style.transform = `translate(-${window.innerWidth *
- index}px)`;
- this.refs.wrap.style.transition = `transform 1000ms linear`;
- clearInterval(this.interval);
- this.setState(
- {
- curent: index,
- curentTime: 0,
- dots
- },
- () => {
- this.interval = setInterval(this.handleAnimation, 1000);
- }
- );
- };
- render() {
- let klasa='';
- let parametri = window.reactparam.langId && window.reactparam.type === 1 && window.reactparam.teamlangId;
- if (parametri) {
- klasa="mobile";
- }
- let slides = this.state.slides.map((item, index) => (
- <div
- key={index}
- className={"slide " + klasa}
- style={{ width: this.state.sliderWidth + "%", position: "relative"}}//+ "px" }}
- >
- {item}
- </div>
- ));
- if(slides){
- return (
- <div className="slider">
- <div
- className="wrap"
- ref="wrap"
- style={{ width: this.state.sliderWidth ,position:"relative"}}//+ "%", position: "relative" }}
- {...SwipeReact.events}
- >
- {slides}
- </div>
- {this.state.slides.length>1?(
- <div>
- <div className="dots">{this.state.dots}</div>
- <span className="left" onClick={this.goLeft} />
- <span className="right" onClick={this.goRight} />
- </div>
- ):
- null}
- </div>
- );
- }
- return null;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement