LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  overflow: hidden;
}

.carousel {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.carousel__prev, .carousel__next {
  cursor: pointer;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  font-size: 32px;
  color: white;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  top: 50%;
  margin-top: -30px;
  z-index: 1000;
}
.carousel__prev {
  left: 40px;
}
.carousel__next {
  right: 40px;
}
.carousel__slide {
  width: 100%;
  height: 100%;
}
.carousel__slide div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.translate-enter {
  -webkit-transform: translateX(100vw);
          transform: translateX(100vw);
}

.translate-enter.translate-enter-active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.translate-leave {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.translate-leave.translate-leave-active {
  -webkit-transform: translateX(-100vw);
          transform: translateX(-100vw);
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.scale-appear, .blur-appear, .rotate-appear, .translate-appear {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: all 1000ms ease-in-out;
  transition: all 1000ms ease-in-out;
}

.scale-appear.scale-appear-active, .blur-appear.blur-appear-active, .rotate-appear.rotate-appear-active, .translate-appear.translate-appear-active {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

.scale-enter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.scale-enter.scale-enter-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.scale-leave {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.scale-leave.scale-leave-active {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  opacity: .01;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.blur-enter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.blur-enter.blur-enter-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.blur-leave {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.blur-leave.blur-leave-active {
  -webkit-filter: blur(40px);
          filter: blur(40px);
  opacity: .01;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.rotate-enter {
  -webkit-filter: hue-rotate(-180deg);
          filter: hue-rotate(-180deg);
  opacity: .01;
}

.rotate-enter.rotate-enter-active {
  -webkit-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
  opacity: 1;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.rotate-leave {
  -webkit-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
  opacity: 1;
}

.rotate-leave.rotate-leave-active {
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
  opacity: .01;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
JS
// Change the slide transition type.
var transition = 'scale';
// try translate, scale, blur, rotate

var appearTransition = true;
// Change it to true to add an appear transition that fades the image in from grayscale to full color.

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var ReactDOM = ReactDOM;


var slides = [
  'https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?fit=crop&fm=jpg&h=825&q=80&w=1325',
  'https://images.unsplash.com/photo-1445251836269-d158eaa028a6?fit=crop&fm=jpg&h=825&q=80&w=1325',
  'https://images.unsplash.com/photo-1443926818681-717d074a57af?fit=crop&fm=jpg&h=825&q=80&w=1325'
];


class Carousel extends React.Component{
  constructor(props){
    super(props);
    
    this.state = {
      counter: 0
    };
    
    this.prevSlide = this.prevSlide.bind(this);
    this.nextSlide = this.nextSlide.bind(this);
  }
  
  prevSlide(){
    var prevSlide = this.state.counter - 1 < 0 ? this.props.slides.length - 1 : this.state.counter - 1;
    this.setState({
      counter: prevSlide
    })    
  }
  
  nextSlide(){
    var nextSlide = this.state.counter + 1 < this.props.slides.length ? this.state.counter + 1 : 0;
    this.setState({
      counter: nextSlide
    })
  }
  
  render(){

    var style = {
      backgroundImage : 'url(' + this.props.slides[this.state.counter] + ')'
    }
    return(
      
◀︎
▶︎
) } } ReactDOM.render(, document.getElementById('carousel'));
Host Instantly Drag and Drop Website Builder

 

Description

A simple image slider that uses ReactCSSTransitionGroup for animations.
Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID