{"id":829,"date":"2023-03-25T21:31:00","date_gmt":"2023-03-25T18:31:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=829"},"modified":"2023-03-25T16:36:42","modified_gmt":"2023-03-25T13:36:42","slug":"slider","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/829\/","title":{"rendered":"Slider"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"866\" style=\"aspect-ratio: 1675 \/ 866;\" width=\"1675\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-25_14-28-37.webm\"><\/video><\/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 class=&quot;content-width&quot;&gt;\n    &lt;div class=&quot;slideshow&quot;&gt;\n      &lt;!-- Slideshow Items --&gt;\n      &lt;div class=&quot;slideshow-items&quot;&gt;\n        &lt;div class=&quot;item&quot;&gt;\n          &lt;div class=&quot;item-image-container&quot;&gt;\n            &lt;img class=&quot;item-image&quot; src=&quot;https:\/\/i.pinimg.com\/564x\/23\/a4\/86\/23a4860b8b70b1eb27f2791b97aaee8e.jpg&quot; \/&gt;\n          &lt;\/div&gt;\n          &lt;!-- Staggered Header Elements --&gt;\n          &lt;div class=&quot;item-header&quot;&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;N&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;i&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;k&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;e&lt;\/b&gt;&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;!-- Staggered Description Elements --&gt;\n          &lt;div class=&quot;item-description&quot;&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Nike&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;dolor&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;sit&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;amet,&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;consectetur&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;adipiscing&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;elit.&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Pellentesque&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;elementum&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;gravida&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ex&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;at&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;maximus.&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Nullam&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;quis&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;leo&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum.&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Lorem&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Nam&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;consectetur&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;malesuada&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;blandit.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Mauris&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;vulputate&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;purus&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;id&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;dolor&lt;\/b&gt;\n            &lt;\/span&gt; \n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;euismod&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;varius.&lt;\/b&gt;\n            &lt;\/span&gt;      \n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;item&quot;&gt;\n          &lt;div class=&quot;item-image-container&quot;&gt;\n            &lt;img class=&quot;item-image&quot; src=&quot;https:\/\/mir-s3-cdn-cf.behance.net\/project_modules\/max_1200\/a1232e48702241.589f548dc6bee.jpg&quot; \/&gt;\n          &lt;\/div&gt;\n          &lt;!-- Staggered Header Elements --&gt;\n          &lt;div class=&quot;item-header&quot;&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;S&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;p&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;o&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;t&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;i&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;f&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;y&lt;\/b&gt;&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;!-- Staggered Description Elements --&gt;\n          &lt;div class=&quot;item-description&quot;&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Spotify&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;dolor&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;sit&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;amet,&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;consectetur&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;adipiscing&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;elit.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Pellentesque&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;elementum&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;gravida&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ex&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;at&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;maximus.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Nullam&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;quis&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;leo&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Lorem&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Nam&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;consectetur&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;malesuada&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;blandit.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Mauris&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;vulputate&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;purus&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;id&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;dolor&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;euismod&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;varius.&lt;\/b&gt;\n            &lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;item&quot;&gt;\n          &lt;div class=&quot;item-image-container&quot;&gt;\n            &lt;img class=&quot;item-image&quot; src=&quot;https:\/\/images.unsplash.com\/photo-1544984243-ec57ea16fe25?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387&amp;q=80&quot; \/&gt;\n          &lt;\/div&gt;\n          &lt;!-- Staggered Header Elements --&gt;\n          &lt;div class=&quot;item-header&quot;&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;A&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;i&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;r&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;b&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;n&lt;\/b&gt;&lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;&lt;b&gt;b&lt;\/b&gt;&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;!-- Staggered Description Elements --&gt;\n          &lt;div class=&quot;item-description&quot;&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Airbnb&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;dolor&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;sit&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;amet,&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;consectetur&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;adipiscing&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;elit.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Pellentesque&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;elementum&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;gravida&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ex&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;at&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;maximus.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Nullam&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;quis&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;leo&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Lorem&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;ipsum&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Nam&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;consectetur&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;malesuada&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;blandit.&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;Mauris&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;vulputate&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;purus&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;id&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;dolor&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;euismod&lt;\/b&gt;\n            &lt;\/span&gt;\n            &lt;span class=&quot;vertical-part&quot;&gt;\n              &lt;b&gt;varius.&lt;\/b&gt;\n            &lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;controls&quot;&gt;\n        &lt;ul&gt;\n          &lt;li class=&quot;control&quot; data-index=&quot;0&quot;&gt;&lt;\/li&gt;\n          &lt;li class=&quot;control&quot; data-index=&quot;1&quot;&gt;&lt;\/li&gt;\n          &lt;li class=&quot;control&quot; data-index=&quot;2&quot;&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.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;}\">* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml, body {\n  width: 100%;\n  height: 100vh;\n  overflow: hidden; \n  background: #22222A;\n  font-family: 'Fira Mono', monospace;\n  -webkit-font-smoothing: antialiased;\n  font-size: .88rem;\n  color: #bdbdd5;\n}\n\n.content-width {\n  width: 86%;\n  height: 100vh;\n  margin: 0 auto;\n}\n\n.slideshow {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n}\n\n.slideshow-items {\n  position: relative;\n  width: 100%;\n  height: 300px;\n}\n\n.item {\n  position: absolute;\n  width: 100%;\n  height: auto;\n}\n\n.item-image-container {\n  position: relative;\n  width: 42%;\n}\n\n.item-image-container::before {\n  content: '';\n  position: absolute;\n  top: -1px;\n  left: 0;\n  width: 101%;\n  height: 101%;\n  background: #22222A;\n  opacity: 0;\n  z-index: 1;\n}\n\n.item-image {\n  position: relative;\n  width: 100%;\n  height: auto;\n  opacity: 0;\n  display: block;\n  \/* transition: property name | duration | timing-function | delay  *\/\n  transition: opacity .3s ease-out .45s;\n}\n\n.item.active .item-image {\n  opacity: 1;\n}\n\n.item.active .item-image-container::before {\n  opacity: .8;\n}\n\n.item-description {\n  position: absolute;\n  top: 182px;\n  right: 0;\n  width: 50%;\n  padding-right: 4%;\n  line-height: 1.8;\n}\n\n\/* Staggered Vertical Items ------------------------------------------------------*\/\n.item-header {\n  position: absolute;\n  top: 150px;\n  left: -1.8%;\n  z-index: 100;\n}\n\n.item-header .vertical-part {\n  margin: 0 -4px;\n  font-family: 'Montserrat', sans-serif;\n  -webkit-font-smoothing: auto;\n  font-size: 7vw;\n  color: #fff;\n}\n\n.vertical-part {\n  overflow: hidden;\n  display: inline-block;\n}\n\n.vertical-part b {\n  display: inline-block;\n  transform: translateY(100%);\n}\n\n.item-header .vertical-part b {\n  transition: .5s;\n}\n\n.item-description .vertical-part b {\n  transition: .21s;\n}\n\n.item.active .item-header .vertical-part b {\n  transform: translateY(0);\n}\n\n.item.active .item-description .vertical-part b {\n  transform: translateY(0);\n}\n\n\/* Controls ----------------------------------------------------------------------*\/\n.controls {\n  position: relative;\n  text-align: right;\n  z-index: 1000;\n}\n\n.controls ul {\n  list-style: none;\n}\n\n.controls ul li {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  margin: 3px;\n  background:#bdbdd5;;\n  cursor: pointer;\n}\n\n.controls ul li.active {\n  background:#6a6a77;;\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;}\"><\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":832,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[17],"class_list":["post-829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/829","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=829"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/829\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/832"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}