{"id":1132,"date":"2023-04-01T18:20:31","date_gmt":"2023-04-01T15:20:31","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1132"},"modified":"2024-07-07T00:20:20","modified_gmt":"2024-07-06T21:20:20","slug":"portfolio-carousel","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1132\/","title":{"rendered":"Portfolio Carousel"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"964\" style=\"aspect-ratio: 1800 \/ 964;\" width=\"1800\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/04\/vokoscreenng-2023-04-01_17-15-10.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 class=&quot;container&quot;&gt;\n    &lt;header class=&quot;header&quot;&gt;\n        &lt;a class=&quot;header__logo&quot;&gt;LOGO&lt;\/a&gt;\n        &lt;nav class=&quot;header__menu&quot;&gt;\n            &lt;ul class=&quot;header__menu__list&quot;&gt;\n                &lt;li class=&quot;header__menu__item&quot;&gt;&lt;a class=&quot;header__menu__link&quot;&gt;works&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li class=&quot;header__menu__item&quot;&gt;&lt;a class=&quot;header__menu__link&quot;&gt;culture&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li class=&quot;header__menu__item&quot;&gt;&lt;a class=&quot;header__menu__link&quot;&gt;news&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li class=&quot;header__menu__item&quot;&gt;&lt;a class=&quot;header__menu__link&quot;&gt;careers&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li class=&quot;header__menu__item&quot;&gt;&lt;a class=&quot;header__menu__link&quot;&gt;contact&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n    &lt;!-- Container for all sliders, and pagination --&gt;\n    &lt;main class=&quot;sliders-container&quot;&gt;\n        &lt;!-- Here will be injected sliders for images, numbers, titles and links --&gt;\n\n        &lt;!-- Simple pagination for the slider --&gt;\n        &lt;ul class=&quot;pagination&quot;&gt;\n            &lt;li class=&quot;pagination__item&quot;&gt;&lt;a class=&quot;pagination__button&quot;&gt;&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li class=&quot;pagination__item&quot;&gt;&lt;a class=&quot;pagination__button&quot;&gt;&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li class=&quot;pagination__item&quot;&gt;&lt;a class=&quot;pagination__button&quot;&gt;&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li class=&quot;pagination__item&quot;&gt;&lt;a class=&quot;pagination__button&quot;&gt;&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/main&gt;\n    &lt;footer class=&quot;footer&quot;&gt;\n \n    &lt;\/footer&gt;\n&lt;\/div&gt;\n&lt;script src=&quot;https:\/\/rawgit.com\/lmgonzalves\/momentum-slider\/master\/dist\/momentum-slider.min.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;}\">.ms--images {\n  position: relative;\n  overflow: hidden;\n}\n.ms--images.ms-container--horizontal {\n  width: 100%;\n  height: 400px;\n  max-width: 100%;\n}\n.ms--images.ms-container--horizontal .ms-track {\n  left: calc(50% - 350px);\n}\n.ms--images.ms-container--horizontal .ms-slide {\n  display: inline-flex;\n}\n.ms--images .ms-track {\n  display: flex;\n  position: absolute;\n  white-space: nowrap;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n.ms--images .ms-slide {\n  align-items: center;\n  justify-content: center;\n  width: 700px;\n  height: 400px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n\n.ms--images {\n  left: calc(50% - 280px);\n}\n.ms--images.ms-container--horizontal .ms-track {\n  left: -70px;\n}\n.ms--images .ms-slide:nth-child(1) .ms-slide__image {\n  background-image: url(&quot;https:\/\/cdn.jsdelivr.net\/gh\/lmgonzalves\/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b\/portfolio-carousel\/img\/harvey-gibson-498362-unsplash.jpg&quot;);\n}\n.ms--images .ms-slide:nth-child(2) .ms-slide__image {\n  background-image: url(&quot;https:\/\/cdn.jsdelivr.net\/gh\/lmgonzalves\/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b\/portfolio-carousel\/img\/andre-hunter-461305-unsplash.jpg&quot;);\n}\n.ms--images .ms-slide:nth-child(3) .ms-slide__image {\n  background-image: url(&quot;https:\/\/cdn.jsdelivr.net\/gh\/lmgonzalves\/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b\/portfolio-carousel\/img\/joanna-nix-389128-unsplash.jpg&quot;);\n}\n.ms--images .ms-slide:nth-child(4) .ms-slide__image {\n  background-image: url(&quot;https:\/\/cdn.jsdelivr.net\/gh\/lmgonzalves\/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b\/portfolio-carousel\/img\/jurica-koletic-321003-unsplash.jpg&quot;);\n}\n.ms--images .ms-slide__image-container {\n  width: 80%;\n  height: 80%;\n  background-color: rgba(0, 0, 0, 0.3);\n  overflow: hidden;\n}\n.ms--images .ms-slide__image {\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n}\n\n.ms--numbers {\n  position: relative;\n  overflow: hidden;\n}\n.ms--numbers.ms-container--horizontal {\n  width: 240px;\n  height: 240px;\n  max-width: 100%;\n}\n.ms--numbers.ms-container--horizontal .ms-track {\n  left: calc(50% - 120px);\n}\n.ms--numbers.ms-container--horizontal .ms-slide {\n  display: inline-flex;\n}\n.ms--numbers .ms-track {\n  display: flex;\n  position: absolute;\n  white-space: nowrap;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n.ms--numbers .ms-slide {\n  align-items: center;\n  justify-content: center;\n  width: 240px;\n  height: 240px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n\n.ms--numbers {\n  position: absolute;\n  left: calc(50% - 380px);\n  top: calc(50% - 300px);\n  z-index: -1;\n  pointer-events: none;\n}\n.ms--numbers .ms-slide {\n  font-size: 9em;\n  font-weight: 900;\n  color: rgba(255, 255, 255, 0.2);\n}\n\n.ms--titles {\n  position: relative;\n  overflow: hidden;\n}\n.ms--titles.ms-container--vertical {\n  width: 400px;\n  height: 170px;\n  max-height: 100%;\n}\n.ms--titles.ms-container--vertical .ms-track {\n  flex-direction: column;\n  top: calc(50% - 85px);\n}\n.ms--titles.ms-container--vertical.ms-container--reverse .ms-track {\n  flex-direction: column-reverse;\n  top: auto;\n  bottom: calc(50% - 85px);\n}\n.ms--titles.ms-container--vertical .ms-slide {\n  display: flex;\n}\n.ms--titles .ms-track {\n  display: flex;\n  position: absolute;\n  white-space: nowrap;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n.ms--titles .ms-slide {\n  align-items: center;\n  justify-content: center;\n  width: 400px;\n  height: 170px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n\n.ms--titles {\n  position: absolute;\n  left: calc(50% - 420px);\n  top: calc(50% - 85px);\n  z-index: 1;\n  pointer-events: none;\n}\n.ms--titles .ms-track {\n  white-space: normal;\n}\n.ms--titles .ms-slide {\n  font-size: 3.3em;\n  font-weight: 600;\n}\n.ms--titles .ms-slide h3 {\n  margin: 0;\n  text-shadow: 1px 1px 2px black;\n}\n\n.ms--links {\n  position: relative;\n  overflow: hidden;\n}\n.ms--links.ms-container--vertical {\n  width: 120px;\n  height: 60px;\n  max-height: 100%;\n}\n.ms--links.ms-container--vertical .ms-track {\n  flex-direction: column;\n  top: calc(50% - 30px);\n}\n.ms--links.ms-container--vertical .ms-slide {\n  display: flex;\n}\n.ms--links .ms-track {\n  display: flex;\n  position: absolute;\n  white-space: nowrap;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n.ms--links .ms-slide {\n  align-items: center;\n  justify-content: center;\n  width: 120px;\n  height: 60px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n\n.ms--links {\n  position: absolute;\n  left: calc(50% - 420px);\n  top: calc(50% + 105px);\n  z-index: 1;\n}\n.ms--links .ms-track {\n  white-space: normal;\n}\n.ms--links .ms-slide__link {\n  font-weight: 600;\n  padding: 5px 0 8px;\n  border-bottom: 2px solid white;\n  cursor: pointer;\n}\n\n.pagination {\n  display: flex;\n  position: absolute;\n  left: calc(50% - 420px);\n  top: calc(100%);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  z-index: 1;\n}\n.pagination__button {\n  display: inline-block;\n  position: relative;\n  width: 36px;\n  height: 20px;\n  margin: 0 5px;\n  cursor: pointer;\n}\n.pagination__button:before, .pagination__button:after {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: calc(50% - 1px);\n  width: 100%;\n  box-shadow: 0 1px 0 #0B0D14;\n}\n.pagination__button:before {\n  height: 2px;\n  background-color: #6A3836;\n}\n.pagination__button:after {\n  height: 3px;\n  background-color: #DC4540;\n  opacity: 0;\n  transition: 0.5s opacity;\n}\n\n.pagination__item--active .pagination__button:after {\n  opacity: 1;\n}\n\n@media screen and (max-width: 860px) {\n  .ms--numbers {\n    left: calc(50% - 120px);\n  }\n\n  .ms--titles {\n    left: calc(50% - 200px);\n    top: calc(50% - 135px);\n    text-align: center;\n  }\n\n  .ms--links {\n    left: calc(50% - 60px);\n    top: calc(50% + 80px);\n  }\n\n  .pagination {\n    left: 50%;\n    top: calc(100% - 50px);\n    transform: translateX(-50%);\n  }\n}\n@media screen and (max-width: 600px) {\n  .ms--images {\n    overflow: visible;\n  }\n}\n@media screen and (max-width: 400px) {\n  .ms--titles .ms-slide {\n    transform: scale(0.8);\n  }\n}\n*, *:before, *:after {\n  box-sizing: border-box;\n}\n\nbody {\n  color: white;\n  background-color: #1B1C21;\n  overflow: hidden;\n}\n\na {\n  color: white;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  background-color: rgba(0, 0, 0, 0.1);\n}\n.container:before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: -150%;\n  top: 0;\n  width: 300%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.3);\n  transform: rotate(45deg);\n  z-index: -1;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: 30px;\n}\n\n.header__logo {\n  font-size: 1.3em;\n  font-weight: 900;\n  letter-spacing: -1px;\n}\n.header__logo span {\n  display: inline-block;\n  transform: translateY(4px) rotate(180deg);\n  pointer-events: none;\n}\n\n.header__menu {\n  margin-left: auto;\n}\n\n.header__menu__list, .footer__menu__list {\n  display: flex;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.header__menu__link {\n  margin-left: 50px;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 30px;\n}\n\n.footer__menu__link {\n  margin-left: 50px;\n  color: rgba(255, 255, 255, 0.5);\n}\n\n.sliders-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n\n@media screen and (max-width: 860px) {\n  .header__menu, .footer {\n    display: none;\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;}\">(function() {\n\n  var slidersContainer = document.querySelector('.sliders-container');\n\n  \/\/ Initializing the numbers slider\n  var msNumbers = new MomentumSlider({\n      el: slidersContainer,\n      cssClass: 'ms--numbers',\n      range: [1, 4],\n      rangeContent: function (i) {\n          return '0' + i;\n      },\n      style: {\n          transform: [{scale: [0.4, 1]}],\n          opacity: [0, 1]\n      },\n      interactive: false\n  });\n\n  \/\/ Initializing the titles slider\n  var titles = [\n      'King of the Ring Fight',\n      'Sound of Streets',\n      'Urban Fashion',\n      'Windy Sunset'\n  ];\n  var msTitles = new MomentumSlider({\n      el: slidersContainer,\n      cssClass: 'ms--titles',\n      range: [0, 3],\n      rangeContent: function (i) {\n          return '&lt;h3&gt;'+ titles[i] +'&lt;\/h3&gt;';\n      },\n      vertical: true,\n      reverse: true,\n      style: {\n          opacity: [0, 1]\n      },\n      interactive: false\n  });\n\n  \/\/ Initializing the links slider\n  var msLinks = new MomentumSlider({\n      el: slidersContainer,\n      cssClass: 'ms--links',\n      range: [0, 3],\n      rangeContent: function () {\n          return '&lt;a class=&quot;ms-slide__link&quot;&gt;View Case&lt;\/a&gt;';\n      },\n      vertical: true,\n      interactive: false\n  });\n\n  \/\/ Get pagination items\n  var pagination = document.querySelector('.pagination');\n  var paginationItems = [].slice.call(pagination.children);\n\n  \/\/ Initializing the images slider\n  var msImages = new MomentumSlider({\n      \/\/ Element to append the slider\n      el: slidersContainer,\n      \/\/ CSS class to reference the slider\n      cssClass: 'ms--images',\n      \/\/ Generate the 4 slides required\n      range: [0, 3],\n      rangeContent: function () {\n          return '&lt;div class=&quot;ms-slide__image-container&quot;&gt;&lt;div class=&quot;ms-slide__image&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;';\n      },\n      \/\/ Syncronize the other sliders\n      sync: [msNumbers, msTitles, msLinks],\n      \/\/ Styles to interpolate as we move the slider\n      style: {\n          '.ms-slide__image': {\n              transform: [{scale: [1.5, 1]}]\n          }\n      },\n      \/\/ Update pagination if slider change\n      change: function(newIndex, oldIndex) {\n          if (typeof oldIndex !== 'undefined') {\n              paginationItems[oldIndex].classList.remove('pagination__item--active');\n          }\n          paginationItems[newIndex].classList.add('pagination__item--active');\n      }\n  });\n\n  \/\/ Select corresponding slider item when a pagination button is clicked\n  pagination.addEventListener('click', function(e) {\n      if (e.target.matches('.pagination__button')) {\n          var index = paginationItems.indexOf(e.target.parentNode);\n          msImages.select(index);\n      }\n  });\n\n})();\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1134,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-1132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1132","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=1132"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1132\/revisions"}],"predecessor-version":[{"id":1135,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1132\/revisions\/1135"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1134"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}