Slider with React

Slider with React / Awesome Slider with CSS React / Slider con React / Codigo de Slider con Css y React

By  Nikolay Talanov

HTML

<div id="app"></div>
CSS

*,:after,:before{box-sizing:border-box;margin:0;padding:0}
body{font-family:Roboto,Helvetica,Arial,sans-serif;background:#000}
.slider{overflow:hidden;position:relative;height:100vh;color:#fff}
.slider__top-heading{z-index:12;position:absolute;left:0;top:100px;width:100%;text-align:center;font-size:16px;text-transform:uppercase;letter-spacing:2.5px;-webkit-transition:all .5s 1s;transition:all .5s 1s;-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0}
.slider.s--ready .slider__top-heading{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
.slider__slides{position:relative;height:100%}
.slider__slide{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.slider__slide.s--active{pointer-events:auto}
.slider__slide-content{z-index:6;position:relative;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;height:100%;text-transform:uppercase;line-height:1}
.slider__slide-subheading{margin-bottom:20px;font-size:24px;letter-spacing:2px;-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;-webkit-transition:.5s;transition:.5s}
.slider__slide.s--active .slider__slide-subheading{-webkit-transition-delay:.65s;transition-delay:.65s;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.slider__slide-heading{display:-webkit-box;display:flex;margin-bottom:20px;font-size:60px;letter-spacing:12px}
.slider__slide-heading span{display:block;opacity:0;-webkit-transform:translateY(-60px);transform:translateY(-60px);-webkit-transition:all .3333333333s;transition:all .3333333333s}
.slider__slide.s--prev .slider__slide-heading span{-webkit-transform:translateY(60px);transform:translateY(60px)}
.slider__slide.s--active .slider__slide-heading span{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.slider__slide-heading span:nth-child(1){-webkit-transition-delay:0s;transition-delay:0s}
.slider__slide.s--active .slider__slide-heading span:nth-child(1){-webkit-transition-delay:.3333333333s;transition-delay:.3333333333s}
.slider__slide-heading span:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s}
.slider__slide.s--active .slider__slide-heading span:nth-child(2){-webkit-transition-delay:.4333333333s;transition-delay:.4333333333s}
.slider__slide-heading span:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}
.slider__slide.s--active .slider__slide-heading span:nth-child(3){-webkit-transition-delay:.5333333333s;transition-delay:.5333333333s}
.slider__slide-heading span:nth-child(4){-webkit-transition-delay:.3s;transition-delay:.3s}
.slider__slide.s--active .slider__slide-heading span:nth-child(4){-webkit-transition-delay:.6333333333s;transition-delay:.6333333333s}
.slider__slide-heading span:nth-child(5){-webkit-transition-delay:.4s;transition-delay:.4s}
.slider__slide.s--active .slider__slide-heading span:nth-child(5){-webkit-transition-delay:.7333333333s;transition-delay:.7333333333s}
.slider__slide-heading span:nth-child(6){-webkit-transition-delay:.5s;transition-delay:.5s}
.slider__slide.s--active .slider__slide-heading span:nth-child(6){-webkit-transition-delay:.8333333333s;transition-delay:.8333333333s}
.slider__slide-heading span:nth-child(n+7){-webkit-transition-delay:.6s;transition-delay:.6s}
.slider__slide.s--active .slider__slide-heading span:nth-child(n+7){-webkit-transition-delay:.9333333333s;transition-delay:.9333333333s}
.slider__slide-readmore{position:relative;font-size:14px;text-transform:lowercase;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateY(-20px);transform:translateY(-20px);cursor:pointer;opacity:0;-webkit-transition:.5s;transition:.5s}
.slider__slide.s--active .slider__slide-readmore{-webkit-transition-delay:.65s;transition-delay:.65s;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.slider__slide-readmore:before{content:'';position:absolute;left:-2px;top:-3px;width:calc(100% + 4px);height:calc(100% + 6px);background:rgba(255,255,255,.4);-webkit-transform:scaleX(0.3);transform:scaleX(0.3);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}
.slider__slide-readmore:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}
.slider__slide-parts{position:absolute;left:0;top:0;display:-webkit-box;display:flex;width:100%;height:100%}
.slider__slide-parts:after{content:'';z-index:5;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.1)}
.slider__slide-part{position:relative;width:25%;height:100%}
.slider__slide-part-inner{overflow:hidden;position:relative;width:100%;height:100%;background-size:0 0;background-repeat:no-repeat;-webkit-transition:-webkit-transform .5s ease-in-out;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out}
.slider__slide-part-inner:before{content:'';position:absolute;width:100vw;height:100%;background-image:inherit;background-size:cover;background-position:center center;-webkit-transition:opacity .25s;transition:opacity .25s;opacity:0}
.slider__slide-part:nth-child(1) .slider__slide-part-inner{z-index:3;-webkit-transition-delay:.24s;transition-delay:.24s;-webkit-transform:translateX(-32.5%);transform:translateX(-32.5%)}
.slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner{-webkit-transition-delay:.28s;transition-delay:.28s}
.slider__slide-part:nth-child(1) .slider__slide-part-inner:before{left:0vw;-webkit-transition-delay:.365s;transition-delay:.365s}
.slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner:before{-webkit-transition-delay:.28s;transition-delay:.28s}
.slider__slide-part:nth-child(2) .slider__slide-part-inner{z-index:2;-webkit-transition-delay:.16s;transition-delay:.16s;-webkit-transform:translateX(-65%);transform:translateX(-65%)}
.slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner{-webkit-transition-delay:.36s;transition-delay:.36s}
.slider__slide-part:nth-child(2) .slider__slide-part-inner:before{left:-25vw;-webkit-transition-delay:.285s;transition-delay:.285s}
.slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner:before{-webkit-transition-delay:.36s;transition-delay:.36s}
.slider__slide-part:nth-child(3) .slider__slide-part-inner{z-index:1;-webkit-transition-delay:.08s;transition-delay:.08s;-webkit-transform:translateX(-97.5%);transform:translateX(-97.5%)}
.slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner{-webkit-transition-delay:.44s;transition-delay:.44s}
.slider__slide-part:nth-child(3) .slider__slide-part-inner:before{left:-50vw;-webkit-transition-delay:.205s;transition-delay:.205s}
.slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner:before{-webkit-transition-delay:.44s;transition-delay:.44s}
.slider__slide-part:nth-child(4) .slider__slide-part-inner{z-index:0;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translateX(-130%);transform:translateX(-130%)}
.slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner{-webkit-transition-delay:.52s;transition-delay:.52s}
.slider__slide-part:nth-child(4) .slider__slide-part-inner:before{left:-75vw;-webkit-transition-delay:.125s;transition-delay:.125s}
.slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner:before{-webkit-transition-delay:.52s;transition-delay:.52s}
.slider__slide.s--active .slider__slide-part-inner{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition-timing-function:ease;transition-timing-function:ease}
.slider__slide.s--active .slider__slide-part-inner:before{opacity:1}
.slider__control{z-index:100;position:absolute;left:50px;top:50%;width:50px;height:50px;margin-top:-25px;border-radius:50%;background:rgba(255,255,255,.4);-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0;-webkit-transition:all .5s 1s;transition:all .5s 1s;cursor:pointer}
.slider__control:before{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border:2px solid #000;border-bottom:none;border-right:none;-webkit-transform:translateX(5px) rotate(-45deg);transform:translateX(5px) rotate(-45deg)}
.slider__control--right{left:auto;right:50px;-webkit-transform:translateX(50px);transform:translateX(50px)}
.slider__control--right:before{-webkit-transform:translateX(-5px) rotate(135deg);transform:translateX(-5px) rotate(135deg)}
.slider.s--ready .slider__control{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}

CDN react.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>

CDN react-dom.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>

CDN index.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js"></script>

JS

class CitiesSlider extends React.Component {
constructor(props) {
super(props);
this.IMAGE_PARTS = 4;
this.changeTO = null;
this.AUTOCHANGE_TIME = 4000;
this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };
}
componentWillUnmount() {
window.clearTimeout(this.changeTO);
}
componentDidMount() {
this.runAutochangeTO();
setTimeout(() => {
this.setState({ activeSlide: 0, sliderReady: true });
}, 0);
}
runAutochangeTO() {
this.changeTO = setTimeout(() => {
this.changeSlides(1);
this.runAutochangeTO();
}, this.AUTOCHANGE_TIME);
}
changeSlides(change) {
window.clearTimeout(this.changeTO);
const { length } = this.props.slides;
const prevSlide = this.state.activeSlide;
let activeSlide = prevSlide + change;
if (activeSlide < 0) activeSlide = length - 1;
if (activeSlide >= length) activeSlide = 0;
this.setState({ activeSlide, prevSlide });
}
render() {
const { activeSlide, prevSlide, sliderReady } = this.state;
return (
React.createElement("div", { className: classNames('slider', { 's--ready': sliderReady }) },
React.createElement("p", { className: "slider__top-heading" }, "Travelers"),
React.createElement("div", { className: "slider__slides" },
this.props.slides.map((slide, index) =>
React.createElement("div", {
className: classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index }),
key: slide.city },
React.createElement("div", { className: "slider__slide-content" },
React.createElement("h3", { className: "slider__slide-subheading" }, slide.country || slide.city),
React.createElement("h2", { className: "slider__slide-heading" },
slide.city.split('').map(l => React.createElement("span", null, l))),
React.createElement("p", { className: "slider__slide-readmore" }, "read more")),
React.createElement("div", { className: "slider__slide-parts" },
[...Array(this.IMAGE_PARTS).fill()].map((x, i) =>
React.createElement("div", { className: "slider__slide-part", key: i },
React.createElement("div", { className: "slider__slide-part-inner", style: { backgroundImage: `url(${slide.img})` } }))))))),


React.createElement("div", { className: "slider__control", onClick: () => this.changeSlides(-1) }),
React.createElement("div", { className: "slider__control slider__control--right", onClick: () => this.changeSlides(1) })));
}}
const slides = [
{
city: 'Paris',
country: 'France',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/paris.jpg' },
{
city: 'Singapore',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/singapore.jpg' },
{
city: 'Prague',
country: 'Czech Republic',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/prague.jpg' },
{
city: 'Amsterdam',
country: 'Netherlands',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/amsterdam.jpg' },
{
city: 'Moscow',
country: 'Russia',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/moscow.jpg' }];

ReactDOM.render(React.createElement(CitiesSlider, { slides: slides }), document.querySelector('#app'));
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

Full screen Slider with Parallax