"slider rea"
Bootstrap 3.0.0 Snippet by mehedidb

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/suez/pen/OjGQza?depth=everything&order=popularity&page=9&q=react&show_forks=false" /> <style class="cp-pen-styles">*, *:before, *:after { 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 0.5s 1s; transition: all 0.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: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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: 0.5s; transition: 0.5s; } .slider__slide.s--active .slider__slide-subheading { -webkit-transition-delay: 0.65s; transition-delay: 0.65s; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .slider__slide-heading { display: -webkit-box; display: -ms-flexbox; 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 0.33333s; transition: all 0.33333s; } .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: 0.33333s; transition-delay: 0.33333s; } .slider__slide-heading span:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .slider__slide.s--active .slider__slide-heading span:nth-child(2) { -webkit-transition-delay: 0.43333s; transition-delay: 0.43333s; } .slider__slide-heading span:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .slider__slide.s--active .slider__slide-heading span:nth-child(3) { -webkit-transition-delay: 0.53333s; transition-delay: 0.53333s; } .slider__slide-heading span:nth-child(4) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .slider__slide.s--active .slider__slide-heading span:nth-child(4) { -webkit-transition-delay: 0.63333s; transition-delay: 0.63333s; } .slider__slide-heading span:nth-child(5) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .slider__slide.s--active .slider__slide-heading span:nth-child(5) { -webkit-transition-delay: 0.73333s; transition-delay: 0.73333s; } .slider__slide-heading span:nth-child(6) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .slider__slide.s--active .slider__slide-heading span:nth-child(6) { -webkit-transition-delay: 0.83333s; transition-delay: 0.83333s; } .slider__slide-heading span:nth-child(n+7) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .slider__slide.s--active .slider__slide-heading span:nth-child(n+7) { -webkit-transition-delay: 0.93333s; transition-delay: 0.93333s; } .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: 0.5s; transition: 0.5s; } .slider__slide.s--active .slider__slide-readmore { -webkit-transition-delay: 0.65s; transition-delay: 0.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, 0.4); -webkit-transform: scaleX(0.3); transform: scaleX(0.3); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.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: -ms-flexbox; 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, 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 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.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 0.25s; transition: opacity 0.25s; opacity: 0; } .slider__slide-part:nth-child(1) .slider__slide-part-inner { z-index: 3; -webkit-transition-delay: 0.24s; transition-delay: 0.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: 0.28s; transition-delay: 0.28s; } .slider__slide-part:nth-child(1) .slider__slide-part-inner:before { left: 0vw; -webkit-transition-delay: 0.365s; transition-delay: 0.365s; } .slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner:before { -webkit-transition-delay: 0.28s; transition-delay: 0.28s; } .slider__slide-part:nth-child(2) .slider__slide-part-inner { z-index: 2; -webkit-transition-delay: 0.16s; transition-delay: 0.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: 0.36s; transition-delay: 0.36s; } .slider__slide-part:nth-child(2) .slider__slide-part-inner:before { left: -25vw; -webkit-transition-delay: 0.285s; transition-delay: 0.285s; } .slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner:before { -webkit-transition-delay: 0.36s; transition-delay: 0.36s; } .slider__slide-part:nth-child(3) .slider__slide-part-inner { z-index: 1; -webkit-transition-delay: 0.08s; transition-delay: 0.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: 0.44s; transition-delay: 0.44s; } .slider__slide-part:nth-child(3) .slider__slide-part-inner:before { left: -50vw; -webkit-transition-delay: 0.205s; transition-delay: 0.205s; } .slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner:before { -webkit-transition-delay: 0.44s; transition-delay: 0.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: 0.52s; transition-delay: 0.52s; } .slider__slide-part:nth-child(4) .slider__slide-part-inner:before { left: -75vw; -webkit-transition-delay: 0.125s; transition-delay: 0.125s; } .slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner:before { -webkit-transition-delay: 0.52s; transition-delay: 0.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, 0.4); -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; -webkit-transition: all 0.5s 1s; transition: all 0.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; } .icon-link { z-index: 100; position: absolute; left: 5px; bottom: 5px; width: 32px; } .icon-link img { width: 100%; vertical-align: top; } .icon-link--twitter { left: auto; right: 5px; } </style></head><body> <div id="app"></div> <a href="https://dribbble.com/shots/3774469-T-R-A-V-E-L-E-R" target="_blank" class="icon-link"> <img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png"> </a> <a href="https://twitter.com/NikolayTalanov" target="_blank" class="icon-link icon-link--twitter"> <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png"> </a> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js'></script> <script >'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var CitiesSlider = function (_React$Component) { _inherits(CitiesSlider, _React$Component); function CitiesSlider(props) { _classCallCheck(this, CitiesSlider); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.IMAGE_PARTS = 4; _this.changeTO = null; _this.AUTOCHANGE_TIME = 4000; _this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false }; return _this; } CitiesSlider.prototype.componentWillUnmount = function componentWillUnmount() { window.clearTimeout(this.changeTO); }; CitiesSlider.prototype.componentDidMount = function componentDidMount() { var _this2 = this; this.runAutochangeTO(); setTimeout(function () { _this2.setState({ activeSlide: 0, sliderReady: true }); }, 0); }; CitiesSlider.prototype.runAutochangeTO = function runAutochangeTO() { var _this3 = this; this.changeTO = setTimeout(function () { _this3.changeSlides(1); _this3.runAutochangeTO(); }, this.AUTOCHANGE_TIME); }; CitiesSlider.prototype.changeSlides = function changeSlides(change) { window.clearTimeout(this.changeTO); var length = this.props.slides.length; var prevSlide = this.state.activeSlide; var activeSlide = prevSlide + change; if (activeSlide < 0) activeSlide = length - 1; if (activeSlide >= length) activeSlide = 0; this.setState({ activeSlide: activeSlide, prevSlide: prevSlide }); }; CitiesSlider.prototype.render = function render() { var _this4 = this; var _state = this.state; var activeSlide = _state.activeSlide; var prevSlide = _state.prevSlide; var sliderReady = _state.sliderReady; 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(function (slide, index) { return 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(function (l) { return React.createElement( 'span', null, l ); }) ), React.createElement( 'p', { className: 'slider__slide-readmore' }, 'read more' ) ), React.createElement( 'div', { className: 'slider__slide-parts' }, [].concat(Array(_this4.IMAGE_PARTS).fill()).map(function (x, i) { return 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: function onClick() { return _this4.changeSlides(-1); } }), React.createElement('div', { className: 'slider__control slider__control--right', onClick: function onClick() { return _this4.changeSlides(1); } }) ); }; return CitiesSlider; }(React.Component); var 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')); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: