import React,{Component} from 'react';
import './App.css';
import Swiper from "swiper"
import SwiperAnimation from '@cycjimmy/swiper-animation';
import "animate.css/animate.min.css";

export default class App extends Component{
  componentDidMount() {
    let  swiperAnimation = new SwiperAnimation();
    new Swiper('.swiper-container', {
      direction: 'vertical',
      slidesPerView: 1,
      spaceBetween: 30,
      mousewheel: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      on: {
        init: function () {
          swiperAnimation.init(this).animate();
        },
        slideChange: function () {
          swiperAnimation.init(this).animate();
        }
      }
    });
  }

  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">
            <div
              data-swiper-animation="fadeInDown"
              data-duration=".5s"
              data-delay="0s"
              data-swiper-out-animation="fadeOutLeft"
              data-out-duration=".2s"
            >fadeOutLeft</div>
            <div
              data-swiper-animation="fadeInDown"
              data-duration=".5s"
              data-delay="1s"
              data-swiper-out-animation="fadeOutDown"
              data-out-duration=".2s"
            >fadeInDown</div>
            <div
              data-swiper-animation="fadeInDown"
              data-duration=".5s"
              data-delay="2s"
              data-swiper-out-animation="fadeOut"
              data-out-duration=".2s"
            >fadeInDown3</div>
            <div
              data-swiper-animation="fadeInLeft"
              data-duration=".5s"
              data-delay="3s"
              data-swiper-out-animation="fadeOut"
              data-out-duration=".2s"
            >fadeInLeft</div>
            <div
              data-swiper-animation="fadeInRight"
              data-duration=".5s"
              data-delay="3s"
              data-swiper-out-animation="fadeOut"
              data-out-duration=".2s"
            >fadeInRight</div>
            <div
              data-swiper-animation="fadeInRightBig"
              data-duration=".5s"
              data-delay="4s"
              data-swiper-out-animation="fadeOut"
              data-out-duration=".2s"
            >fadeInRightBig</div>
            <div
              data-swiper-animation="fadeInUp"
              data-duration=".5s"
              data-delay="3s"
              data-swiper-out-animation="fadeOutUp"
              data-out-duration=".2s"
            >fadeInUp</div>
          </div>
          <div className="swiper-slide">
            <div
              data-swiper-animation="bounceInDown"
              data-duration=".5s"
              data-delay="0s"
              data-swiper-out-animation="bounceOutDown"
              data-out-duration=".2s"
            >bounceInDown</div>
            <div
              data-swiper-animation="bounceInLeft"
              data-duration=".5s"
              data-delay="1s"
              data-swiper-out-animation="bounceOutLeft"
              data-out-duration=".2s"
            >bounceInLeft</div>
            <div
              data-swiper-animation="bounceInRight"
              data-duration=".5s"
              data-delay="2s"
              data-swiper-out-animation="bounceOutRight"
              data-out-duration=".2s"
            >bounceInRight</div>
            <div
              data-swiper-animation="bounceInUp"
              data-duration=".5s"
              data-delay="2s"
              data-swiper-out-animation="bounceOutUp"
              data-out-duration=".2s"
            >bounceInUp</div>
          </div>
          <div className="swiper-slide">
            <div
              data-swiper-animation="lightSpeedIn"
              data-duration=".5s"
              data-delay=".4s"
              data-swiper-out-animation="lightSpeedOut"
              data-out-duration=".2s"
            >lightSpeedIn</div>
          </div>
          <div className="swiper-slide">
            
          </div>
          <div className="swiper-slide">Slide 5</div>
          <div className="swiper-slide">Slide 6</div>
          <div className="swiper-slide">Slide 7</div>
          <div className="swiper-slide">Slide 8</div>
          <div className="swiper-slide">Slide 9</div>
          <div className="swiper-slide">Slide 10</div>
        </div>
        <div className="swiper-pagination"></div>
      </div>
    );
  }
}

html, body,#root {
  position: relative;
  height: 100%;
}


.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

}
.swiper-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  flex-direction: column;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100%;
  flex-shrink: 0;
  width: 100%;
  position: relative;
  transition-property: transform;
}