{"id":1470,"date":"2023-05-20T22:17:10","date_gmt":"2023-05-20T19:17:10","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1470"},"modified":"2023-05-20T22:24:30","modified_gmt":"2023-05-20T19:24:30","slug":"slicebox-3d-image-slider","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1470\/","title":{"rendered":"Slicebox &#8211; 3D Image Slider"},"content":{"rendered":"<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=\"Slicebox - 3D Image Slider\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/57TxTlPkXH4?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;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\n\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;wrapper&quot;&gt;\n  \n      &lt;ul id=&quot;sb-slider&quot; class=&quot;sb-slider&quot;&gt;\n        &lt;li&gt;\n          &lt;a href=&quot;http:\/\/www.flickr.com\/photos\/strupler\/2969141180&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https:\/\/tympanus.net\/Development\/Slicebox\/images\/1.jpg&quot; alt=&quot;image1&quot;\/&gt;&lt;\/a&gt;\n          &lt;div class=&quot;sb-description&quot;&gt;\n            &lt;h3&gt;Creative Lifesaver&lt;\/h3&gt;\n          &lt;\/div&gt;\n        &lt;\/li&gt;\n        &lt;li&gt;\n          &lt;a href=&quot;http:\/\/www.flickr.com\/photos\/strupler\/2968268187&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https:\/\/tympanus.net\/Development\/Slicebox\/images\/2.jpg&quot; alt=&quot;image2&quot;\/&gt;&lt;\/a&gt;\n          &lt;div class=&quot;sb-description&quot;&gt;\n            &lt;h3&gt;Honest Entertainer&lt;\/h3&gt;\n          &lt;\/div&gt;\n        &lt;\/li&gt;\n        &lt;li&gt;\n          &lt;a href=&quot;http:\/\/www.flickr.com\/photos\/strupler\/2968114825&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https:\/\/tympanus.net\/Development\/Slicebox\/images\/3.jpg&quot; alt=&quot;image1&quot;\/&gt;&lt;\/a&gt;\n          &lt;div class=&quot;sb-description&quot;&gt;\n            &lt;h3&gt;Brave Astronaut&lt;\/h3&gt;\n          &lt;\/div&gt;\n        &lt;\/li&gt;\n        &lt;li&gt;\n          &lt;a href=&quot;http:\/\/www.flickr.com\/photos\/strupler\/2968122059&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https:\/\/tympanus.net\/Development\/Slicebox\/images\/4.jpg&quot; alt=&quot;image1&quot;\/&gt;&lt;\/a&gt;\n          &lt;div class=&quot;sb-description&quot;&gt;\n            &lt;h3&gt;Affectionate Decision Maker&lt;\/h3&gt;\n          &lt;\/div&gt;\n        &lt;\/li&gt;\n        &lt;li&gt;\n          &lt;a href=&quot;http:\/\/www.flickr.com\/photos\/strupler\/2969119944&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https:\/\/tympanus.net\/Development\/Slicebox\/images\/5.jpg&quot; alt=&quot;image1&quot;\/&gt;&lt;\/a&gt;\n          &lt;div class=&quot;sb-description&quot;&gt;\n            &lt;h3&gt;Faithful Investor&lt;\/h3&gt;\n          &lt;\/div&gt;\n        &lt;\/li&gt;\n        &lt;li&gt;\n          &lt;a href=&quot;http:\/\/www.flickr.com\/photos\/strupler\/2968126177&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https:\/\/tympanus.net\/Development\/Slicebox\/images\/6.jpg&quot; alt=&quot;image1&quot;\/&gt;&lt;\/a&gt;\n          &lt;div class=&quot;sb-description&quot;&gt;\n            &lt;h3&gt;Groundbreaking Artist&lt;\/h3&gt;\n          &lt;\/div&gt;\n        &lt;\/li&gt;\n        &lt;li&gt;\n          &lt;a href=&quot;http:\/\/www.flickr.com\/photos\/strupler\/2968945158&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https:\/\/tympanus.net\/Development\/Slicebox\/images\/7.jpg&quot; alt=&quot;image1&quot;\/&gt;&lt;\/a&gt;\n          &lt;div class=&quot;sb-description&quot;&gt;\n            &lt;h3&gt;Selfless Philantropist&lt;\/h3&gt;\n          &lt;\/div&gt;\n        &lt;\/li&gt;\n      &lt;\/ul&gt;\n  \n      &lt;div id=&quot;shadow&quot; class=&quot;shadow&quot;&gt;&lt;\/div&gt;\n      \n      &lt;div id=&quot;nav-arrows&quot; class=&quot;nav-arrows&quot;&gt;\n        &lt;a href=&quot;#&quot;&gt;Next&lt;\/a&gt;\n        &lt;a href=&quot;#&quot;&gt;Previous&lt;\/a&gt;\n      &lt;\/div&gt;\n      \n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/modernizr\/2.8.3\/modernizr.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/tympanus.net\/Development\/Slicebox\/js\/jquery.slicebox.js&quot;&gt;&lt;\/script&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;}\">@import url(\/\/fonts.googleapis.com\/css?family=PT+Sans+Narrow|Volkhov:400italic,700);\n\n*,\n*:after,\n*:before {\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n\/* Clearfix hack by Nicolas Gallagher: http:\/\/nicolasgallagher.com\/micro-clearfix-hack\/ *\/\n.clearfix:after {\n\tcontent: &quot;&quot;;\n\tdisplay: table;\n\tclear: both;\n}\n\n\/* General Demo Style *\/\nbody {\n\tbackground: #e4ebe9 url(..\/images\/fancy_deboss.png) repeat top left;\n\tcolor: #444;\n\tfont-family: &quot;PT Sans Narrow&quot;, Arial, sans-serif;\n\tfont-size: 13px;\n\tfont-weight: 400;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n    min-width: 320px;\n}\n\na {\n\tcolor: #000;\n\ttext-decoration: none;\n}\n\nh1, h2, h5 {\n\tmargin: 20px 20px 30px 20px;\n\tfont-size: 56px;\n\tcolor: #fff;\n\tfont-family: &quot;Volkhov&quot;, serif;\n\ttext-align: center;\n\tfont-weight: 700;\n\ttext-shadow: 1px 1px 3px #e0d1bc;\n}\n\nh1 span, h5 {\n\tfont-size: 18px;\n\tdisplay: block;\n\tfont-style: italic;\n\tcolor: #997f5a;\n\tfont-weight: 400;\n\ttext-shadow: 0px 1px 1px #fff;\n}\n\n.wrapper {\n\tposition: relative;\n\tmax-width: 840px;\n\twidth: 100%;\n\tpadding: 0 50px;\n\tmargin: 0 auto;\n}\n\n\/* Header Style *\/\n.codrops-top {\n\tline-height: 24px;\n\tfont-size: 11px;\n\tbackground: #fff;\n\tbackground: rgba(255, 255, 255, 0.8);\n\ttext-transform: uppercase;\n\tz-index: 9999;\n\tposition: relative;\n\tfont-family: Cambria, Georgia, serif;\n\tbox-shadow: 1px 0px 2px rgba(0,0,0,0.2);\n}\n\n.codrops-top a {\n\tpadding: 0px 10px;\n\tletter-spacing: 1px;\n\tcolor: #333;\n\tdisplay: inline-block;\n}\n\n.codrops-top a:hover {\n\tbackground: rgba(255,255,255,0.6);\n}\n\n.codrops-top span.right {\n\tfloat: right;\n}\n\n.codrops-top span.right a {\n\tfloat: left;\n\tdisplay: block;\n}\n\n\/* More examples buttons *\/\n\n.more {\n\tposition: relative;\n\tclear: both;\n\tpadding: 20px;\n}\n\n.more:before {\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\tbackground-color: #ddd1b6;\n\tbox-shadow: 0 1px 0 rgba(255,255,255,0.8);\n\theight: 1px;\n\twidth: 440px;\n\tleft: 50%;\n\tmargin-left: -220px;\n\ttop: -10px;\n}\n\n.more ul {\n\tdisplay: block;\n\theight: 32px;\n\ttext-align: center;\n}\n\n.more ul li {\n\tdisplay: inline-block;\n\tline-height: 24px;\n}\n\n.more ul li.selected a,\n.more ul li.selected a:hover {\n\tbackground: #ae997a;\n\tcolor: #fff;\n\ttext-shadow: none;\n}\n\n.more ul li a {\n\ttext-shadow: 1px 1px 1px #fff;\n\tcolor: #555;\n\tbackground: #fbf9f5;\n\tpadding: 2px 5px;\n\tmargin: 0 2px;\n\tline-height: 18px;\n\tdisplay: inline-block;\n\tbox-shadow: 1px 1px 2px rgba(0,0,0,0.3);\n}\n\n.more ul li a:hover {\n\tbackground: #8c795d;\n\tcolor: #fff;\n\ttext-shadow: none;\n}\n\np.info {\n\tfont-family: &quot;Volkhov&quot;, serif;\n\tfont-style: italic;\n\tcolor: #997f5a;\n\ttext-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);\n\tpadding: 20px;\n\tdisplay: block;\n\tclear: both;\n\ttext-align: center;\n\twidth: 100%;\n\tmax-width: 440px;\n\tmargin: 0 auto;\n}\n\n\/* Slicebox Style *\/\n.sb-slider {\n\tmargin: 10px auto;\n\tposition: relative;\n\toverflow: hidden;\n\twidth: 100%;\n\tlist-style-type: none;\n\tpadding: 0;\n}\n\n.sb-slider li {\n\tmargin: 0;\n\tpadding: 0;\n\tdisplay: none;\n}\n\n.sb-slider li &gt; a {\n\toutline: none;\n}\n\n.sb-slider li &gt; a img {\n\tborder: none;\n}\n\n.sb-slider img {\n\tmax-width: 100%;\n\tdisplay: block;\n}\n\n.sb-description {\n\tpadding: 20px;\n\tbottom: 10px;\n\tleft: 10px;\n\tright: 10px;\n\tz-index: 1000;\n\tposition: absolute;\n\tbackground: #CBBFAE;\n\tbackground: rgba(190,176,155, 0.4);\n\tborder-left: 4px solid rgba(255,255,255,0.7);\n\t-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;\n\tfilter: alpha(opacity=0);\t\n\topacity: 0;\n\tcolor: #fff;\n\n\t-webkit-transition: all 200ms;\n\t-moz-transition: all 200ms;\n\t-o-transition: all 200ms;\n\t-ms-transition: all 200ms;\n\ttransition: all 200ms;\n}\n\n.sb-slider li.sb-current .sb-description {\n\t-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=80)&quot;;\n\tfilter: alpha(opacity=80);\t\n\topacity: 1;\n}\n\n.sb-slider li.sb-current .sb-description:hover {\n\t-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=99)&quot;;\n\tfilter: alpha(opacity=99);\t\n\tbackground: rgba(190,176,155, 0.7);\n}\n\n.sb-perspective {\n\tposition: relative;\n}\n\n.sb-perspective &gt; div {\n\tposition: absolute;\n\n\t-webkit-transform-style: preserve-3d;\n\t-moz-transform-style: preserve-3d;\n\t-o-transform-style: preserve-3d;\n\t-ms-transform-style: preserve-3d;\n\ttransform-style: preserve-3d;\n\n\t-webkit-backface-visibility : hidden;\n\t-moz-backface-visibility : hidden;\n\t-o-backface-visibility : hidden;\n\t-ms-backface-visibility : hidden;\n\tbackface-visibility : hidden;\n}\n\n.sb-side {\n\tmargin: 0;\n\tdisplay: block;\n\tposition: absolute;\n\t-moz-backface-visibility : hidden;\n\t-webkit-transform-style: preserve-3d;\n\t-moz-transform-style: preserve-3d;\n\t-o-transform-style: preserve-3d;\n\t-ms-transform-style: preserve-3d;\n\ttransform-style: preserve-3d;\n}\n\n\n\/* custom style *\/\n.container {\n  margin: 30px;\n}\n\n.shadow {\n\twidth: 100%;\n\theight: 168px;\n\tposition: relative;\n\tmargin-top: -110px;\n\tbackground: transparent url(https:\/\/tympanus.net\/Development\/Slicebox\/images\/shadow.png) no-repeat bottom center;\n\tbackground-size: 100% 100%; \/* stretches it *\/\n\tz-index: -1;\n\tdisplay: none;\n}\n\n.sb-description h3 {\n\tfont-size: 20px;\n\ttext-shadow: 1px 1px 1px rgba(0,0,0,0.3);\n}\n\n.sb-description h3 a {\n\tcolor: #4a3c27;\n\ttext-shadow: 0 1px 1px rgba(255,255,255,0.5);\n}\n\n.nav-arrows {\n\tdisplay: none;\n}\n\n.nav-arrows a {\n\twidth: 42px;\n\theight: 42px;\n\tbackground: #cbbfae url(https:\/\/tympanus.net\/Development\/Slicebox\/images\/nav.png) no-repeat top left;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 2px;\n\ttext-indent: -9000px;\n\tcursor: pointer;\n\tmargin-top: -21px;\n\topacity: 0.9;\n\tborder-radius: 50%;\n\tbox-shadow: 0 1px 1px rgba(255,255,255,0.8);\n}\n\n.nav-arrows a:first-child{\n\tleft: auto;\n\tright: 2px;\n\tbackground-position: top right;\n}\n\n.nav-arrows a:hover {\n\topacity: 1;\n}\n\n.nav-dots {\n\ttext-align: center;\n\tposition: absolute;\n\tbottom: -5px;\n\theight: 30px;\n\twidth: 100%;\n\tleft: 0;\n\tdisplay: none;\n}\n\n.nav-dots span {\n\tdisplay: inline-block;\n\twidth: 16px;\n\theight: 16px;\n\tborder-radius: 50%;\n\tmargin: 3px;\n\tbackground: #cbbfae;\n\tcursor: pointer;\n\tbox-shadow: \n\t\t0 1px 1px rgba(255,255,255,0.6), \n\t\tinset 0 1px 1px rgba(0,0,0,0.1);\n}\n\n.nav-dots span.nav-dot-current {\n\tbox-shadow: \n\t\t0 1px 1px rgba(255,255,255,0.6), \n\t\tinset 0 1px 1px rgba(0,0,0,0.1), \n\t\tinset 0 0 0 3px #cbbfae,\n\t\tinset 0 0 0 8px #fff;\n}\n\n.nav-options {\n\twidth: 70px;\n\theight: 30px;\n\tposition: absolute;\n\tright: 70px;\n\tbottom: 0px;\n\tdisplay: none;\n}\n\n.nav-options span {\n\twidth: 30px;\n\theight: 30px;\n\tbackground: #cbbfae url(https:\/\/tympanus.net\/Development\/Slicebox\/images\/options.png) no-repeat top left;\n\ttext-indent: -9000px;\n\tcursor: pointer;\n\topacity: 0.7;\n\tdisplay: inline-block;\n\tborder-radius: 50%;\n}\n\n.nav-options span:first-child{\n\tbackground-position: -30px 0px;\n\tmargin-right: 3px;\n}\n\n.nav-options span:hover {\n\topacity: 1;\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\t\t\t\t\n  var Page = (function() {\n    \n    var $navArrows = $( '#nav-arrows' ).hide(),\n        $shadow = $( '#shadow' ).hide(),\n        slicebox = $( '#sb-slider' ).slicebox( {\n          onReady : function() {\n            \n            $navArrows.show();\n            $shadow.show();\n            \n          },\n          orientation : 'r',\n          cuboidsRandom : true,\n          disperseFactor : 30\n        } ),\n        \n        init = function() {\n          \n          initEvents();\n          \n        },\n        initEvents = function() {\n          \n          \/\/ add navigation events\n          $navArrows.children( ':first' ).on( 'click', function() {\n            \n            slicebox.next();\n            return false;\n            \n          } );\n          \n          $navArrows.children( ':last' ).on( 'click', function() {\n            \n            slicebox.previous();\n            return false;\n            \n          } );\n          \n        };\n    \n    return { init : init };\n    \n  })();\n  \n  Page.init();\n  \n});<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[17],"class_list":["post-1470","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\/1470","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=1470"}],"version-history":[{"count":6,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1470\/revisions"}],"predecessor-version":[{"id":1478,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1470\/revisions\/1478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1471"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}