{"id":1144,"date":"2024-06-04T20:59:46","date_gmt":"2024-06-04T17:59:46","guid":{"rendered":"https:\/\/webcademy.ru\/blog\/?p=1144"},"modified":"2024-06-23T18:06:38","modified_gmt":"2024-06-23T15:06:38","slug":"3d-%d1%81%d0%bb%d0%b0%d0%b9%d0%b4%d0%b5%d1%80-%d0%bd%d0%b0-swiper-%d1%81-coverflow-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82%d0%be%d0%bc","status":"publish","type":"post","link":"https:\/\/webcademy.ru\/blog\/1144\/","title":{"rendered":"3d \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0430 swiper \u0441 coverflow \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c"},"content":{"rendered":"\n<p>\u042d\u0442\u043e \u043a\u043e\u043d\u0441\u043f\u0435\u043a\u0442 \u0432\u0438\u0434\u0435\u043e \u0443\u0440\u043e\u043a\u0430 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0441 3d \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u043e\u0432, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 swiper \u0441 \u0435\u0433\u043e coverflow \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c.<\/p>\n\n\n\n<p><strong>\u0412\u0438\u0434\u0435\u043e \u0443\u0440\u043e\u043a:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"3D \u044d\u0444\u0444\u0435\u043a\u0442 \u0434\u043b\u044f \u0441\u043b\u0430\u0438\u0306\u0434\u0435\u0440\u0430 Swiper Coverflow\" width=\"730\" height=\"411\" src=\"https:\/\/www.youtube.com\/embed\/oqGs_adHUYY?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<p><strong>\u0421\u0441\u044b\u043b\u043a\u0438 \u043a \u0443\u0440\u043e\u043a\u0443:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/swiperjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Swiper \u0441\u043b\u0430\u0439\u0434\u0435\u0440<\/a><\/li><li><a href=\"https:\/\/swiperjs.com\/demos#effect-coverflow\" target=\"_blank\" rel=\"noreferrer noopener\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 coverflow \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c<\/a> \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0438\u0437 \u0443\u0440\u043e\u043a\u0430<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">HTML \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/h4>\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;:false,&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;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n\t&lt;meta charset=&quot;UTF-8&quot;&gt;\n\t&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n\t&lt;title&gt;Swiper Coverflow&lt;\/title&gt;\n\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css&quot; \/&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;.\/css\/main.css&quot;&gt;\n\n\t&lt;link rel=&quot;icon&quot; type=&quot;image\/x-icon&quot; href=&quot;.\/img\/favicons\/favicon.svg&quot;&gt;\n\t&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;.\/img\/favicons\/apple-touch-icon.png&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n\t&lt;div class=&quot;logo&quot;&gt;\n\t\t&lt;div class=&quot;logo__title&quot;&gt;\u0412\u0435\u0431\u041a\u0430\u0434\u0435\u043c\u0438&lt;\/div&gt;\n\t\t&lt;div class=&quot;logo__desc&quot;&gt;\u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;h1&gt;Swiper coverflow&lt;\/h1&gt;\n\n\t&lt;!-- Slider main container --&gt;\n\t&lt;div class=&quot;swiper no-select&quot;&gt;\n\n\t\t&lt;!-- Additional required wrapper --&gt;\n\t\t&lt;div class=&quot;swiper-wrapper&quot;&gt;\n\t\t\t&lt;!-- Slides --&gt;\n\t\t\t&lt;div class=&quot;swiper-slide&quot;&gt;\n\t\t\t\t&lt;img src=&quot;.\/img\/01.jpg&quot; srcset=&quot;.\/img\/01@2x.jpg&quot; alt=&quot;Photo&quot;&gt;\n\t\t\t&lt;\/div&gt;\n\n\t\t\t&lt;div class=&quot;swiper-slide&quot;&gt;\n\t\t\t\t&lt;img src=&quot;.\/img\/02.jpg&quot; srcset=&quot;.\/img\/02@2x.jpg 2x&quot; alt=&quot;Photo&quot;&gt;\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;swiper-slide&quot;&gt;\n\t\t\t\t&lt;img src=&quot;.\/img\/03.jpg&quot; srcset=&quot;.\/img\/03@2x.jpg 2x&quot; alt=&quot;Photo&quot;&gt;\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;swiper-slide&quot;&gt;\n\t\t\t\t&lt;img src=&quot;.\/img\/04.jpg&quot; srcset=&quot;.\/img\/04@2x.jpg 2x&quot; alt=&quot;Photo&quot;&gt;\n\t\t\t&lt;\/div&gt;\n\n\t\t\t&lt;div class=&quot;swiper-slide&quot;&gt;\n\t\t\t\t&lt;img src=&quot;.\/img\/05.jpg&quot; srcset=&quot;.\/img\/05@2x.jpg 2x&quot; alt=&quot;Photo&quot;&gt;\n\t\t\t&lt;\/div&gt;\n\n\t\t\t&lt;div class=&quot;swiper-slide&quot;&gt;\n\t\t\t\t&lt;img src=&quot;.\/img\/06.jpg&quot; srcset=&quot;.\/img\/06@2x.jpg 2x&quot; alt=&quot;Photo&quot;&gt;\n\t\t\t&lt;\/div&gt;\n\n\t\t\t&lt;div class=&quot;swiper-slide&quot;&gt;\n\t\t\t\t&lt;img src=&quot;.\/img\/07.jpg&quot; srcset=&quot;.\/img\/07@2x.jpg 2x&quot; alt=&quot;Photo&quot;&gt;\n\t\t\t&lt;\/div&gt;\n\n\t\t\t&lt;div class=&quot;swiper-slide&quot;&gt;\n\t\t\t\t&lt;img src=&quot;.\/img\/08.jpg&quot; srcset=&quot;.\/img\/08@2x.jpg 2x&quot; alt=&quot;Photo&quot;&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\n\t\t&lt;!-- If we need pagination --&gt;\n\t\t&lt;div class=&quot;swiper-pagination&quot;&gt;&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div class=&quot;link-wrapper&quot;&gt;\n\t\t&lt;p&gt;&lt;a href=&quot;https:\/\/webcademy.ru\/blog\/1144\/&quot; target=&quot;_blank&quot;&gt;c\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0443\u0440\u043e\u043a\u043e\u043c&lt;\/a&gt;&lt;\/p&gt;\n\t&lt;\/div&gt;\n\n\n\n\t&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js&quot;&gt;&lt;\/script&gt;\n\t&lt;script src=&quot;.\/js\/main.js&quot;&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">CSS \u0441\u0442\u0438\u043b\u0438<\/h4>\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;:false,&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;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@import url(https:\/\/fonts.googleapis.com\/css?family=Manrope:200,300,regular,500,600,700,800);\n\nbody {\n\tmargin: 0;\n\tpadding: 40px 0 100px;\n\n\tbackground-color: #284b59;\n\tbackground-image: radial-gradient(\n\t\tcircle,\n\t\trgb(44, 83, 100),\n\t\trgb(32, 58, 67),\n\t\trgb(15, 32, 39)\n\t);\n\n\tfont-family: Manrope, sans-serif;\n}\n\n.logo {\n\tmargin-bottom: 30px;\n}\n\n.logo__title {\n\ttext-align: center;\n\tfont-size: 24px;\n\tfont-weight: 700;\n\tcolor: #77b8c2;\n\tletter-spacing: 0.02em;\n}\n\n.logo__desc {\n\ttext-align: center;\n\tfont-size: 14px;\n\tfont-weight: 300;\n\tcolor: #77b8c2;\n}\n\nh1 {\n\tmargin-bottom: 80px;\n\ttext-align: center;\n\tcolor: #fff;\n\tfont-weight: 800;\n\tfont-size: 32px;\n}\n\n.link-wrapper {\n\tpadding-top: 50px;\n\tfont-weight: 300;\n\ttext-align: center;\n\tfont-size: 14px;\n}\n\n.link-wrapper a {\n\tcolor: #77b8c2;\n\t\/* text-decoration: none; *\/\n\topacity: 0.5;\n\ttext-decoration-line: underline;\n}\n\n\/* Swiper styles *\/\n\n:root {\n\t--swiper-pagination-bottom: 0px;\n\t--swiper-theme-color: #018b9f;\n}\n\n.swiper {\n\tmargin: 0 auto;\n\twidth: 660px;\n\tpadding-bottom: 50px !important;\n}\n\n.swiper-slide img {\n\tdisplay: block;\n\twidth: 100%;\n\theight: 300px;\n}\n\n.no-select {\n\t-webkit-user-select: none; \/* Chrome\/Safari *\/\n\t-moz-user-select: none; \/* Firefox *\/\n\t-ms-user-select: none; \/* IE\/Edge *\/\n\tuser-select: none; \/* \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 *\/\n}\n<\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">JS \u043a\u043e\u0434<\/h4>\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;:false,&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;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const swiper = new Swiper('.swiper', {\n\teffect: 'coverflow',\n\tgrabCursor: true,\n\tcenteredSlides: true,\n\tslidesPerView: 3,\n\tspaceBetween: 30,\n\tspeed: 600,\n\n\tcoverflowEffect: {\n\t\trotate: 50,\n\t\tstretch: 0,\n\t\tdepth: 100,\n\t\tmodifier: 1,\n\t\tslideShadows: true,\n\t},\n\n\tloop: true,\n\n\tkeyboard: {\n\t\tenabled: true,\n\t},\n\n\tpagination: {\n\t\tel: '.swiper-pagination',\n\t\tdynamicBullets: true,\n\t\tclickable: true,\n\t},\n});\n<\/pre><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u042d\u0442\u043e \u043a\u043e\u043d\u0441\u043f\u0435\u043a\u0442 \u0432\u0438\u0434\u0435\u043e \u0443\u0440\u043e\u043a\u0430 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0441 3d \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u043e\u0432, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 swiper \u0441 \u0435\u0433\u043e coverflow \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c. \u0412\u0438\u0434\u0435\u043e \u0443\u0440\u043e\u043a: \u0421\u0441\u044b\u043b\u043a\u0438 \u043a \u0443\u0440\u043e\u043a\u0443: Swiper \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 coverflow \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0438\u0437 \u0443\u0440\u043e\u043a\u0430 HTML \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 CSS \u0441\u0442\u0438\u043b\u0438 JS \u043a\u043e\u0434<\/p>\n","protected":false},"author":1,"featured_media":1173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1144","post","type-post","status-publish","format-standard","has-post-thumbnail","","category-html"],"_links":{"self":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts\/1144"}],"collection":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/comments?post=1144"}],"version-history":[{"count":1,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts\/1144\/revisions"}],"predecessor-version":[{"id":1172,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts\/1144\/revisions\/1172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/media\/1173"}],"wp:attachment":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/media?parent=1144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/categories?post=1144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/tags?post=1144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}