{"id":1535,"date":"2023-06-03T23:10:47","date_gmt":"2023-06-03T20:10:47","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1535"},"modified":"2023-06-03T23:10:48","modified_gmt":"2023-06-03T20:10:48","slug":"slider-reactjs","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1535\/","title":{"rendered":"Slider (React)"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Slider (React)\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/_s99cZydc28?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;div id=&quot;app&quot;&gt;&lt;\/div&gt;\n\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.6.1\/react.min.js&quot;  &gt;&lt;\/script&gt; \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.6.1\/react-dom.min.js&quot;&gt;&lt;\/script&gt;\n \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/classnames\/2.2.5\/index.min.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">*, *:before, *:after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: &quot;Roboto&quot;, Helvetica, Arial, sans-serif;\n  background: #000;\n}\n\n.slider {\n  overflow: hidden;\n  position: relative;\n  height: 100vh;\n  color: #fff;\n}\n.slider__top-heading {\n  z-index: 12;\n  position: absolute;\n  left: 0;\n  top: 100px;\n  width: 100%;\n  text-align: center;\n  font-size: 16px;\n  text-transform: uppercase;\n  letter-spacing: 2.5px;\n  transition: all 0.5s 1s;\n  transform: translateY(-30px);\n  opacity: 0;\n}\n.slider.s--ready .slider__top-heading {\n  transform: translateY(0);\n  opacity: 1;\n}\n.slider__slides {\n  position: relative;\n  height: 100%;\n}\n.slider__slide {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.slider__slide.s--active {\n  pointer-events: auto;\n}\n.slider__slide-content {\n  z-index: 6;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: 100%;\n  text-transform: uppercase;\n  line-height: 1;\n}\n.slider__slide-subheading {\n  margin-bottom: 20px;\n  font-size: 24px;\n  letter-spacing: 2px;\n  transform: translateY(20px);\n  opacity: 0;\n  transition: 0.5s;\n}\n.slider__slide.s--active .slider__slide-subheading {\n  transition-delay: 0.65s;\n  opacity: 1;\n  transform: translateY(0);\n}\n.slider__slide-heading {\n  display: flex;\n  margin-bottom: 20px;\n  font-size: 60px;\n  letter-spacing: 12px;\n}\n.slider__slide-heading span {\n  display: block;\n  opacity: 0;\n  transform: translateY(-60px);\n  transition: all 0.3333333333s;\n}\n.slider__slide.s--prev .slider__slide-heading span {\n  transform: translateY(60px);\n}\n.slider__slide.s--active .slider__slide-heading span {\n  opacity: 1;\n  transform: translateY(0);\n}\n.slider__slide-heading span:nth-child(1) {\n  transition-delay: 0s;\n}\n.slider__slide.s--active .slider__slide-heading span:nth-child(1) {\n  transition-delay: 0.3333333333s;\n}\n.slider__slide-heading span:nth-child(2) {\n  transition-delay: 0.1s;\n}\n.slider__slide.s--active .slider__slide-heading span:nth-child(2) {\n  transition-delay: 0.4333333333s;\n}\n.slider__slide-heading span:nth-child(3) {\n  transition-delay: 0.2s;\n}\n.slider__slide.s--active .slider__slide-heading span:nth-child(3) {\n  transition-delay: 0.5333333333s;\n}\n.slider__slide-heading span:nth-child(4) {\n  transition-delay: 0.3s;\n}\n.slider__slide.s--active .slider__slide-heading span:nth-child(4) {\n  transition-delay: 0.6333333333s;\n}\n.slider__slide-heading span:nth-child(5) {\n  transition-delay: 0.4s;\n}\n.slider__slide.s--active .slider__slide-heading span:nth-child(5) {\n  transition-delay: 0.7333333333s;\n}\n.slider__slide-heading span:nth-child(6) {\n  transition-delay: 0.5s;\n}\n.slider__slide.s--active .slider__slide-heading span:nth-child(6) {\n  transition-delay: 0.8333333333s;\n}\n.slider__slide-heading span:nth-child(n+7) {\n  transition-delay: 0.6s;\n}\n.slider__slide.s--active .slider__slide-heading span:nth-child(n+7) {\n  transition-delay: 0.9333333333s;\n}\n.slider__slide-readmore {\n  position: relative;\n  font-size: 14px;\n  text-transform: lowercase;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  transform: translateY(-20px);\n  cursor: pointer;\n  opacity: 0;\n  transition: 0.5s;\n}\n.slider__slide.s--active .slider__slide-readmore {\n  transition-delay: 0.65s;\n  opacity: 1;\n  transform: translateY(0);\n}\n.slider__slide-readmore:before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: -2px;\n  top: -3px;\n  width: calc(100% + 4px);\n  height: calc(100% + 6px);\n  background: rgba(255, 255, 255, 0.4);\n  transform: scaleX(0.3);\n  transform-origin: 0 50%;\n  transition: transform 0.3s;\n}\n.slider__slide-readmore:hover:before {\n  transform: scaleX(1);\n}\n.slider__slide-parts {\n  position: absolute;\n  left: 0;\n  top: 0;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n.slider__slide-parts:after {\n  content: &quot;&quot;;\n  z-index: 5;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.1);\n}\n.slider__slide-part {\n  position: relative;\n  width: 25%;\n  height: 100%;\n}\n.slider__slide-part-inner {\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background-size: 0 0;\n  background-repeat: no-repeat;\n  transition: transform 0.5s ease-in-out;\n}\n.slider__slide-part-inner:before {\n  content: &quot;&quot;;\n  position: absolute;\n  width: 100vw;\n  height: 100%;\n  background-image: inherit;\n  background-size: cover;\n  background-position: center center;\n  transition: opacity 0.25s;\n  opacity: 0;\n}\n.slider__slide-part:nth-child(1) .slider__slide-part-inner {\n  z-index: 3;\n  transition-delay: 0.24s;\n  transform: translateX(-32.5%);\n}\n.slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner {\n  transition-delay: 0.28s;\n}\n.slider__slide-part:nth-child(1) .slider__slide-part-inner:before {\n  left: 0vw;\n  transition-delay: 0.365s;\n}\n.slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner:before {\n  transition-delay: 0.28s;\n}\n.slider__slide-part:nth-child(2) .slider__slide-part-inner {\n  z-index: 2;\n  transition-delay: 0.16s;\n  transform: translateX(-65%);\n}\n.slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner {\n  transition-delay: 0.36s;\n}\n.slider__slide-part:nth-child(2) .slider__slide-part-inner:before {\n  left: -25vw;\n  transition-delay: 0.285s;\n}\n.slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner:before {\n  transition-delay: 0.36s;\n}\n.slider__slide-part:nth-child(3) .slider__slide-part-inner {\n  z-index: 1;\n  transition-delay: 0.08s;\n  transform: translateX(-97.5%);\n}\n.slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner {\n  transition-delay: 0.44s;\n}\n.slider__slide-part:nth-child(3) .slider__slide-part-inner:before {\n  left: -50vw;\n  transition-delay: 0.205s;\n}\n.slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner:before {\n  transition-delay: 0.44s;\n}\n.slider__slide-part:nth-child(4) .slider__slide-part-inner {\n  z-index: 0;\n  transition-delay: 0s;\n  transform: translateX(-130%);\n}\n.slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner {\n  transition-delay: 0.52s;\n}\n.slider__slide-part:nth-child(4) .slider__slide-part-inner:before {\n  left: -75vw;\n  transition-delay: 0.125s;\n}\n.slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner:before {\n  transition-delay: 0.52s;\n}\n.slider__slide.s--active .slider__slide-part-inner {\n  transform: translateX(0);\n  transition-timing-function: ease;\n}\n.slider__slide.s--active .slider__slide-part-inner:before {\n  opacity: 1;\n}\n.slider__control {\n  z-index: 100;\n  position: absolute;\n  left: 50px;\n  top: 50%;\n  width: 50px;\n  height: 50px;\n  margin-top: -25px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.4);\n  transform: translateX(-50px);\n  opacity: 0;\n  transition: all 0.5s 1s;\n  cursor: pointer;\n}\n.slider__control:before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 20px;\n  height: 20px;\n  margin-left: -10px;\n  margin-top: -10px;\n  border: 2px solid #000;\n  border-bottom: none;\n  border-right: none;\n  transform: translateX(5px) rotate(-45deg);\n}\n.slider__control--right {\n  left: auto;\n  right: 50px;\n  transform: translateX(50px);\n}\n.slider__control--right:before {\n  transform: translateX(-5px) rotate(135deg);\n}\n.slider.s--ready .slider__control {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n.icon-link {\n  z-index: 100;\n  position: absolute;\n  left: 5px;\n  bottom: 5px;\n  width: 32px;\n}\n.icon-link img {\n  width: 100%;\n  vertical-align: top;\n}\n.icon-link--twitter {\n  left: auto;\n  right: 5px;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">class CitiesSlider extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.IMAGE_PARTS = 4;\n\n    this.changeTO = null;\n    this.AUTOCHANGE_TIME = 4000;\n\n    this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };\n  }\n\n  componentWillUnmount() {\n    window.clearTimeout(this.changeTO);\n  }\n\n  componentDidMount() {\n    this.runAutochangeTO();\n    setTimeout(() =&gt; {\n      this.setState({ activeSlide: 0, sliderReady: true });\n    }, 0);\n  }\n\n  runAutochangeTO() {\n    this.changeTO = setTimeout(() =&gt; {\n      this.changeSlides(1);\n      this.runAutochangeTO();\n    }, this.AUTOCHANGE_TIME);\n  }\n\n  changeSlides(change) {\n    window.clearTimeout(this.changeTO);\n    const { length } = this.props.slides;\n    const prevSlide = this.state.activeSlide;\n    let activeSlide = prevSlide + change;\n    if (activeSlide &lt; 0) activeSlide = length - 1;\n    if (activeSlide &gt;= length) activeSlide = 0;\n    this.setState({ activeSlide, prevSlide });\n  }\n\n  render() {\n    const { activeSlide, prevSlide, sliderReady } = this.state;\n    return \/*#__PURE__*\/(\n      React.createElement(&quot;div&quot;, { className: classNames('slider', { 's--ready': sliderReady }) }, \/*#__PURE__*\/\n      React.createElement(&quot;p&quot;, { className: &quot;slider__top-heading&quot; }, &quot;Travelers&quot;), \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, { className: &quot;slider__slides&quot; },\n      this.props.slides.map((slide, index) =&gt; \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, {\n        className: classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index }),\n        key: slide.city }, \/*#__PURE__*\/\n\n      React.createElement(&quot;div&quot;, { className: &quot;slider__slide-content&quot; }, \/*#__PURE__*\/\n      React.createElement(&quot;h3&quot;, { className: &quot;slider__slide-subheading&quot; }, slide.country || slide.city), \/*#__PURE__*\/\n      React.createElement(&quot;h2&quot;, { className: &quot;slider__slide-heading&quot; },\n      slide.city.split('').map(l =&gt; \/*#__PURE__*\/React.createElement(&quot;span&quot;, null, l))), \/*#__PURE__*\/\n\n      React.createElement(&quot;p&quot;, { className: &quot;slider__slide-readmore&quot; }, &quot;read more&quot;)), \/*#__PURE__*\/\n\n      React.createElement(&quot;div&quot;, { className: &quot;slider__slide-parts&quot; },\n      [...Array(this.IMAGE_PARTS).fill()].map((x, i) =&gt; \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, { className: &quot;slider__slide-part&quot;, key: i }, \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, { className: &quot;slider__slide-part-inner&quot;, style: { backgroundImage: `url(${slide.img})` } }))))))), \/*#__PURE__*\/\n\n\n\n\n\n\n      React.createElement(&quot;div&quot;, { className: &quot;slider__control&quot;, onClick: () =&gt; this.changeSlides(-1) }), \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, { className: &quot;slider__control slider__control--right&quot;, onClick: () =&gt; this.changeSlides(1) })));\n\n\n  }}\n\n\nconst slides = [\n{\n  city: 'Paris',\n  country: 'France',\n  img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/paris.jpg' },\n\n{\n  city: 'Singapore',\n  img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/singapore.jpg' },\n\n{\n  city: 'Prague',\n  country: 'Czech Republic',\n  img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/prague.jpg' },\n\n{\n  city: 'Amsterdam',\n  country: 'Netherlands',\n  img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/amsterdam.jpg' },\n\n{\n  city: 'Moscow',\n  country: 'Russia',\n  img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/moscow.jpg' }];\n\n\n\nReactDOM.render( \/*#__PURE__*\/React.createElement(CitiesSlider, { slides: slides }), document.querySelector('#app'));<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1536,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66,21],"tags":[],"class_list":["post-1535","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reactjs","category-slider"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1535"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1535\/revisions"}],"predecessor-version":[{"id":1537,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1535\/revisions\/1537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1536"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}