{"id":405,"date":"2023-03-08T13:31:44","date_gmt":"2023-03-08T10:31:44","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=405"},"modified":"2023-03-28T23:45:22","modified_gmt":"2023-03-28T20:45:22","slug":"vertikalnyj-slajder-2","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/405\/","title":{"rendered":"Vertical slider"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"953\" style=\"aspect-ratio: 1786 \/ 953;\" width=\"1786\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-08_11-28-23.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;slider3d first&quot;&gt;\n  &lt;div class=&quot;slider3d__wrapper&quot;&gt;\n    &lt;div class=&quot;slider3d__inner&quot;&gt;\n      &lt;div class=&quot;slider3d__rotater&quot;&gt;\n        &lt;div class=&quot;slider3d__item&quot;&gt;\n          &lt;h2 class=&quot;slider3d__heading&quot; data-text=&quot;SO HEADING&quot;&gt;SO HEADING&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;slider3d__item&quot;&gt;\n          &lt;h2 class=&quot;slider3d__heading&quot; data-text=&quot;MUCH ROTATION&quot;&gt;MUCH ROTATION&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;slider3d__item&quot;&gt;\n          &lt;h2 class=&quot;slider3d__heading&quot; data-text=&quot;VERY 3D&quot;&gt;VERY 3D&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;slider3d__item&quot;&gt;\n          &lt;h2 class=&quot;slider3d__heading&quot; data-text=&quot;SUCH JAVASCRIPT&quot;&gt;SUCH JAVASCRIPT&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;slider3d__item&quot;&gt;\n          &lt;h2 class=&quot;slider3d__heading&quot; data-text=&quot;WOW WOW!&quot;&gt;WOW WOW!&lt;\/h2&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;slider3d__controls&quot;&gt;\n    &lt;div class=&quot;slider3d__handle&quot;&gt;\n      &lt;div class=&quot;slider3d__handle__inner&quot;&gt;\n        &lt;div class=&quot;slider3d__handle__rotater&quot;&gt;\n          &lt;div class=&quot;slider3d__handle__item active&quot;&gt;Page 1&lt;\/div&gt;\n          &lt;div class=&quot;slider3d__handle__item&quot;&gt;Page 2&lt;\/div&gt;\n          &lt;div class=&quot;slider3d__handle__item&quot;&gt;Page 3&lt;\/div&gt;\n          &lt;div class=&quot;slider3d__handle__item&quot;&gt;Page 4&lt;\/div&gt;\n          &lt;div class=&quot;slider3d__handle__item&quot;&gt;Page 5&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;slider3d__control m--up&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;slider3d__control m--down&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\/\/\u0421\u043a\u0440\u0438\u043f\u0442 js \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c\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;}\">*, *:before, *:after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml, body {\n  font-size: 62.5%;\n}\n@media (max-width: 991px) {\n  html, body {\n    font-size: 50%;\n  }\n}\n@media (max-width: 768px) {\n  html, body {\n    font-size: 40%;\n  }\n}\n\nbody {\n  background: #777;\n}\n\n.slider3d__handle__rotater, .slider3d__handle__inner, .slider3d__rotater, .slider3d__inner {\n  position: relative;\n  height: 100%;\n  transform-style: preserve-3d;\n}\n\n.slider3d {\n  overflow: hidden;\n  position: relative;\n  height: 100vh;\n  font-family: &quot;Open Sans&quot;, Helvetica, Arial, sans-serif;\n}\n.slider3d.no-select {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.slider3d__wrapper {\n  z-index: 1;\n  position: relative;\n  height: 100%;\n}\n.slider3d__item {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  background-color: #000;\n  transform-style: preserve-3d;\n}\n.slider3d__item:nth-child(1) {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/3d-slider-1.jpg&quot;);\n}\n.slider3d__item:nth-child(2) {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/3d-slider-2.jpg&quot;);\n}\n.slider3d__item:nth-child(3) {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/3d-slider-3.jpg&quot;);\n}\n.slider3d__item:nth-child(4) {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/3d-slider-4.jpg&quot;);\n}\n.slider3d__item:nth-child(5) {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/3d-slider-5.jpg&quot;);\n}\n.slider3d__heading {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n  margin-top: -6rem;\n  text-align: center;\n  font-size: 12rem;\n  line-height: 1;\n  text-transform: uppercase;\n  color: #ffffff;\n  transform: translateZ(3rem) scale(0.5);\n  opacity: 0;\n  text-shadow: 0.02rem -0.03rem 0 #efefef, 0.04rem -0.06rem 0 #eeeeee, 0.06rem -0.09rem 0 #ededed, 0.08rem -0.12rem 0 #ededed, 0.1rem -0.15rem 0 #ececec, 0.12rem -0.18rem 0 #ebebeb, 0.14rem -0.21rem 0 #eaeaea, 0.16rem -0.24rem 0 #eaeaea, 0.18rem -0.27rem 0 #e9e9e9, 0.2rem -0.3rem 0 #e8e8e8, 0.22rem -0.33rem 0 #e7e7e7, 0.24rem -0.36rem 0 #e7e7e7, 0.26rem -0.39rem 0 #e6e6e6, 0.28rem -0.42rem 0 #e5e5e5, 0.3rem -0.45rem 0 #e4e4e4, 0.32rem -0.48rem 0 #e3e3e3, 0.34rem -0.51rem 0 #e3e3e3, 0.36rem -0.54rem 0 #e2e2e2, 0.38rem -0.57rem 0 #e1e1e1, 0.4rem -0.6rem 0 #e0e0e0, 0.42rem -0.63rem 0 #e0e0e0, 0.44rem -0.66rem 0 #dfdfdf, 0.46rem -0.69rem 0 #dedede, 0.48rem -0.72rem 0 #dddddd, 0.5rem -0.75rem 0 #dddddd, 0.52rem -0.78rem 0 gainsboro, 0.54rem -0.81rem 0 #dbdbdb, 0.56rem -0.84rem 0 #dadada, 0.58rem -0.87rem 0 #dadada, 0.6rem -0.9rem 0 #d9d9d9, 0.62rem -0.93rem 0 #d8d8d8, 0.64rem -0.96rem 0 #d7d7d7, 0.66rem -0.99rem 0 #d6d6d6, 0.68rem -1.02rem 0 #d6d6d6, 0.7rem -1.05rem 0 #d5d5d5, 0.72rem -1.08rem 0 #d4d4d4, 0.74rem -1.11rem 0 lightgray, 0.76rem -1.14rem 0 lightgray;\n  transition: transform 0.4s, opacity 0.4s;\n  transition-delay: 0.2s;\n  transition-timing-function: cubic-bezier(0.71, 0.59, 0.4, 1.5);\n}\n.slider3d.slider-ready .slider3d__heading {\n  transform: translateZ(3rem);\n  opacity: 1;\n}\n.slider3d__controls {\n  display: none;\n}\n.slider3d.with-controls .slider3d__controls {\n  display: block;\n}\n.slider3d__handle {\n  z-index: 2;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  width: 15rem;\n  height: 7rem;\n  margin-top: -3.5rem;\n  perspective-origin: 100% 50%;\n  cursor: url(&quot;data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkuNCA0LjhsLTIuOS0yLjhoOC41djguNWwtMi44LTIuOHMtMS4yIDEuNC0xLjIgNC4zYzAgMy4xIDEuMiA0LjQgMS4yIDQuNGwyLjgtMi45djguNWgtOC41bDIuOC0yLjhzLTIuMy0yLjItMi4zLTcuMmMwLTQuOSAyLjQtNy4yIDIuNC03LjJ6Ii8+PHBhdGggZD0iTTEyLjIgNi4zcy0yLjIgMS44LTIuMiA1LjdjMCA0LjEgMi4xIDUuOCAyLjEgNS44bDEuOC0xLjh2NWgtNWwxLjgtMS44cy0yLjctMi4xLTIuNy03LjJjMC01IDIuOC03LjEgMi44LTcuMWwtMS45LTEuOWg1LjF2NS4xbC0xLjgtMS44Ii8+PC9zdmc+&quot;), ns-resize;\n}\n.m--xAxis .slider3d__handle {\n  left: 50%;\n  right: auto;\n  top: auto;\n  bottom: 0;\n  margin-left: -7.5rem;\n  margin-top: 0;\n  perspective-origin: 50% 100%;\n}\n.slider3d__handle__item {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  text-align: center;\n  font-size: 1.8rem;\n  line-height: 7rem;\n  text-transform: uppercase;\n  font-weight: bold;\n  color: #fff;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.slider3d__handle__item:after {\n  content: &quot;&quot;;\n  z-index: -1;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.1);\n  transition: opacity 0.3s;\n}\n.slider3d__handle__item.active:after {\n  opacity: 0;\n}\n.slider3d__control {\n  z-index: 3;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  width: 15rem;\n  height: 4rem;\n  margin-top: -2rem;\n  cursor: pointer;\n}\n.m--xAxis .slider3d__control {\n  left: 50%;\n  right: auto;\n  top: auto;\n  bottom: 0;\n  width: 6rem;\n  height: 7rem;\n  margin-top: 0;\n  margin-left: -3rem;\n}\n.slider3d__control:after {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 1rem;\n  height: 1rem;\n  margin-left: -0.5rem;\n  margin-top: -0.5rem;\n  border: 2px solid #fff;\n  border-left: none;\n  border-bottom: none;\n}\n.slider3d__control.m--up {\n  transform: translateY(-6rem);\n}\n.slider3d__control.m--up:after {\n  transform: rotate(-45deg);\n}\n.m--xAxis .slider3d__control.m--up {\n  transform: translateX(-11.5rem);\n}\n.m--xAxis .slider3d__control.m--up:after {\n  transform: rotate(-135deg);\n}\n.slider3d__control.m--down {\n  transform: translateY(6rem);\n}\n.slider3d__control.m--down:after {\n  transform: rotate(135deg);\n}\n.m--xAxis .slider3d__control.m--down {\n  transform: translateX(11.5rem);\n}\n.m--xAxis .slider3d__control.m--down:after {\n  transform: rotate(45deg);\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 rotatingSlider = function(selector, options) {\n\n    function initSingleSlider($el, options) {\n      var $slider, $rotaters,\n          $handle, $handleItems,\n          numOfItems,\n          angle, currentAngle = 0,\n          prefix = &quot;.slider3d__&quot;, \n          handlePrefix = prefix + &quot;handle__&quot;,\n          rotating = false;\n\n      var defaultOptions = {\n        xRotation: false,\n        speed: 1100,\n        dragSpeedCoef: 0.7,\n        handleSpeedCoef: 6,\n        easing: &quot;ease&quot;,\n        persMult: 1.6,\n        handlePersMult: 3,\n        scrollRotation: true,\n        keysRotation: true,\n        globalDragRotation: false,\n        withControls: true,\n        handleAndGlobalDrag: false,\n        allowDragDuringAnim: false,\n        allowScrollDuringAnim: false,\n        allowKeysDuringAnim: false,\n        allowControlsDuringAnim: false\n      };\n\n      var __opts = $.extend(defaultOptions, options);\n      \n      var axis = (__opts.xRotation) ? &quot;Y&quot; : &quot;X&quot;;\n      var angleMult = (__opts.xRotation) ? 1 : -1;\n\n      function handleActiveItem() {\n        if (!__opts.withControls) return;\n        $handleItems.removeClass(&quot;active&quot;);\n        var a = currentAngle % 360 \/ angle;\n        if (a &lt; 0) a = numOfItems + a;\n        if (a &gt; 0) a = a + 1;\n        if (!a) a = 1;\n        $handleItems.eq(a - 1).addClass(&quot;active&quot;);\n      };\n\n      function rotateSlider(delta) {\n        var newAngle = currentAngle + delta * angle;\n\n        $rotaters.css({&quot;transform&quot;: &quot;rotate&quot;+axis+&quot;(&quot;+ (newAngle * angleMult * -1) +&quot;deg)&quot;,\n                       &quot;transition&quot;: &quot;transform &quot; + __opts.speed \/ 1000 + &quot;s &quot; + __opts.easing});\n        currentAngle = newAngle;\n\n        setTimeout(function() {\n          $rotaters.css(&quot;transition&quot;, &quot;transform 0s&quot;);\n          handleActiveItem();\n          rotating = false;\n        }, __opts.speed);\n      };\n      \n      function navigateUp() {\n        rotateSlider(-1);\n      };\n      \n      function navigateDown() {\n        rotateSlider(1);\n      };\n\n      function scrollHandler(e) {\n        if (rotating &amp;&amp; !__opts.allowScrolluringAnim) return;\n        rotating = true;\n        var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;\n        if (delta &gt; 0) {\n          navigateUp();\n        } else if (delta &lt; 0) {\n          navigateDown();\n        }\n      };\n      \n      function keydownHandler(e) {\n        if (rotating &amp;&amp; !__opts.allowKeysDuringAnim) return;\n        rotating = true;\n        if (e.which === 38) {\n          navigateUp();\n        } else if (e.which === 40) {\n          navigateDown();\n        }\n      }\n\n      function dragRotationHandler(e) {\n        if (rotating &amp;&amp; !__opts.allowDragDuringAnim) return;\n        rotating = true;\n        $slider.addClass(&quot;no-select&quot;);\n        \n        var startVal;\n        if (__opts.xRotation) {\n          startVal = e.pageX || e.originalEvent.touches[0].pageX;\n        } else {\n          startVal = e.pageY || e.originalEvent.touches[0].pageY;\n        }\n        var sliderS = (__opts.xRotation) ? $slider.width() : $slider.height();\n        var deltaVal = 0;\n        var newAngle;\n        var angleDelta;\n        var isHandle = $(this).hasClass(&quot;js-handle&quot;);\n        var rotationCoef;\n        if (isHandle) {\n          rotationCoef = __opts.handleSpeedCoef;\n        } else {\n          rotationCoef = __opts.dragSpeedCoef;\n        }\n        \n        if (__opts.scrollRotation) {\n          $slider.off(&quot;mousewheel DOMMouseScroll&quot;, scrollHandler);\n        }\n\n        $(document).on(&quot;mousemove touchmove&quot;, function(e) {\n          var val;\n          if (__opts.xRotation) {\n            val = e.pageX || e.originalEvent.touches[0].pageX;\n          } else {\n            val = e.pageY || e.originalEvent.touches[0].pageY;\n          }\n          deltaVal = (startVal - val) \/ sliderS * rotationCoef;\n          newAngle = currentAngle + deltaVal * angle;\n          angleDelta = newAngle - currentAngle;\n\n          $rotaters.css(&quot;transform&quot;, &quot;rotate&quot;+axis+&quot;(&quot;+ (newAngle * angleMult * -1) +&quot;deg)&quot;);\n        });\n\n        $(document).on(&quot;mouseup touchend&quot;, function(e) {\n          $(document).off(&quot;mousemove touchmove mouseup touchend&quot;);\n          $slider.removeClass(&quot;no-select&quot;);\n\n          if (!deltaVal) {\n            rotating = false;\n            if (__opts.scrollRotation) {\n              $slider.on(&quot;mousewheel DOMMouseScroll&quot;, scrollHandler);\n            }\n            return;\n          }\n          \n          var slidesRotated = Math.round(angleDelta \/ angle);\n          rotateSlider(slidesRotated);\n          deltaVal = 0;\n\n          setTimeout(function() {\n            if (__opts.scrollRotation) {\n              $slider.on(&quot;mousewheel DOMMouseScroll&quot;, scrollHandler);\n            }\n          }, __opts.speed);\n        });\n\n      };\n\n      function initControls() {\n        var $controls = $(prefix + &quot;controls&quot;);\n        $handle = $(prefix + &quot;handle&quot;, $slider);\n        var $handleInner = $(handlePrefix + &quot;inner&quot;, $handle);\n        $handleItems = $(handlePrefix + &quot;item&quot;, $handle);\n        var s = (__opts.xRotation) ? $handle.width() : $handle.height();\n        var pers = s * __opts.handlePersMult;\n        var depth = s \/ 2 \/ Math.tan(angle \/ 2 * Math.PI\/180);\n        \n        $slider.addClass(&quot;with-controls&quot;);\n        $handle.css({&quot;-webkit-perspective&quot;: pers + &quot;px&quot;,\n                     &quot;perspective&quot;: pers + &quot;px&quot;})\n          .addClass(&quot;js-handle&quot;);\n        $handleInner.css(&quot;transform&quot;, &quot;translateZ(-&quot;+ depth +&quot;px)&quot;);\n        \n        if (__opts.xRotation) $controls.addClass(&quot;m--xAxis&quot;);\n\n        $handleItems.each(function(index) {\n          $(this).css(&quot;transform&quot;, &quot;rotate&quot;+axis+&quot;(&quot;+ (index * angle * angleMult) +&quot;deg) translateZ(&quot;+ depth +&quot;px)&quot;);\n        });\n\n        $rotaters = $(prefix + &quot;rotater, &quot;+ handlePrefix + &quot;rotater&quot;, $slider);\n        \n        $handle.on(&quot;mousedown touchstart&quot;, dragRotationHandler);\n        \n        $(document).on(&quot;click&quot;, &quot;.slider3d__control&quot;, function() {\n          if (rotating &amp;&amp; !__opts.allowControlsDuringAnim) return;\n          rotating = true;\n          if ($(this).hasClass(&quot;m--up&quot;)) {\n            navigateUp();\n          } else {\n            navigateDown();\n          }\n        });\n      };\n\n      function initSlider($el) {\n        $slider = $el;\n        var $wrapper = $(prefix + &quot;wrapper&quot;, $slider);\n        var $inner = $(prefix + &quot;inner&quot;, $slider);\n        var $items = $(prefix + &quot;item&quot;, $slider);\n        numOfItems = $items.length;\n        angle = 360 \/ numOfItems;\n        var s = (__opts.xRotation) ? $slider.width() : $slider.height();\n        var pers = s * __opts.persMult;\n        var depth = s \/ 2 \/ Math.tan(angle \/ 2 * Math.PI\/180);\n\n        $wrapper.css({&quot;-webkit-perspective&quot;: pers + &quot;px&quot;,\n                      &quot;perspective&quot;: pers + &quot;px&quot;});\n        $inner.css(&quot;transform&quot;, &quot;translateZ(-&quot;+ depth +&quot;px)&quot;);\n\n        $items.each(function(index) {\n          $(this).css(&quot;transform&quot;, &quot;rotate&quot;+axis+&quot;(&quot;+ (index * angle * angleMult) +&quot;deg) translateZ(&quot;+ depth +&quot;px)&quot;);\n        });\n\n        $slider.addClass(&quot;slider-ready&quot;);\n\n        $rotaters = $(prefix + &quot;rotater&quot;, $slider);\n        \n        if (__opts.scrollRotation) {\n          $slider.on(&quot;mousewheel DOMMouseScroll&quot;, scrollHandler);\n        }\n        if (__opts.keysRotation) {\n          if (!$slider.attr(&quot;tabindex&quot;)) {\n            $slider.attr(&quot;tabindex&quot;, 1);\n          }\n          $slider.on(&quot;keydown&quot;, keydownHandler);\n        }\n        if (__opts.globalDragRotation) {\n          $slider.on(&quot;mousedown touchstart&quot;, dragRotationHandler);\n        }\n        if (__opts.withControls) {\n          initControls();\n        }\n      };\n      \n      initSlider($el);\n      \n    }\n\n    function globalInit() {\n      $(selector).each(function() {\n        initSingleSlider($(this), options);\n      });\n    };\n\n    function debounce(func, wait, immediate) {\n      var timeout;\n      return function() {\n        var context = this, args = arguments;\n        var later = function() {\n          timeout = null;\n          if (!immediate) func.apply(context, args);\n        };\n        var callNow = immediate &amp;&amp; !timeout;\n        clearTimeout(timeout);\n        timeout = setTimeout(later, wait);\n        if (callNow) func.apply(context, args);\n      };\n    };\n\n    var resizeFn = debounce(function() {\n      globalInit();\n    }, 100);\n\n    $(window).on(&quot;resize&quot;, resizeFn);\n\n    globalInit();\n\n  };\n\n  window.rotatingSlider = rotatingSlider;\n}());\n\n$(document).ready(function() {\n\n  rotatingSlider(&quot;.slider3d&quot;, {xRotation: false, globalDragRotation: true});\n\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":406,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[17],"class_list":["post-405","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\/405","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=405"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/405\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/406"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}