{"id":310,"date":"2023-03-07T23:14:08","date_gmt":"2023-03-07T20:14:08","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=310"},"modified":"2023-03-28T23:44:22","modified_gmt":"2023-03-28T20:44:22","slug":"slajder-7","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/310\/","title":{"rendered":"Slider"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"951\" style=\"aspect-ratio: 1827 \/ 951;\" width=\"1827\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-07_21-09-00.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;demo-cont&quot;&gt;\n  &lt;!-- slider start --&gt;\n  &lt;div class=&quot;fnc-slider example-slider&quot;&gt;\n    &lt;div class=&quot;fnc-slider__slides&quot;&gt;\n      &lt;!-- slide start --&gt;\n      &lt;div class=&quot;fnc-slide m--blend-green m--active-slide&quot;&gt;\n        &lt;div class=&quot;fnc-slide__inner&quot;&gt;\n          &lt;div class=&quot;fnc-slide__mask&quot;&gt;\n            &lt;div class=&quot;fnc-slide__mask-inner&quot;&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;fnc-slide__content&quot;&gt;\n            &lt;h2 class=&quot;fnc-slide__heading&quot;&gt;\n              &lt;div class=&quot;fnc-slide__heading-line&quot;&gt;\n                &lt;span&gt;Black&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;fnc-slide__heading-line&quot;&gt;\n                &lt;span&gt;Widow&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/h2&gt;\n            &lt;button type=&quot;button&quot; class=&quot;fnc-slide__action-btn&quot;&gt;\n              Credits\n              &lt;span data-text=&quot;Credits&quot;&gt;Credits&lt;\/span&gt;\n            &lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!-- slide end --&gt;\n      &lt;!-- slide start --&gt;\n      &lt;div class=&quot;fnc-slide m--blend-dark&quot;&gt;\n        &lt;div class=&quot;fnc-slide__inner&quot;&gt;\n          &lt;div class=&quot;fnc-slide__mask&quot;&gt;\n            &lt;div class=&quot;fnc-slide__mask-inner&quot;&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;fnc-slide__content&quot;&gt;\n            &lt;h2 class=&quot;fnc-slide__heading&quot;&gt;\n              &lt;div class=&quot;fnc-slide__heading-line&quot;&gt;\n                &lt;span&gt;Captain&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;fnc-slide__heading-line&quot;&gt;\n                &lt;span&gt;America&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/h2&gt;\n            &lt;button type=&quot;button&quot; class=&quot;fnc-slide__action-btn&quot;&gt;\n              Credits\n              &lt;span data-text=&quot;Credits&quot;&gt;Credits&lt;\/span&gt;\n            &lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!-- slide end --&gt;\n      &lt;!-- slide start --&gt;\n      &lt;div class=&quot;fnc-slide m--blend-red&quot;&gt;\n        &lt;div class=&quot;fnc-slide__inner&quot;&gt;\n          &lt;div class=&quot;fnc-slide__mask&quot;&gt;\n            &lt;div class=&quot;fnc-slide__mask-inner&quot;&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;fnc-slide__content&quot;&gt;\n            &lt;h2 class=&quot;fnc-slide__heading&quot;&gt;\n              &lt;div class=&quot;fnc-slide__heading-line&quot;&gt;\n                &lt;span&gt;Iron&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;fnc-slide__heading-line&quot;&gt;\n                &lt;span&gt;Man&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/h2&gt;\n            &lt;button type=&quot;button&quot; class=&quot;fnc-slide__action-btn&quot;&gt;\n              Credits\n              &lt;span data-text=&quot;Credits&quot;&gt;Credits&lt;\/span&gt;\n            &lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!-- slide end --&gt;\n      &lt;!-- slide start --&gt;\n      &lt;div class=&quot;fnc-slide m--blend-blue&quot;&gt;\n        &lt;div class=&quot;fnc-slide__inner&quot;&gt;\n          &lt;div class=&quot;fnc-slide__mask&quot;&gt;\n            &lt;div class=&quot;fnc-slide__mask-inner&quot;&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;fnc-slide__content&quot;&gt;\n            &lt;h2 class=&quot;fnc-slide__heading&quot;&gt;\n              &lt;div class=&quot;fnc-slide__heading-line&quot;&gt;\n                &lt;span&gt;Thor&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;fnc-slide__heading-line&quot;&gt;\n                &lt;span&gt;Just Thor&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/h2&gt;\n            &lt;button type=&quot;button&quot; class=&quot;fnc-slide__action-btn&quot;&gt;\n              Credits\n              &lt;span data-text=&quot;Credits&quot;&gt;Credits&lt;\/span&gt;\n            &lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!-- slide end --&gt;\n    &lt;\/div&gt;\n    &lt;nav class=&quot;fnc-nav&quot;&gt;\n      &lt;div class=&quot;fnc-nav__bgs&quot;&gt;\n        &lt;div class=&quot;fnc-nav__bg m--navbg-green m--active-nav-bg&quot;&gt;&lt;\/div&gt;\n        &lt;div class=&quot;fnc-nav__bg m--navbg-dark&quot;&gt;&lt;\/div&gt;\n        &lt;div class=&quot;fnc-nav__bg m--navbg-red&quot;&gt;&lt;\/div&gt;\n        &lt;div class=&quot;fnc-nav__bg m--navbg-blue&quot;&gt;&lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;fnc-nav__controls&quot;&gt;\n        &lt;button class=&quot;fnc-nav__control&quot;&gt;\n          Black Widow\n          &lt;span class=&quot;fnc-nav__control-progress&quot;&gt;&lt;\/span&gt;\n        &lt;\/button&gt;\n        &lt;button class=&quot;fnc-nav__control&quot;&gt;\n          Captain America\n          &lt;span class=&quot;fnc-nav__control-progress&quot;&gt;&lt;\/span&gt;\n        &lt;\/button&gt;\n        &lt;button class=&quot;fnc-nav__control&quot;&gt;\n          Iron Man\n          &lt;span class=&quot;fnc-nav__control-progress&quot;&gt;&lt;\/span&gt;\n        &lt;\/button&gt;\n        &lt;button class=&quot;fnc-nav__control&quot;&gt;\n          Thor\n          &lt;span class=&quot;fnc-nav__control-progress&quot;&gt;&lt;\/span&gt;\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/nav&gt;\n  &lt;\/div&gt;\n  &lt;!-- slider end --&gt;\n  &lt;div class=&quot;demo-cont__credits&quot;&gt;\n    &lt;div class=&quot;demo-cont__credits-close&quot;&gt;&lt;\/div&gt;\n    &lt;h2 class=&quot;demo-cont__credits-heading&quot;&gt;text&lt;\/h2&gt;\n   \n    &lt;h3 class=&quot;demo-cont__credits-name&quot;&gt;text&lt;\/h3&gt;\n    &lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;demo-cont__credits-link&quot;&gt;link&lt;\/a&gt;\n    &lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;demo-cont__credits-link&quot;&gt;Link&lt;\/a&gt;\n    &lt;h2 class=&quot;demo-cont__credits-heading&quot;&gt;text&lt;\/h2&gt;\n    &lt;a href=&quot;https:\/\/dribbble.com\/shots\/2375246-Fashion-Butique-slider-animation&quot; target=&quot;_blank&quot; class=&quot;demo-cont__credits-link&quot;&gt;Concept by Kreativa Studio&lt;\/a&gt;\n    &lt;h4 class=&quot;demo-cont__credits-blend&quot;&gt;Global Blend Mode&lt;\/h4&gt;\n    &lt;div class=&quot;colorful-switch&quot;&gt;\n      &lt;input type=&quot;checkbox&quot; class=&quot;colorful-switch__checkbox js-activate-global-blending&quot; id=&quot;colorful-switch-cb&quot; \/&gt;\n      &lt;label class=&quot;colorful-switch__label&quot; for=&quot;colorful-switch-cb&quot;&gt;\n        &lt;span class=&quot;colorful-switch__bg&quot;&gt;&lt;\/span&gt;\n        &lt;span class=&quot;colorful-switch__dot&quot;&gt;&lt;\/span&gt;\n        &lt;span class=&quot;colorful-switch__on&quot;&gt;\n          &lt;span class=&quot;colorful-switch__on__inner&quot;&gt;&lt;\/span&gt;\n        &lt;\/span&gt;\n        &lt;span class=&quot;colorful-switch__off&quot;&gt;&lt;\/span&gt;\n      &lt;\/label&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\/\/\u0410\u0432\u0442\u043e\u0440: Nikolay Talanov. @suez<\/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;}\">.fnc {\n  \/* you can add color names and their values here\n  and then simply add classes like .m--blend-$colorName to .fnc-slide \n  to apply specific color for mask blend mode *\/\n}\n.fnc-slider {\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  height: 100vh;\n}\n.fnc-slider *, .fnc-slider *:before, .fnc-slider *:after {\n  box-sizing: border-box;\n}\n.fnc-slider__slides {\n  position: relative;\n  height: 100%;\n  transition: transform 1s 0.6666666667s;\n}\n.fnc-slider .m--blend-dark .fnc-slide__inner {\n  background-color: #8a8a8a;\n}\n.fnc-slider .m--blend-dark .fnc-slide__mask-inner {\n  background-color: #575757;\n}\n.fnc-slider .m--navbg-dark {\n  background-color: #575757;\n}\n.fnc-slider .m--blend-green .fnc-slide__inner {\n  background-color: #6d9b98;\n}\n.fnc-slider .m--blend-green .fnc-slide__mask-inner {\n  background-color: #42605E;\n}\n.fnc-slider .m--navbg-green {\n  background-color: #42605E;\n}\n.fnc-slider .m--blend-red .fnc-slide__inner {\n  background-color: #ea2329;\n}\n.fnc-slider .m--blend-red .fnc-slide__mask-inner {\n  background-color: #990e13;\n}\n.fnc-slider .m--navbg-red {\n  background-color: #990e13;\n}\n.fnc-slider .m--blend-blue .fnc-slide__inner {\n  background-color: #59aecb;\n}\n.fnc-slider .m--blend-blue .fnc-slide__mask-inner {\n  background-color: #2D7791;\n}\n.fnc-slider .m--navbg-blue {\n  background-color: #2D7791;\n}\n.fnc-slide {\n  overflow: hidden;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  transform: translate3d(0, 0, 0);\n}\n.fnc-slide.m--before-sliding {\n  z-index: 2 !important;\n  transform: translate3d(100%, 0, 0);\n}\n.fnc-slide.m--active-slide {\n  z-index: 1;\n  transition: transform 1s 0.6666666667s ease-in-out;\n  transform: translate3d(0, 0, 0);\n}\n.fnc-slide__inner {\n  position: relative;\n  height: 100%;\n  background-size: cover;\n  background-position: center top;\n  transform: translate3d(0, 0, 0);\n}\n.m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner {\n  background-blend-mode: luminosity;\n}\n.m--before-sliding .fnc-slide__inner {\n  transform: translate3d(-100%, 0, 0);\n}\n.m--active-slide .fnc-slide__inner {\n  transition: transform 1s 0.6666666667s ease-in-out;\n  transform: translate3d(0, 0, 0);\n}\n.fnc-slide__mask {\n  overflow: hidden;\n  z-index: 1;\n  position: absolute;\n  right: 60%;\n  top: 15%;\n  width: 50.25vh;\n  height: 67vh;\n  margin-right: -90px;\n  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);\n          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);\n  transform-origin: 50% 0;\n  transition-timing-function: ease-in-out;\n}\n.m--before-sliding .fnc-slide__mask {\n  transform: rotate(-10deg) translate3d(200px, 0, 0);\n  opacity: 0;\n}\n.m--active-slide .fnc-slide__mask {\n  transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s;\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n.m--previous-slide .fnc-slide__mask {\n  transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s;\n  transform: rotate(10deg) translate3d(-200px, 0, 0);\n  opacity: 0;\n}\n.fnc-slide__mask-inner {\n  z-index: -1;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 100vw;\n  height: 100vh;\n  margin-left: -50vw;\n  margin-top: -50vh;\n  background-size: cover;\n  background-position: center center;\n  background-blend-mode: luminosity;\n  transform-origin: 50% 16.5vh;\n  transition-timing-function: ease-in-out;\n}\n.m--before-sliding .fnc-slide__mask-inner {\n  transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);\n}\n.m--active-slide .fnc-slide__mask-inner {\n  transition: transform 0.7s 1.2222222222s;\n  transform: translateX(0);\n}\n.m--previous-slide .fnc-slide__mask-inner {\n  transition: transform 0.7s 0.3333333333s;\n  transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);\n}\n.fnc-slide__content {\n  z-index: 2;\n  position: absolute;\n  left: 40%;\n  top: 40%;\n}\n.fnc-slide__heading {\n  margin-bottom: 10px;\n  text-transform: uppercase;\n}\n.fnc-slide__heading-line {\n  overflow: hidden;\n  position: relative;\n  padding-right: 20px;\n  font-size: 100px;\n  color: #fff;\n  word-spacing: 10px;\n}\n.fnc-slide__heading-line:nth-child(2) {\n  padding-left: 30px;\n}\n.m--before-sliding .fnc-slide__heading-line {\n  transform: translateY(100%);\n}\n.m--active-slide .fnc-slide__heading-line {\n  transition: transform 1.5s 1s;\n  transform: translateY(0);\n}\n.m--previous-slide .fnc-slide__heading-line {\n  transition: transform 1.5s;\n  transform: translateY(-100%);\n}\n.fnc-slide__heading-line span {\n  display: block;\n}\n.m--before-sliding .fnc-slide__heading-line span {\n  transform: translateY(-100%);\n}\n.m--active-slide .fnc-slide__heading-line span {\n  transition: transform 1.5s 1s;\n  transform: translateY(0);\n}\n.m--previous-slide .fnc-slide__heading-line span {\n  transition: transform 1.5s;\n  transform: translateY(100%);\n}\n.fnc-slide__action-btn {\n  position: relative;\n  margin-left: 200px;\n  padding: 5px 15px;\n  font-size: 20px;\n  line-height: 1;\n  color: transparent;\n  border: none;\n  text-transform: uppercase;\n  background: transparent;\n  cursor: pointer;\n  text-align: center;\n  outline: none;\n}\n.fnc-slide__action-btn span {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  perspective: 1000px;\n  transform-style: preserve-3d;\n  transition: transform 0.3s;\n  transform-origin: 50% 0;\n  line-height: 30px;\n  color: #fff;\n}\n.fnc-slide__action-btn span:before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  border: 2px solid #fff;\n  border-top: none;\n  border-bottom: none;\n}\n.fnc-slide__action-btn span:after {\n  content: attr(data-text);\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  line-height: 30px;\n  background: #1F2833;\n  opacity: 0;\n  transform-origin: 50% 0;\n  transform: translateY(100%) rotateX(-90deg);\n  transition: opacity 0.15s 0.15s;\n}\n.fnc-slide__action-btn:hover span {\n  transform: rotateX(90deg);\n}\n.fnc-slide__action-btn:hover span:after {\n  opacity: 1;\n  transition: opacity 0.15s;\n}\n.fnc-nav {\n  z-index: 5;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n}\n.fnc-nav__bgs {\n  z-index: -1;\n  overflow: hidden;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n.fnc-nav__bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n.fnc-nav__bg.m--nav-bg-before {\n  z-index: 2 !important;\n  transform: translateX(100%);\n}\n.fnc-nav__bg.m--active-nav-bg {\n  z-index: 1;\n  transition: transform 1s 0.6666666667s;\n  transform: translateX(0);\n}\n.fnc-nav__controls {\n  font-size: 0;\n}\n.fnc-nav__control {\n  overflow: hidden;\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  width: 100px;\n  height: 50px;\n  font-size: 14px;\n  color: #fff;\n  text-transform: uppercase;\n  background: transparent;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: background-color 0.5s;\n}\n.fnc-nav__control.m--active-control {\n  background: #1F2833;\n}\n.fnc-nav__control-progress {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n  transform-origin: 0 50%;\n  transform: scaleX(0);\n  transition-timing-function: linear !important;\n}\n.m--with-autosliding .m--active-control .fnc-nav__control-progress {\n  transform: scaleX(1);\n}\n.m--prev-control .fnc-nav__control-progress {\n  transform: translateX(100%);\n  transition: transform 0.5s !important;\n}\n.m--reset-progress .fnc-nav__control-progress {\n  transform: scaleX(0);\n  transition: transform 0s 0s !important;\n}\n.m--autosliding-blocked .fnc-nav__control-progress {\n  transition: all 0s 0s !important;\n  transform: scaleX(0) !important;\n}\n\n\/* NOT PART OF COMMON SLIDER STYLES *\/\nbody {\n  margin: 0;\n}\n\n.demo-cont {\n  overflow: hidden;\n  position: relative;\n  height: 100vh;\n  perspective: 1500px;\n  background: #000;\n}\n.demo-cont__credits {\n  box-sizing: border-box;\n  overflow-y: auto;\n  z-index: 1;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 400px;\n  height: 100%;\n  padding: 20px 10px 30px;\n  background: #303030;\n  font-family: &quot;Open Sans&quot;, Helvetica, Arial, sans-serif;\n  color: #fff;\n  text-align: center;\n  transition: transform 0.7s;\n  transform: translate3d(100%, 0, 0) rotateY(-45deg);\n  will-change: transform;\n}\n.credits-active .demo-cont__credits {\n  transition: transform 0.7s 0.2333333333s;\n  transform: translate3d(0, 0, 0);\n}\n.demo-cont__credits *, .demo-cont__credits *:before, .demo-cont__credits *:after {\n  box-sizing: border-box;\n}\n.demo-cont__credits-close {\n  position: absolute;\n  right: 20px;\n  top: 20px;\n  width: 28px;\n  height: 28px;\n  cursor: pointer;\n}\n.demo-cont__credits-close:before, .demo-cont__credits-close:after {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n  height: 2px;\n  margin-top: -1px;\n  background: #fff;\n}\n.demo-cont__credits-close:before {\n  transform: rotate(45deg);\n}\n.demo-cont__credits-close:after {\n  transform: rotate(-45deg);\n}\n.demo-cont__credits-heading {\n  text-transform: uppercase;\n  font-size: 40px;\n  margin-bottom: 20px;\n}\n.demo-cont__credits-img {\n  display: block;\n  width: 60%;\n  margin: 0 auto 30px;\n  border-radius: 10px;\n}\n.demo-cont__credits-name {\n  margin-bottom: 20px;\n  font-size: 30px;\n}\n.demo-cont__credits-link {\n  display: block;\n  margin-bottom: 10px;\n  font-size: 24px;\n  color: #fff;\n}\n.demo-cont__credits-blend {\n  font-size: 30px;\n  margin-bottom: 10px;\n}\n\n.example-slider {\n  z-index: 2;\n  transform: translate3d(0, 0, 0);\n  transition: transform 0.7s;\n}\n.credits-active .example-slider {\n  transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9);\n}\n.example-slider .fnc-slide-1 .fnc-slide__inner,\n.example-slider .fnc-slide-1 .fnc-slide__mask-inner {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/blackwidow.jpg&quot;);\n}\n.example-slider .fnc-slide-2 .fnc-slide__inner,\n.example-slider .fnc-slide-2 .fnc-slide__mask-inner {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/captainamerica.jpg&quot;);\n}\n.example-slider .fnc-slide-3 .fnc-slide__inner,\n.example-slider .fnc-slide-3 .fnc-slide__mask-inner {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/ironman-alt.jpg&quot;);\n}\n.example-slider .fnc-slide-3 .fnc-slide__inner:before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.1);\n}\n.example-slider .fnc-slide-4 .fnc-slide__inner,\n.example-slider .fnc-slide-4 .fnc-slide__mask-inner {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/thor.jpg&quot;);\n}\n.example-slider .fnc-slide-4 .fnc-slide__inner:before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.2);\n}\n.example-slider .fnc-slide__heading,\n.example-slider .fnc-slide__action-btn,\n.example-slider .fnc-nav__control {\n  font-family: &quot;Open Sans&quot;, Helvetica, Arial, sans-serif;\n}\n\n\/* COLORFUL SWITCH STYLES \n   ORIGINAL DEMO - https:\/\/codepen.io\/suez\/pen\/WQjwOb *\/\n.colorful-switch {\n  position: relative;\n  width: 180px;\n  height: 77.1428571429px;\n  margin: 0 auto;\n  border-radius: 32.1428571429px;\n  background: #cfcfcf;\n}\n.colorful-switch:before {\n  content: &quot;&quot;;\n  z-index: -1;\n  position: absolute;\n  left: -5px;\n  top: -5px;\n  width: 190px;\n  height: 87.1428571429px;\n  border-radius: 37.1428571429px;\n  background: #314239;\n  transition: background-color 0.3s;\n}\n.colorful-switch:hover:before {\n  background: #4C735F;\n}\n.colorful-switch__checkbox {\n  z-index: -10;\n  position: absolute;\n  left: 0;\n  top: 0;\n  opacity: 0;\n}\n.colorful-switch__label {\n  z-index: 1;\n  overflow: hidden;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 32.1428571429px;\n  cursor: pointer;\n}\n.colorful-switch__bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 540px;\n  height: 100%;\n  background: linear-gradient(90deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%);\n  transition: transform 0.5s;\n  transform: translate3d(-360px, 0, 0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg {\n  transform: translate3d(0, 0, 0);\n}\n.colorful-switch__dot {\n  position: absolute;\n  left: 131.1428571429px;\n  top: 50%;\n  width: 5.1428571429px;\n  height: 5.1428571429px;\n  margin-left: -2.5714285714px;\n  margin-top: -2.5714285714px;\n  border-radius: 50%;\n  background: #fff;\n  transition: transform 0.5s;\n  transform: translate3d(0, 0, 0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot {\n  transform: translate3d(-80.3571428571px, 0, 0);\n}\n.colorful-switch__on {\n  position: absolute;\n  left: 104.1428571429px;\n  top: 22.5px;\n  width: 19.2857142857px;\n  height: 36px;\n  transition: transform 0.5s;\n  transform: translate3d(0, 0, 0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on {\n  transform: translate3d(-80.3571428571px, 0, 0);\n}\n.colorful-switch__on__inner {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);\n  transform-origin: 100% 50%;\n  transform: rotate(45deg) scale(0) translateZ(0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner {\n  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);\n  transform: rotate(45deg) scale(1) translateZ(0);\n}\n.colorful-switch__on__inner:before, .colorful-switch__on__inner:after {\n  content: &quot;&quot;;\n  position: absolute;\n  border-radius: 2.5714285714px;\n  background: #fff;\n}\n.colorful-switch__on__inner:before {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 6.1428571429px;\n}\n.colorful-switch__on__inner:after {\n  right: 0;\n  top: 0;\n  width: 6.1428571429px;\n  height: 100%;\n}\n.colorful-switch__off {\n  position: absolute;\n  left: 131.1428571429px;\n  top: 50%;\n  width: 41.1428571429px;\n  height: 41.1428571429px;\n  margin-left: -20.5714285714px;\n  margin-top: -20.5714285714px;\n  transition: transform 0.5s;\n  transform: translate3d(0, 0, 0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off {\n  transform: translate3d(-80.3571428571px, 0, 0);\n}\n.colorful-switch__off:before, .colorful-switch__off:after {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n  height: 5.1428571429px;\n  margin-top: -2.5714285714px;\n  border-radius: 2.5714285714px;\n  background: #fff;\n  transition: transform 0.25s 0.25s;\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {\n  transition-delay: 0s;\n}\n.colorful-switch__off:before {\n  transform: rotate(45deg) scaleX(1) translateZ(0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before {\n  transform: rotate(45deg) scaleX(0) translateZ(0);\n}\n.colorful-switch__off:after {\n  transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);\n  transform: rotate(-45deg) scaleX(1) translateZ(0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {\n  transition-timing-function: ease;\n  transform: rotate(-45deg) scaleX(0) translateZ(0);\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;}\">(function () {\n  var $$ = function (selector, context) {\n    var context = context || document;\n    var elements = context.querySelectorAll(selector);\n    return [].slice.call(elements);\n  };\n\n  function _fncSliderInit($slider, options) {\n    var prefix = &quot;.fnc-&quot;;\n\n    var $slider = $slider;\n    var $slidesCont = $slider.querySelector(prefix + &quot;slider__slides&quot;);\n    var $slides = $$(prefix + &quot;slide&quot;, $slider);\n    var $controls = $$(prefix + &quot;nav__control&quot;, $slider);\n    var $controlsBgs = $$(prefix + &quot;nav__bg&quot;, $slider);\n    var $progressAS = $$(prefix + &quot;nav__control-progress&quot;, $slider);\n\n    var numOfSlides = $slides.length;\n    var curSlide = 1;\n    var sliding = false;\n    var slidingAT =\n      +parseFloat(getComputedStyle($slidesCont)[&quot;transition-duration&quot;]) * 1000;\n    var slidingDelay =\n      +parseFloat(getComputedStyle($slidesCont)[&quot;transition-delay&quot;]) * 1000;\n\n    var autoSlidingActive = false;\n    var autoSlidingTO;\n    var autoSlidingDelay = 5000; \/\/ default autosliding delay value\n    var autoSlidingBlocked = false;\n\n    var $activeSlide;\n    var $activeControlsBg;\n    var $prevControl;\n\n    function setIDs() {\n      $slides.forEach(function ($slide, index) {\n        $slide.classList.add(&quot;fnc-slide-&quot; + (index + 1));\n      });\n\n      $controls.forEach(function ($control, index) {\n        $control.setAttribute(&quot;data-slide&quot;, index + 1);\n        $control.classList.add(&quot;fnc-nav__control-&quot; + (index + 1));\n      });\n\n      $controlsBgs.forEach(function ($bg, index) {\n        $bg.classList.add(&quot;fnc-nav__bg-&quot; + (index + 1));\n      });\n    }\n\n    setIDs();\n\n    function afterSlidingHandler() {\n      $slider\n        .querySelector(&quot;.m--previous-slide&quot;)\n        .classList.remove(&quot;m--active-slide&quot;, &quot;m--previous-slide&quot;);\n      $slider\n        .querySelector(&quot;.m--previous-nav-bg&quot;)\n        .classList.remove(&quot;m--active-nav-bg&quot;, &quot;m--previous-nav-bg&quot;);\n\n      $activeSlide.classList.remove(&quot;m--before-sliding&quot;);\n      $activeControlsBg.classList.remove(&quot;m--nav-bg-before&quot;);\n      $prevControl.classList.remove(&quot;m--prev-control&quot;);\n      $prevControl.classList.add(&quot;m--reset-progress&quot;);\n      var triggerLayout = $prevControl.offsetTop;\n      $prevControl.classList.remove(&quot;m--reset-progress&quot;);\n\n      sliding = false;\n      var layoutTrigger = $slider.offsetTop;\n\n      if (autoSlidingActive &amp;&amp; !autoSlidingBlocked) {\n        setAutoslidingTO();\n      }\n    }\n\n    function performSliding(slideID) {\n      if (sliding) return;\n      sliding = true;\n      window.clearTimeout(autoSlidingTO);\n      curSlide = slideID;\n\n      $prevControl = $slider.querySelector(&quot;.m--active-control&quot;);\n      $prevControl.classList.remove(&quot;m--active-control&quot;);\n      $prevControl.classList.add(&quot;m--prev-control&quot;);\n      $slider\n        .querySelector(prefix + &quot;nav__control-&quot; + slideID)\n        .classList.add(&quot;m--active-control&quot;);\n\n      $activeSlide = $slider.querySelector(prefix + &quot;slide-&quot; + slideID);\n      $activeControlsBg = $slider.querySelector(prefix + &quot;nav__bg-&quot; + slideID);\n\n      $slider\n        .querySelector(&quot;.m--active-slide&quot;)\n        .classList.add(&quot;m--previous-slide&quot;);\n      $slider\n        .querySelector(&quot;.m--active-nav-bg&quot;)\n        .classList.add(&quot;m--previous-nav-bg&quot;);\n\n      $activeSlide.classList.add(&quot;m--before-sliding&quot;);\n      $activeControlsBg.classList.add(&quot;m--nav-bg-before&quot;);\n\n      var layoutTrigger = $activeSlide.offsetTop;\n\n      $activeSlide.classList.add(&quot;m--active-slide&quot;);\n      $activeControlsBg.classList.add(&quot;m--active-nav-bg&quot;);\n\n      setTimeout(afterSlidingHandler, slidingAT + slidingDelay);\n    }\n\n    function controlClickHandler() {\n      if (sliding) return;\n      if (this.classList.contains(&quot;m--active-control&quot;)) return;\n      if (options.blockASafterClick) {\n        autoSlidingBlocked = true;\n        $slider.classList.add(&quot;m--autosliding-blocked&quot;);\n      }\n\n      var slideID = +this.getAttribute(&quot;data-slide&quot;);\n\n      performSliding(slideID);\n    }\n\n    $controls.forEach(function ($control) {\n      $control.addEventListener(&quot;click&quot;, controlClickHandler);\n    });\n\n    function setAutoslidingTO() {\n      window.clearTimeout(autoSlidingTO);\n      var delay = +options.autoSlidingDelay || autoSlidingDelay;\n      curSlide++;\n      if (curSlide &gt; numOfSlides) curSlide = 1;\n\n      autoSlidingTO = setTimeout(function () {\n        performSliding(curSlide);\n      }, delay);\n    }\n\n    if (options.autoSliding || +options.autoSlidingDelay &gt; 0) {\n      if (options.autoSliding === false) return;\n\n      autoSlidingActive = true;\n      setAutoslidingTO();\n\n      $slider.classList.add(&quot;m--with-autosliding&quot;);\n      var triggerLayout = $slider.offsetTop;\n\n      var delay = +options.autoSlidingDelay || autoSlidingDelay;\n      delay += slidingDelay + slidingAT;\n\n      $progressAS.forEach(function ($progress) {\n        $progress.style.transition = &quot;transform &quot; + delay \/ 1000 + &quot;s&quot;;\n      });\n    }\n\n    $slider\n      .querySelector(&quot;.fnc-nav__control:first-child&quot;)\n      .classList.add(&quot;m--active-control&quot;);\n  }\n\n  var fncSlider = function (sliderSelector, options) {\n    var $sliders = $$(sliderSelector);\n\n    $sliders.forEach(function ($slider) {\n      _fncSliderInit($slider, options);\n    });\n  };\n\n  window.fncSlider = fncSlider;\n})();\n\n\/* not part of the slider scripts *\/\n\n\/* Slider initialization\noptions:\nautoSliding - boolean\nautoSlidingDelay - delay in ms. If audoSliding is on and no value provided, default value is 5000\nblockASafterClick - boolean. If user clicked any sliding control, autosliding won't start again\n*\/\nfncSlider(&quot;.example-slider&quot;, { autoSlidingDelay: 4000 });\n\nvar $demoCont = document.querySelector(&quot;.demo-cont&quot;);\n\n[].slice\n  .call(document.querySelectorAll(&quot;.fnc-slide__action-btn&quot;))\n  .forEach(function ($btn) {\n    $btn.addEventListener(&quot;click&quot;, function () {\n      $demoCont.classList.toggle(&quot;credits-active&quot;);\n    });\n  });\n\ndocument\n  .querySelector(&quot;.demo-cont__credits-close&quot;)\n  .addEventListener(&quot;click&quot;, function () {\n    $demoCont.classList.remove(&quot;credits-active&quot;);\n  });\n\ndocument\n  .querySelector(&quot;.js-activate-global-blending&quot;)\n  .addEventListener(&quot;click&quot;, function () {\n    document\n      .querySelector(&quot;.example-slider&quot;)\n      .classList.toggle(&quot;m--global-blending-active&quot;);\n  });\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/310","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=310"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/310\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/312"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}