{"id":1707,"date":"2023-08-20T17:51:47","date_gmt":"2023-08-20T14:51:47","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1707"},"modified":"2023-08-20T17:51:48","modified_gmt":"2023-08-20T14:51:48","slug":"carousel-with-drag-and-wheel","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1707\/","title":{"rendered":"Carousel with drag and wheel"},"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=\"Carousel with drag and wheel\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/j0AQ-EmPdbs?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 class=&quot;carousel&quot;&gt;\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Paris&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;01&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/949299844\/it\/foto\/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Warsaw&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;02&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/1150545984\/it\/foto\/palazzo-moderno-di-lusso-con-piscina.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=Pbrai_VGc9tUviMCF1UaBErdS1YGyIVWsD29jzMZwTY=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Madrid&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;03&lt;\/div&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc=&quot;https:\/\/media.istockphoto.com\/id\/1214351345\/it\/foto\/guardando-direttamente-lo-skyline-del-quartiere-finanziario-nel-centro-di-londra-immagine-di.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=oNNbPzPvcQ-4RA6AeatNIxHQIafBiXmDRtUUY0Ska-I=&quot;\n\t\t\t\/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Sydney&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;04&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/904390980\/it\/foto\/foto-di-architettura-contemporanea-astratta.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=_P4Wmx5nq5MeDuimpNklKCBlrLovmCyd9lfiMKeJZDs=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Istanbul&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;05&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/130408311\/it\/foto\/piscina-allesterno-della-casa-moderna-al-crepuscolo.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=ZoVjx7uDjoHKmpM1ayW6UR1SQOoYh_xx-QMG_qeOYs0=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Prague&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;06&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/1299954175\/it\/foto\/villa-cubica-moderna.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=DhGhb3c1E3DW_fbrWJ_R_Zh0Lbwu6syFeRLsKlZ9no8=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Munich&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;07&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/926689776\/it\/foto\/vista-ad-angolo-basso-dei-grattacieli-di-new-york.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=DmEB0Ty7ZwDnBoU5SuA8FNevOp4G1UcECw5aS4vA9A8=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Venice&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;08&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/1191376167\/it\/foto\/villa-dellisola.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=PKslWo4FdbjinohKQlK_oWL34jqAsnzMTdy2bxEAf-I=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;Oslo&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;09&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/184316397\/it\/foto\/londra-edifici-aziendali.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=XqrRxEPzFnwRFk7PQrCiu9-FPfCTPyMe5BKKaxYXCs8=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\t&lt;div class=&quot;carousel-item&quot;&gt;\n\t\t&lt;div class=&quot;carousel-box&quot;&gt;\n\t\t\t&lt;div class=&quot;title&quot;&gt;London&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;num&quot;&gt;10&lt;\/div&gt;\n\t\t\t&lt;img src=&quot;https:\/\/media.istockphoto.com\/id\/184619832\/it\/foto\/distretto-finanziario-al-crepuscolo-londra.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=RAThrJOBY6vhlT6-kQpu9-9jLEzWToYfdw46S8B0Mu0=&quot; \/&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt;\n\n \n\n&lt;svg style=&quot;display: none&quot;&gt;\n\t&lt;symbol id=&quot;ico-instagram&quot; viewBox=&quot;0 0 35 35&quot;&gt;\n\t\t&lt;circle opacity=&quot;.2&quot; cx=&quot;17.5&quot; cy=&quot;17.5&quot; r=&quot;17&quot; stroke=&quot;var(--fill)&quot; fill=&quot;none&quot;&gt;&lt;\/circle&gt;\n\t\t&lt;path\n\t\t\tfill-rule=&quot;evenodd&quot;\n\t\t\tclip-rule=&quot;evenodd&quot;\n\t\t\td=&quot;M24.944 20.476c.028-.457.042-1.282.042-2.476s-.014-2.019-.042-2.476c-.056-1.09-.378-1.93-.965-2.517s-1.422-.91-2.503-.965C21.018 12.014 20.194 12 19 12s-2.019.014-2.476.042c-1.081.047-1.92.368-2.517.965s-.918 1.436-.965 2.518C13.014 15.98 13 16.805 13 18c0 1.194.014 2.019.042 2.476.047 1.09.368 1.93.965 2.517s1.436.91 2.518.965c.466.028 1.29.042 2.475.042 1.184 0 2.01-.014 2.476-.042 1.072-.047 1.906-.368 2.503-.965.597-.597.918-1.436.965-2.517ZM19 13.075h-1.427c-.186 0-.438.01-.755.029a11.61 11.61 0 0 0-.797.07c-.215.028-.401.08-.56.154-.26.102-.489.251-.685.447-.196.196-.35.425-.461.685-.056.15-.103.336-.14.56a7.843 7.843 0 0 0-.084.811 7.113 7.113 0 0 0-.014.741c.01.178.01.453 0 .826-.01.373-.01.573 0 .601.01.028.01.228 0 .601s-.01.648 0 .826c.01.177.014.424.014.74 0 .318.028.588.084.812l.14.56c.112.26.265.489.461.685.196.196.425.345.685.447.15.056.336.108.56.154.224.047.49.07.797.07.308 0 .56.01.755.028.196.019.471.019.826 0 .354-.019.554-.019.601 0 .047.019.242.019.587 0s.62-.019.826 0c.205.019.456.01.755-.028.298-.037.569-.06.811-.07.242-.01.424-.06.546-.154.26-.102.494-.251.699-.447a1.75 1.75 0 0 0 .447-.686c.056-.149.103-.335.14-.559.038-.224.066-.494.084-.811.019-.317.023-.564.014-.741a11.82 11.82 0 0 1 0-.826c.01-.373.01-.573 0-.601-.01-.028-.01-.228 0-.601s.01-.648 0-.826c-.01-.177-.014-.424-.014-.74 0-.318-.028-.588-.084-.812l-.14-.56a1.956 1.956 0 0 0-1.147-1.133 3.979 3.979 0 0 0-.545-.153 3.915 3.915 0 0 0-.811-.07c-.326 0-.578-.01-.755-.028a5.916 5.916 0 0 0-.826 0c-.372.019-.568.019-.587 0Zm3.706 2.225c.14-.14.21-.308.21-.504a.57.57 0 0 0-.21-.503.767.767 0 0 0-.517-.21.718.718 0 0 0-.504.21.622.622 0 0 0-.21.503c.01.196.08.364.21.504s.299.21.504.21c.205 0 .377-.07.517-.21ZM22.063 18c0 .849-.298 1.576-.895 2.182a2.882 2.882 0 0 1-2.168.895 3.075 3.075 0 0 1-2.182-.895c-.606-.588-.904-1.315-.895-2.182.01-.867.308-1.594.895-2.182.588-.587 1.315-.886 2.182-.895.867-.01 1.59.29 2.168.895.578.606.876 1.333.895 2.182Zm-1.077 0a1.95 1.95 0 0 0-.573-1.413A1.897 1.897 0 0 0 19 16c-.56 0-1.03.196-1.413.587A2.001 2.001 0 0 0 17 18c-.01.55.186 1.021.587 1.413.401.391.872.587 1.413.587.54 0 1.012-.196 1.413-.587.4-.392.592-.863.573-1.413Z&quot;\n\t\t\ttransform=&quot;translate(-1.5 -0.5)&quot;\n\t\t\tfill=&quot;var(--fill)&quot;\n\t\t&gt;&lt;\/path&gt;\n\t&lt;\/symbol&gt;\n\n\t&lt;symbol id=&quot;ico-linkedin&quot; viewBox=&quot;0 0 35 35&quot;&gt;\n\t\t&lt;circle opacity=&quot;.2&quot; cx=&quot;17.5&quot; cy=&quot;17.5&quot; r=&quot;17&quot; stroke=&quot;var(--fill)&quot; fill=&quot;none&quot;&gt;&lt;\/circle&gt;\n\t\t&lt;path\n\t\t\tfill-rule=&quot;evenodd&quot;\n\t\t\tclip-rule=&quot;evenodd&quot;\n\t\t\td=&quot;M15.3025 14.0835C15.3025 14.3845 15.1934 14.6403 14.9752 14.851C14.757 15.0617 14.4786 15.167 14.14 15.167C13.8014 15.167 13.5267 15.0617 13.316 14.851C13.1053 14.6403 13 14.3807 13 14.0722C13 13.7637 13.1053 13.5079 13.316 13.3047C13.5267 13.1016 13.8051 13 14.1512 13C14.4974 13 14.772 13.1016 14.9752 13.3047C15.1783 13.5079 15.2874 13.7675 15.3025 14.0835ZM13.0677 23V16.0248H15.2348V23H13.0677ZM16.4763 16.0248C16.5064 16.8676 16.5214 17.6125 16.5214 18.2596V23H18.7111V18.9819C18.7111 18.7111 18.7336 18.5305 18.7788 18.4402C18.9895 17.8984 19.3582 17.6275 19.8849 17.6275C20.6223 17.6275 20.991 18.1317 20.991 19.14V23H23.158V18.8691C23.158 17.8758 22.9285 17.1272 22.4695 16.623C22.0105 16.1189 21.4048 15.8668 20.6524 15.8668C19.6742 15.8668 18.9594 16.243 18.5079 16.9955H18.4628L18.3499 16.0248H16.4763Z&quot;\n\t\t\ttransform=&quot;translate(0 -1)&quot;\n\t\t\tfill=&quot;var(--fill)&quot;\n\t\t&gt;&lt;\/path&gt;\n\t&lt;\/symbol&gt;\n&lt;\/svg&gt;\n\n&lt;div class=&quot;cursor&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;cursor cursor2&quot;&gt;&lt;\/div&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;}\">body {\n\toverflow: hidden;\n\tfont-family: &quot;Roboto&quot;, serif;\n\tbackground: linear-gradient(135deg, black, #220033);\n  }\n  \n  .carousel {\n\tposition: relative;\n\tz-index: 1;\n\theight: 100vh;\n\toverflow: hidden;\n\tpointer-events: none;\n  }\n  \n  .carousel-item {\n\t--items: 10;\n\t--width: clamp(150px, 30vw, 300px);\n\t--height: clamp(200px, 40vw, 400px);\n\t--x: calc(var(--active) * 800%);\n\t--y: calc(var(--active) * 200%);\n\t--rot: calc(var(--active) * 120deg);\n\t--opacity: calc(var(--zIndex) \/ var(--items) * 3 - 2);\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: var(--zIndex);\n\twidth: var(--width);\n\theight: var(--height);\n\tmargin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);\n\tborder-radius: 10px;\n\ttop: 50%;\n\tleft: 50%;\n\t-webkit-user-select: none;\n\t   -moz-user-select: none;\n\t\t-ms-user-select: none;\n\t\t\tuser-select: none;\n\ttransform-origin: 0% 100%;\n\tbox-shadow: 0 10px 50px 10px rgba(0, 0, 0, 0.5);\n\tbackground: black;\n\tpointer-events: all;\n\ttransform: translate(var(--x), var(--y)) rotate(var(--rot));\n\ttransition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);\n  }\n  .carousel-item .carousel-box {\n\tposition: absolute;\n\tz-index: 1;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\ttransition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);\n\topacity: var(--opacity);\n\tfont-family: &quot;Orelo-sw-db&quot;, serif;\n  }\n  .carousel-item .carousel-box:before {\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\tz-index: 1;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tbackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5));\n  }\n  .carousel-item .title {\n\tposition: absolute;\n\tz-index: 1;\n\tcolor: #fff;\n\tbottom: 20px;\n\tleft: 20px;\n\ttransition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);\n\tfont-size: clamp(20px, 3vw, 30px);\n\ttext-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);\n  }\n  .carousel-item .num {\n\tposition: absolute;\n\tz-index: 1;\n\tcolor: #fff;\n\ttop: 10px;\n\tleft: 20px;\n\ttransition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);\n\tfont-size: clamp(20px, 10vw, 80px);\n  }\n  .carousel-item img {\n\twidth: 100%;\n\theight: 100%;\n\t-o-object-fit: cover;\n\t   object-fit: cover;\n\tpointer-events: none;\n  }\n  \n  .layout {\n\tposition: absolute;\n\tz-index: 0;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: none;\n  }\n  .layout:before {\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\tz-index: 1;\n\ttop: 0;\n\tleft: 90px;\n\twidth: 10px;\n\theight: 100%;\n\tborder: 1px solid #fff;\n\tborder-top: none;\n\tborder-bottom: none;\n\topacity: 0.15;\n  }\n  .layout .box {\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 30px;\n\tcolor: #fff;\n\ttransform-origin: 0% 10%;\n\ttransform: rotate(-90deg);\n\tfont-size: 9px;\n\tline-height: 1.4;\n\ttext-transform: uppercase;\n\topacity: 0.4;\n  }\n  \n  .logo {\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 28px;\n\tright: 28px;\n\twidth: 30px;\n\theight: 30px;\n\tbackground: #fff;\n\tborder-radius: 50%;\n\topacity: 0.5;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-family: &quot;Orelo-sw-db&quot;, serif;\n\tpointer-events: all;\n\tcolor: black;\n\ttext-decoration: none;\n\tfont-size: 20px;\n\toverflow: hidden;\n\tpadding-bottom: 0.1em;\n  }\n  \n  .social {\n\tposition: absolute;\n\tz-index: 10;\n\tbottom: 20px;\n\tright: 25px;\n\tcolor: #fff;\n\topacity: 0.4;\n  }\n  .social a {\n\tdisplay: inline-block;\n\tmargin-left: 3px;\n  }\n  .social svg {\n\t--fill: #fff;\n\twidth: 35px;\n\theight: 35px;\n  }\n  \n  .cursor {\n\tposition: fixed;\n\tz-index: 10;\n\ttop: 0;\n\tleft: 0;\n\t--size: 40px;\n\twidth: var(--size);\n\theight: var(--size);\n\tborder-radius: 50%;\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\tmargin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);\n\ttransition: transform 0.85s cubic-bezier(0, 0.02, 0, 1);\n\tdisplay: none;\n\tpointer-events: none;\n  }\n  @media (pointer: fine) {\n\t.cursor {\n\t  display: block;\n\t}\n  }\n  \n  .cursor2 {\n\t--size: 2px;\n\ttransition-duration: 0.7s;\n  }\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;}\">\/*--------------------\nVars\n--------------------*\/\nlet progress = 50\nlet startX = 0\nlet active = 0\nlet isDown = false\n\n\/*--------------------\nContants\n--------------------*\/\nconst speedWheel = 0.02\nconst speedDrag = -0.1\n\n\/*--------------------\nGet Z\n--------------------*\/\nconst getZindex = (array, index) =&gt; (array.map((_, i) =&gt; (index === i) ? array.length : array.length - Math.abs(index - i)))\n\n\/*--------------------\nItems\n--------------------*\/\nconst $items = document.querySelectorAll('.carousel-item')\nconst $cursors = document.querySelectorAll('.cursor')\n\nconst displayItems = (item, index, active) =&gt; {\n  const zIndex = getZindex([...$items], active)[index]\n  item.style.setProperty('--zIndex', zIndex)\n  item.style.setProperty('--active', (index-active)\/$items.length)\n}\n\n\/*--------------------\nAnimate\n--------------------*\/\nconst animate = () =&gt; {\n  progress = Math.max(0, Math.min(progress, 100))\n  active = Math.floor(progress\/100*($items.length-1))\n  \n  $items.forEach((item, index) =&gt; displayItems(item, index, active))\n}\nanimate()\n\n\/*--------------------\nClick on Items\n--------------------*\/\n$items.forEach((item, i) =&gt; {\n  item.addEventListener('click', () =&gt; {\n    progress = (i\/$items.length) * 100 + 10\n    animate()\n  })\n})\n\n\/*--------------------\nHandlers\n--------------------*\/\nconst handleWheel = e =&gt; {\n  const wheelProgress = e.deltaY * speedWheel\n  progress = progress + wheelProgress\n  animate()\n}\n\nconst handleMouseMove = (e) =&gt; {\n  if (e.type === 'mousemove') {\n    $cursors.forEach(($cursor) =&gt; {\n      $cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`\n    })\n  }\n  if (!isDown) return\n  const x = e.clientX || (e.touches &amp;&amp; e.touches[0].clientX) || 0\n  const mouseProgress = (x - startX) * speedDrag\n  progress = progress + mouseProgress\n  startX = x\n  animate()\n}\n\nconst handleMouseDown = e =&gt; {\n  isDown = true\n  startX = e.clientX || (e.touches &amp;&amp; e.touches[0].clientX) || 0\n}\n\nconst handleMouseUp = () =&gt; {\n  isDown = false\n}\n\n\/*--------------------\nListeners\n--------------------*\/\ndocument.addEventListener('mousewheel', handleWheel)\ndocument.addEventListener('mousedown', handleMouseDown)\ndocument.addEventListener('mousemove', handleMouseMove)\ndocument.addEventListener('mouseup', handleMouseUp)\ndocument.addEventListener('touchstart', handleMouseDown)\ndocument.addEventListener('touchmove', handleMouseMove)\ndocument.addEventListener('touchend', handleMouseUp)<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1708,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[32],"class_list":["post-1707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-carousel"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1707","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=1707"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1707\/revisions"}],"predecessor-version":[{"id":1709,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1707\/revisions\/1709"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1708"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}