{"id":1412,"date":"2023-05-07T14:12:31","date_gmt":"2023-05-07T11:12:31","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1412"},"modified":"2023-05-07T14:12:34","modified_gmt":"2023-05-07T11:12:34","slug":"card-slider","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/cards\/1412\/","title":{"rendered":"Card Slider"},"content":{"rendered":"<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Card Slider\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/K2cMrTIXuHs?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;div class=&quot;swiper-container&quot;&gt;\n    &lt;div class=&quot;swiper-wrapper&quot;&gt;\n      &lt;div class=&quot;slider-item swiper-slide&quot;&gt;\n        &lt;div class=&quot;slider-image-wrapper&quot;&gt;\n          &lt;img class=&quot;slider-image&quot; src=&quot;https:\/\/images.unsplash.com\/photo-1498307833015-e7b400441eb8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2600&amp;q=80&quot; alt=&quot;SliderImg&quot;&gt;\n          &lt;\/div&gt;\n        &lt;div class=&quot;slider-item-content&quot;&gt;\n          &lt;h1&gt;Postcards From Italy&lt;\/h1&gt;\n          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;slider-item swiper-slide&quot;&gt;\n        &lt;div class=&quot;slider-image-wrapper&quot;&gt;\n          &lt;img class=&quot;slider-image&quot; src=&quot;https:\/\/images.unsplash.com\/photo-1491900177661-4e1cd2d7cce2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot; alt=&quot;SliderImg&quot;&gt;\n          &lt;\/div&gt;\n        &lt;div class=&quot;slider-item-content&quot;&gt;\n          &lt;h1&gt;Bunker&lt;\/h1&gt;\n          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;slider-item swiper-slide&quot;&gt;\n        &lt;div class=&quot;slider-image-wrapper&quot;&gt;\n          &lt;img class=&quot;slider-image&quot; src=&quot;https:\/\/images.unsplash.com\/photo-1482192505345-5655af888cc4?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=2600&amp;q=80&quot; alt=&quot;SliderImg&quot;&gt;\n          &lt;\/div&gt;\n        &lt;div class=&quot;slider-item-content&quot;&gt;\n          &lt;h1&gt;Small Mountain&lt;\/h1&gt;\n          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;slider-item swiper-slide&quot;&gt;\n        &lt;div class=&quot;slider-image-wrapper&quot;&gt;\n          &lt;img class=&quot;slider-image&quot; src=&quot;https:\/\/images.unsplash.com\/photo-1564604761388-83eafc96f668?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=801.2.1&amp;auto=format&amp;fit=crop&amp;w=2167&amp;q=80&quot; alt=&quot;SliderImg&quot;&gt;\n          &lt;\/div&gt;\n        &lt;div class=&quot;slider-item-content&quot;&gt;\n          &lt;h1&gt;Walking On a Dream&lt;\/h1&gt;\n          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;slider-buttons&quot;&gt;\n        &lt;button class=&quot;swiper-button-prev&quot;&gt;Prev&lt;\/button&gt;\n        &lt;button class=&quot;swiper-button-next&quot;&gt;Next&lt;\/button&gt;\n    &lt;\/div&gt;\n  \n    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.2.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/6.4.5\/swiper-bundle.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;}\">@import url(&quot;https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500&amp;display=swap&quot;);\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  height: 100%;\n}\n\nbody {\n  font-family: &quot;Montserrat&quot;, sans-serif;\n  margin: 0;\n  width: 100%;\n  height: 100vh;\n  background-image: linear-gradient(45deg, #ffa600 14.7%, #61b6ff 73%);\n  background-size: 200% 200%;\n  -webkit-animation: gradient 15s ease infinite;\n          animation: gradient 15s ease infinite;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  padding: 32px;\n}\n\n@-webkit-keyframes gradient {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n\n@keyframes gradient {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\nh1 {\n  margin: 0;\n  font-weight: bold;\n  font-size: 24px;\n  line-height: 32px;\n  color: #26384E;\n  transform: translateY(20px);\n  transition: all 0.4s ease;\n  transition-delay: 0.2s;\n  overflow: hidden;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n@media screen and (max-width: 520px) {\n  h1 {\n    font-size: 16px;\n    line-height: 24px;\n  }\n}\n\np {\n  font-size: 16px;\n  line-height: 24px;\n  color: #889DB8;\n  transform: translateY(20px);\n  transition: all 0.4s ease;\n  transition-delay: 0.3s;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n@media screen and (max-width: 520px) {\n  p {\n    font-size: 14px;\n    line-height: 20px;\n  }\n}\n\n.swiper-wrapper {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n  position: relative;\n}\n\n.swiper-container {\n  background: linear-gradient(270deg, #f7f9ff 0%, #f2f6ff 100%);\n  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;\n  width: 100%;\n  position: relative;\n  max-width: 420px;\n  height: 100%;\n  max-height: 420px;\n  border-radius: 10px;\n}\n\n.slider-image-wrapper {\n  height: 200px;\n  width: 100%;\n  overflow: hidden;\n}\n\n.slider-item {\n  width: 100%;\n  height: 100%;\n  border-radius: 10px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  opacity: 0;\n  background: linear-gradient(270deg, #f7f9ff 0%, #f2f6ff 100%);\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.slider-item-content {\n  padding: 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: 0.4s;\n}\n.slider-item-content &gt; * {\n  opacity: 0;\n  transform: translateY(20px);\n}\n\n.swiper-slide-active .slider-item-content &gt; * {\n  transform: translateY(0px);\n  opacity: 1;\n}\n\n.slider-image {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  transition: 0.2s;\n}\n\n.swiper-pagination {\n  position: absolute;\n  left: 50%;\n  bottom: 8px;\n  transform: translatex(-50%);\n  z-index: 1;\n  width: auto !important;\n}\n\n.swiper-pagination-bullet {\n  border-radius: 0;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  line-height: 30px;\n  font-size: 12px;\n  opacity: 1;\n  background: rgba(255, 185, 0, 0.3);\n  display: inline-block;\n  margin-right: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.swiper-pagination-bullet-active {\n  background: #FFB200;\n  width: 20px;\n  border-radius: 10px;\n}\n\n.slider-buttons {\n  position: absolute;\n  display: flex;\n  top: 100%;\n  justify-content: flex-end;\n  width: 100%;\n  padding-top: 8px;\n}\n\n.swiper-button-next,\n.swiper-button-prev {\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  color: #fff;\n  position: relative;\n  margin-left: 4px;\n}\n.swiper-button-next:before,\n.swiper-button-prev:before {\n  content: &quot;&quot;;\n  position: absolute;\n  background-color: #fff;\n  height: 1px;\n  width: 0;\n  left: 0;\n  bottom: -1px;\n  transition: 0.2s;\n}\n.swiper-button-next:hover:before,\n.swiper-button-prev:hover:before {\n  width: 100%;\n}\n\n.socials {\n  position: fixed;\n  top: 12px;\n  right: 16px;\n  display: flex;\n  align-items: center;\n}\n.socials .social-link {\n  display: inline-block;\n  margin-left: 8px;\n  color: #fff;\n}\n\n@media screen and (max-width: 520px) {\n  .swiper-button-next:hover:before,\n.swiper-button-prev:hover:before {\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;}\">var swiper = new Swiper('.swiper-container', {\n    slidesPerView: 1,\n    spaceBetween: 20,\n    effect: 'fade',\n    loop: true,\n    speed: 300,\n    mousewheel: {\n      invert: false,\n    },\n    pagination: {\n      el: '.swiper-pagination',\n      clickable: true,\n      dynamicBullets: true\n    },\n    \/\/ Navigation arrows\n    navigation: {\n      nextEl: '.swiper-button-next',\n      prevEl: '.swiper-button-prev',\n    }\n  });<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1413,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[17],"class_list":["post-1412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cards","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1412","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=1412"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1412\/revisions"}],"predecessor-version":[{"id":1414,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1412\/revisions\/1414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1413"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}