{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dno31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оставляем для вас ниже готовый код для создания простой карусели с изображениями.","type":"unstyled","key":"b87tm"},{"data":{"image":{"id":"651ef3a2e069e3060379facb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9qpq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5ova0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"eguka"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"header-three","key":"dpkns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9vabr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"80n77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"2dorp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"4diuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"dhds8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"fdt65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"e0lqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9utik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"39opo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"bvad0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b8l5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"63b6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"4pn5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d6289"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"7u9cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"co7nc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"dj10k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"ahnap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"al82j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"7ldvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"6ho9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"3oeo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"ffsun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"cih3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"f8bhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"fa34j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"ckf6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"a3oet"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"7djt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9dlio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9gslk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"1pa8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"5msbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"eni25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9sh6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"159va"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"7td65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"2641i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"f87nr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS","type":"header-three","key":"1br59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"* {","type":"unstyled","key":"2qq09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin: 0;","type":"unstyled","key":"beh2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 0;","type":"unstyled","key":"5veif"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"box-sizing: border-box;","type":"unstyled","key":"epjls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"60g6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html {","type":"unstyled","key":"3t855"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 62.5%;","type":"unstyled","key":"c0sul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"3nf1l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* --- UTILITY CLASSES --- */","type":"unstyled","key":"d4gro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".flex-center-all {","type":"unstyled","key":"7uaad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: flex;","type":"unstyled","key":"8a5te"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"align-items: center;","type":"unstyled","key":"8hge2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"justify-content: center;","type":"unstyled","key":"p3os"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"2rgv5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".pos-center-all {","type":"unstyled","key":"ehr55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: absolute;","type":"unstyled","key":"em1io"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"top: 50%;","type":"unstyled","key":"bpoa1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"left: 50%;","type":"unstyled","key":"48r12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transform: translate(-50%, -50%);","type":"unstyled","key":"1jtn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"c52ha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* ----------------------- */","type":"unstyled","key":"fsglo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".wrapper {","type":"unstyled","key":"5fik2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 100vh;","type":"unstyled","key":"3pvtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: relative;","type":"unstyled","key":"1anpo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #eee;","type":"unstyled","key":"a4n61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"8lfq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-container {","type":"unstyled","key":"dkh4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 60vw;","type":"unstyled","key":"1svng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 60vw;","type":"unstyled","key":"etm2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"7iabb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"img {","type":"unstyled","key":"301sd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%;","type":"unstyled","key":"24fac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 100%;","type":"unstyled","key":"e4jlf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* object-fit: cover; */","type":"unstyled","key":"ehcdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"civg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".visible {","type":"unstyled","key":"976gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: inline;","type":"unstyled","key":"1fs9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition: all 0.125s;","type":"unstyled","key":"fc6ai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"7sof3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".hidden {","type":"unstyled","key":"187nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: none;","type":"unstyled","key":"2nage"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition: all 0.125s;","type":"unstyled","key":"26cea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"d6hs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".next-prev-btns {","type":"unstyled","key":"cjjok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: absolute;","type":"unstyled","key":"ec9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 10vh;","type":"unstyled","key":"7c8b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100vw;","type":"unstyled","key":"61jbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: flex;","type":"unstyled","key":"d1867"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"justify-content: space-between;","type":"unstyled","key":"8eosk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 0 7vw;","type":"unstyled","key":"6bh72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"align-items: center;","type":"unstyled","key":"bkep2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"211jl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".prev-btn-container,","type":"unstyled","key":"61bhd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".next-btn-container {","type":"unstyled","key":"cvboh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 8vw;","type":"unstyled","key":"6clk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 8vw;","type":"unstyled","key":"7fo6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"3je24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button {","type":"unstyled","key":"1hoes"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: none;","type":"unstyled","key":"5v3uk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border: 0;","type":"unstyled","key":"921o3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 10vw;","type":"unstyled","key":"bmsh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-radius: 50%;","type":"unstyled","key":"a5l2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #387ca1;","type":"unstyled","key":"876q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%;","type":"unstyled","key":"16cok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 100%;","type":"unstyled","key":"2fd8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding-bottom: 1.25vw;","type":"unstyled","key":"b4obr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: #ddd;","type":"unstyled","key":"cj1o0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition: all 0.125s;","type":"unstyled","key":"eeb9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"bs1nb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button:hover {","type":"unstyled","key":"apcdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cursor: pointer;","type":"unstyled","key":"at761"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #54b9f0;","type":"unstyled","key":"cho6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: white;","type":"unstyled","key":"2ubri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition: all 0.125s;","type":"unstyled","key":"7o4ft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6p8dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-container {","type":"unstyled","key":"e2f07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: absolute;","type":"unstyled","key":"4otl3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bottom: 0;","type":"unstyled","key":"2n5a3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 4vw;","type":"unstyled","key":"dg1gp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"top: calc(50% + 33vw);","type":"unstyled","key":"fdllo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: flex;","type":"unstyled","key":"6q31o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"justify-content: space-around;","type":"unstyled","key":"5ppe1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"align-items: center;","type":"unstyled","key":"5rji0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"h4ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item {","type":"unstyled","key":"e1pdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 4vw;","type":"unstyled","key":"doec6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 100%;","type":"unstyled","key":"du5qd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: relative;","type":"unstyled","key":"6thsq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"3itp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item:not(:last-child) {","type":"unstyled","key":"4o96c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin-right: 0.5vw;","type":"unstyled","key":"85rgj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"28lo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".inner-circle {","type":"unstyled","key":"2um8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cursor: pointer;","type":"unstyled","key":"80eib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 2vw;","type":"unstyled","key":"43g3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 2vw;","type":"unstyled","key":"nqjr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: black;","type":"unstyled","key":"71hjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-radius: 50%;","type":"unstyled","key":"3u4gs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"box-sizing: content-box;","type":"unstyled","key":"efsvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border: 0.5vw solid white;","type":"unstyled","key":"93cia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"d3uk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item-selected > .inner-circle,","type":"unstyled","key":"6ope2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item-selected > .outer-circle {","type":"unstyled","key":"1hhh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cursor: unset;","type":"unstyled","key":"37dgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"1e0ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".outer-circle {","type":"unstyled","key":"7dnts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cursor: pointer;","type":"unstyled","key":"4u1l6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: absolute;","type":"unstyled","key":"bpt4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 3.5vw;","type":"unstyled","key":"fniau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 3.5vw;","type":"unstyled","key":"72cvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-radius: 50%;","type":"unstyled","key":"am12u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition: background 0.125s;","type":"unstyled","key":"aqf1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"40haa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item-selected > .outer-circle {","type":"unstyled","key":"9s1u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #999;","type":"unstyled","key":"eechc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition: background 0.125s;","type":"unstyled","key":"dinet"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"baq0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item:hover > .outer-circle {","type":"unstyled","key":"8m22r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 3.75vw;","type":"unstyled","key":"73jnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 3.75vw;","type":"unstyled","key":"bsu86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: black;","type":"unstyled","key":"e2c9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cursor: pointer;","type":"unstyled","key":"98f6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"agmpj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* override */","type":"unstyled","key":"assdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item-selected:hover > .outer-circle {","type":"unstyled","key":"8tjfl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 3.5vw;","type":"unstyled","key":"8kke7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 3.5vw;","type":"unstyled","key":"a18d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #999;","type":"unstyled","key":"50tos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cursor: unset;","type":"unstyled","key":"f7dnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"386lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* screen is taller than wide */","type":"unstyled","key":"7kv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* @media (max-aspect-ratio: 100/99) {","type":"unstyled","key":"d0e59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".wrapper {","type":"unstyled","key":"afct0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: blue;","type":"unstyled","key":"8i7kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"68v86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} */","type":"unstyled","key":"8j3hk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* screen is wider than tall */","type":"unstyled","key":"emnsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@media (min-aspect-ratio: 99/100) {","type":"unstyled","key":"dmo25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-container {","type":"unstyled","key":"1nsii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 60vh;","type":"unstyled","key":"cacj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 60vh;","type":"unstyled","key":"5uuat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"ak04a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".next-prev-btns {","type":"unstyled","key":"3bi5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 10vw;","type":"unstyled","key":"2758f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100vh;","type":"unstyled","key":"700me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 0 7vh;","type":"unstyled","key":"c26r9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"1md35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".prev-btn-container,","type":"unstyled","key":"1uc7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".next-btn-container {","type":"unstyled","key":"b5gpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 8vh;","type":"unstyled","key":"fsa80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 8vh;","type":"unstyled","key":"1fpfc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"f5dps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button {","type":"unstyled","key":"7e7ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 10vh;","type":"unstyled","key":"aukok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding-bottom: 1.25vh;","type":"unstyled","key":"f2mio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"f6old"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-container {","type":"unstyled","key":"6qd6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 4vh;","type":"unstyled","key":"16mbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"top: calc(50% + 33vh);","type":"unstyled","key":"9lfd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"b8n02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item {","type":"unstyled","key":"3o5le"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 4vh;","type":"unstyled","key":"9dnhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4d7kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item:not(:last-child) {","type":"unstyled","key":"cmfre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin-right: 0.5vh;","type":"unstyled","key":"d2una"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6poq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".inner-circle {","type":"unstyled","key":"ba4b6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 2vh;","type":"unstyled","key":"5gmdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 2vh;","type":"unstyled","key":"d3sam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border: 0.5vh solid white;","type":"unstyled","key":"1m9t5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"t84v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".outer-circle {","type":"unstyled","key":"e18rl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 3.5vh;","type":"unstyled","key":"6k7t9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 3.5vh;","type":"unstyled","key":"f8odk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"dg9a0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item:hover > .outer-circle {","type":"unstyled","key":"2hd3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 3.75vh;","type":"unstyled","key":"a49rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 3.75vh;","type":"unstyled","key":"98i7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"9hmtd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* override */","type":"unstyled","key":"28d3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".img-nav-item-selected:hover > .outer-circle {","type":"unstyled","key":"5hbib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 3.5vh;","type":"unstyled","key":"8s1qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 3.5vh;","type":"unstyled","key":"bna8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"df9jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6pgmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript","type":"header-three","key":"26lm1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const images = document.querySelectorAll('img')","type":"unstyled","key":"5ib3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const totalImages = images.length;","type":"unstyled","key":"7ma92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const prevBtn = document.querySelector('.prev-btn')","type":"unstyled","key":"2fs20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const nextBtn = document.querySelector('.next-btn')","type":"unstyled","key":"c7rr9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const selectedImgBtns = document.querySelectorAll('.img-nav-item')","type":"unstyled","key":"6iun3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let currentImgId = 0;","type":"unstyled","key":"3eau3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const hideAllImages = () => {","type":"unstyled","key":"2a7ki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"images.forEach(img => {","type":"unstyled","key":"4rhjs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// hide all images","type":"unstyled","key":"bqrr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (img.classList[0] === 'visible') {","type":"unstyled","key":"4vlsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"img.classList.remove('visible')","type":"unstyled","key":"6neoh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"img.classList.add('hidden')","type":"unstyled","key":"53mqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"7qhgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"})","type":"unstyled","key":"fj8g3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"f5tsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const traverseImages = (direction) => {","type":"unstyled","key":"6a3ec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"hideAllImages()","type":"unstyled","key":"evji2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (direction === 'prev') {","type":"unstyled","key":"56s6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"currentImgId = currentImgId ? (currentImgId - 1) % totalImages : totalImages - 1","type":"unstyled","key":"cbm6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} else {","type":"unstyled","key":"2n5av"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"currentImgId = (currentImgId + 1) % totalImages","type":"unstyled","key":"8p0no"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"5hmtr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"images[currentImgId].classList.remove('hidden')","type":"unstyled","key":"3n9qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"images[currentImgId].classList.add('visible')","type":"unstyled","key":"938h3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"selectedImgBtns.forEach(btn => btn.classList.remove('img-nav-item-selected'))","type":"unstyled","key":"dhofe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"selectedImgBtns[currentImgId].classList.add('img-nav-item-selected')","type":"unstyled","key":"dpit8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6poon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const handleBtnClick = (btn, i) => {","type":"unstyled","key":"48obp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// not sure about this fuckery, but it works","type":"unstyled","key":"darep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (btn.classList.forEach(btnClass => {","type":"unstyled","key":"9li66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (btnClass === 'img-nav-item-selected') {","type":"unstyled","key":"edkbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return true","type":"unstyled","key":"8o9uv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"deg2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"})) {","type":"unstyled","key":"80hdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return","type":"unstyled","key":"3r5na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"ek5u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"selectedImgBtns.forEach(btn => btn.classList.remove('img-nav-item-selected'))","type":"unstyled","key":"c961i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"btn.classList.add('img-nav-item-selected')","type":"unstyled","key":"5gsl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"hideAllImages()","type":"unstyled","key":"8mb4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"currentImgId = i","type":"unstyled","key":"tjep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"images[currentImgId].classList.remove('hidden')","type":"unstyled","key":"6fdh1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"images[currentImgId].classList.add('visible')","type":"unstyled","key":"46p4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"a07bp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"prevBtn.addEventListener('click', () => traverseImages('prev'))","type":"unstyled","key":"rji7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"nextBtn.addEventListener('click', () => traverseImages('next'))","type":"unstyled","key":"f7bva"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"selectedImgBtns.forEach((btn, i) => {","type":"unstyled","key":"1l3pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"btn.addEventListener('click', () => handleBtnClick(btn, i))","type":"unstyled","key":"2picj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"})","type":"unstyled","key":"100qi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"JTMjZrwwBVYj7cDla4hm"}],"entityMap":{}},"mentions":[]}