{"id":410,"date":"2023-03-08T13:36:02","date_gmt":"2023-03-08T10:36:02","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=410"},"modified":"2023-03-28T23:47:36","modified_gmt":"2023-03-28T20:47:36","slug":"carousel","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/410\/","title":{"rendered":"Carousel"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"691\" style=\"aspect-ratio: 1687 \/ 691;\" width=\"1687\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-08_11-34-50.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 id=&quot;carousel&quot;&gt;\n  &lt;figure id=&quot;spinner&quot;&gt;\n  &lt;figure&gt;\n    &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/4273\/anton-ploom.jpg&quot; alt=&quot;A danseur in bris\u00e9 (a leap with the legs together) on a blue background&quot;&gt;\n      &lt;figcaption&gt;Anton Ploom&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;figure&gt;\n    &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/4273\/annija-kopstsale.jpg&quot; alt=&quot;&quot;&gt;\n      &lt;figcaption&gt;Annija Kopshtale&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;figure&gt;\n    &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/4273\/daria-elmakova.jpg&quot; alt=&quot;&quot;&gt;\n      &lt;figcaption&gt;Daria Elmakova&lt;\/figcaption&gt;\n    &lt;\/figure&gt;\n     &lt;figure&gt;\n       &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/4273\/margaret-rodchenkova.jpg&quot; alt=&quot;&quot;&gt;\n  &lt;figcaption&gt;Margaret Rodchenkova&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;figure&gt;\n    &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/4273\/marta-ozolina.jpg&quot; alt=&quot;&quot;&gt;\n  &lt;figcaption&gt;Marta Ozolina&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;figure&gt;\n    &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/4273\/victoria-ananyan.jpg&quot; alt=&quot;&quot;&gt;\n  &lt;figcaption&gt;Victoria Ananyan&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n    &lt;figure&gt;\n      &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/4273\/ekaterina-gusarova.jpg&quot; alt=&quot;A ballerina photographed in &quot;&gt;\n  &lt;figcaption&gt;Ekaterina Gusarova&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;\/div&gt;\n  &lt;span style=float:left class=ss-icon onclick=&quot;galleryspin('-')&quot;&gt;&amp;lt;&lt;\/span&gt;\n  &lt;span style=float:right class=ss-icon onclick=&quot;galleryspin('')&quot;&gt;&amp;gt;&lt;\/span&gt;\n\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;}\">* { \n  box-sizing: border-box; \n}\nbody {  \n  background: #100000; \n  font-family: Avenir, \n    sans-serif; \n  color: #fff; \n}\np { \n  margin-top: 8rem;\n  font-size: 1rem;\n  color: #777;\n} \ndiv#carousel { \n  perspective: 1200px; \n  background: #100000; \n  padding-top: 5%; \n  font-size:0; \n  margin-bottom: 3rem; \n}\nfigure#spinner { \n  transform-style: preserve-3d; \n  height: 300px; \n  transform-origin: 50% 50% -400px; \n  transition: 1s; \n} \nfigure#spinner figure { \n  width: 20%; \n  max-width: 500px; \n  position: absolute; \n  left: 40%;\n  transform-origin: 50% 50% -400px;\n  outline:1px solid transparent; \n  overflow: hidden;\n  transition: 1s;\n}\nfigure#spinner figure.focus { \n  width: 26%; \n  left: 37%; \n  margin-top: -3rem; \n} \nfigure#spinner figure img { \n  width: 100%; \n} \nfigcaption { \n  position: absolute; \n  top: 100%; \n  width: 100%; \n  padding: .3rem; \n  z-index: 2; \n  font-size: 1.1rem; \n  background: rgba(0, 0, 0, 0); \n  transition: .6s; \n}\nfigure#spinner figure.current:hover figcaption,\nfigure#spinner figure.current.caption figcaption\n{ \n  top: 90%; \n  background: rgba(0, 0, 0, 0.5); \n  bottom: 0; \n} \ndiv#carousel ~ span { \n  color: #fff; \n  margin: 5%; \n  display: inline-block; \n  text-decoration: none; \n  font-size: 2rem; \n  transition: 0.6s color; \n  position: relative; \n  margin-top: -6rem; \n  border-bottom: none; \n  line-height: 0; \n}\ndiv#carousel ~ span:hover { \n  color: #888; \n  cursor: pointer; \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;}\">\/\/ forEach method\nvar forEach = function(array, callback, scope) {\n  for (var i = 0; i &lt; array.length; i++) {\n    callback.call(scope, i, array[i]);\n  }\n};\n\nvar spinner = document.querySelector(&quot;#spinner&quot;),\n  angle = 0,\n  images = document.querySelectorAll(&quot;#spinner figure&quot;),\n  numpics = images.length,\n  degInt = 360 \/ numpics,\n  start = 0,\n  current = 1;\n\nforEach(images, function(index, value) {\n  images[index].style.webkitTransform = &quot;rotateY(-&quot; + start + &quot;deg)&quot;;\n  images[index].style.transform = &quot;rotateY(-&quot; + start + &quot;deg)&quot;;\n  images[index].addEventListener(&quot;click&quot;, function() {\n    if (this.classList.contains('current')) {\n      this.classList.toggle(&quot;focus&quot;);\n    }\n  })\n  start = start + degInt;\n});\n\nfunction setCurrent(current) {\n  document.querySelector('figure#spinner figure:nth-child(' + current + ')').classList.add('current');\n}\n\nfunction galleryspin(sign) {\n  forEach(images, function(index, value) {\n    images[index].classList.remove('current');\n    images[index].classList.remove('focus');\n    images[index].classList.remove('caption');\n  })\n\n  if (!sign) {\n    angle = angle + degInt;\n    current = (current + 1);\n    if (current &gt; numpics) {\n      current = 1;\n    }\n  } else {\n    angle = angle - degInt;\n    current = current - 1;\n    if (current == 0) {\n      current = numpics;\n    }\n  }\n\n  spinner.setAttribute(&quot;style&quot;, &quot;-webkit-transform: rotateY(&quot; + angle + &quot;deg); transform: rotateY(&quot; + angle + &quot;deg)&quot;);\n  setCurrent(current);\n}\n\ndocument.body.onkeydown = function(e) {\n  switch (e.which) {\n    case 37: \/\/ left cursor\n      galleryspin('-');\n      break;\n\n    case 39: \/\/ right cursor\n      galleryspin('');\n      break;\n\n    case 90: \/\/ Z - zoom image in forefront image\n      document.querySelector('figure#spinner figure.current').classList.toggle('focus');\n      break;\n\n    case 67: \/\/ C - show caption for forefront image\n      document.querySelector('figure#spinner figure.current').classList.toggle('caption');\n      break;\n\n    default:\n      return; \/\/ exit this handler for other keys\n  }\n  e.preventDefault();\n}\n\nfunction mouseMove() {\n  \n}\n\nfunction mouseUp() {\n  document.removeEventListener(&quot;mousemove&quot;, mouseMove, false);\n  document.removeEventListener(&quot;mouseup&quot;, mouseUp, false);\n}\n\nspinner.addEventListener(&quot;mousedown&quot;, function(e) {\n  var startX = e.pageX;\n  \n  document.addEventListener(&quot;mousemove&quot;, mouseMove, false);\n  document.addEventListener(&quot;mouseup&quot;, mouseUp, false);\n}, false);\n\nsetCurrent(1);<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":414,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[32,17],"class_list":["post-410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-carousel","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/410","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=410"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/410\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/414"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}