Simple carousel

by Eugene Trounev

HTML

<div class="cr-ft">
   <figure class="ft-f">
     <img src="https://images.unsplash.com/photo-1576164285450-6d26c5b1a2a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1024&q=80" alt="Do something cool" />
     <img src="https://images.unsplash.com/photo-1571942790909-75819ea24170?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1024&q=80" alt="Docsie can also to this" />
     <img src="https://images.unsplash.com/photo-1576078767092-c48cc3a01a6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1024&q=80" alt="Another awesome feature" />
     <img src="https://images.unsplash.com/photo-1576169500335-67bc51ce6be8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1024&q=80" alt="Blah this faster with Docsie" />
     <img src="https://images.unsplash.com/photo-1576058581278-d15fb8df7b78?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1024&q=80" alt="Not sure what else here" />
     <figcaption class="h-lg"></figcaption>
   </figure>
   <nav class="ft-n v-lg">
     <ul>
       <li><button data-icon="menu">
           Do something cool
         </button></li>
       <li><button data-icon="menu">
           Docsie can also to this
         </button></li>
       <li><button data-icon="menu">
           Another awesome feature
         </button></li>
       <li><button data-icon="menu">
           Blah this faster with Docsie
         </button></li>
       <li><button data-icon="menu">
           Not sure what else here
         </button></li>
       <li><a href="http://docsie.io">Learn More <svg class="inl" width="22" height="22" viewBox="0 0 20 20">
             <use xlink:href="#icon-arrow-right" /></svg></a></li>
     </ul>
   </nav>
 </div>

 <svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 20 20">
    <path d="M16 16L4 4M16 4L4 16" fill="none" stroke="currentColor" stroke-width="1.06"></path>
  </symbol>
  <symbol id="icon-menu" viewBox="0 0 20 20">
    <path d="M2...

SCSS

/* Responsive breakpoint */
$sm: 'screen and (min-width: 568px)'; // 568px
$ism: 'screen and (max-width: 568px)'; // 568px
$md: 'screen and (min-width: 768px)'; // 768px
$lg: 'screen and (min-width: 1024px)'; // 1024px
$xl: 'screen and (min-width: 1280px)'; // 1280px
$xxl: 'screen and (min-width: 1600px)'; // 1600px
/* ---Colors--- */
$background: #fff;
$footer: #f6f9fc;
$brand: #B50000;
$accent1: #ffcb37;
$accent2: #86fff9;
$accent3: #cff;
$accent4: #e9f0ff;
$color: #181818;
$button: #3c3c3c;
$success: #34ab76;
$error: #ff3c00;
$iconbg: #eee;
$border: #d8d8d8;

$carousel: #f6f9fc;

/* ---Fonts---- */
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');


body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Open Sans', sans-serif;
  background: #e9f0ff;
  color: $color;
  font-weight: 300;
  font-size: 14px;

  @media #{$sm} {
    font-size: 15px;
  }

  @media #{$lg} {
    font-size: 16px;
  }
}

.v-sm {
  display: none;
  @media #{$sm} {
    display: block;
  }
}

.h-sm {
  @media #{$sm} {
    display: none;
  }
}

.v-md {
  display: none;
  @media #{$md} {
    display: block;
  }
}

.h-md {
  @media #{$md} {
    display: none;
  }
}

.v-lg {
  display: none;
  @media #{$lg} {
    display: block;
  }
}

.h-lg {
  @media #{$lg} {
    display: none;
  }
}

/* Carousel */

.cr-ft {
  width: 100%;
  display: flex;
  text-align: left;
  flex-direction: row;
  position: relative;
  transition: all 450ms ease-out;

  figure.ft-f {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    box-shadow: 5px 0px 20px -5px rgba(0, 0, 0, 0.5);
    border-radius: 2px;

    img {
      width: 100%;
      height: auto;
      position: absolute;
      transform: translateX(100%);
      opacity: 0;
      transition: all 450ms ease-out;
      z-index: 1;

      &.current {
        transform: translateX(0%);
        opacity: 1;
        z-index: 2;
      }
    }
    figcaption {
      position: absolute;
   ...

JavaScript 1.7

function Icon(icon, cl = "inl") {
  return `<svg class="${cl}" width="22" height="22" viewBox="0 0 20 20"><use xlink:href="#icon-${icon}" /></svg>`;
}

function Rider(el) {
  let position;
  const slides = Array.from(el.querySelectorAll("img"));
  const triggers = Array.from(el.querySelectorAll("button"));
  const caption = el.querySelector("figcaption");
  const Select = (i) => {
    position = i;
    slides.forEach(triger => triger.classList.remove("current"));
    triggers.forEach(triger => triger.classList.remove("active"));
    triggers[i].classList.add("active");
    slides[i].classList.add("current");
    caption.innerHTML = slides[i].alt;
    el.style.minHeight = slides[i].offsetHeight + "px";
  };
  const Tooggler = (button, i) => {
    const icon = button.dataset["icon"];
    if (icon) {
      button.innerHTML = Icon(icon, "i") + " " + button.innerHTML;
    }
    button.addEventListener("click", () => Select(i));
  };
  const Nav = () => {
    const left = document.createElement("button");
    const right = document.createElement("button");
    left.type = "left";
    left.classList.add("n-m", "h-lg");
    left.innerHTML = Icon("chevron-left");
    right.type = "right";
    right.classList.add("n-m", "h-lg");
    right.innerHTML = Icon("chevron-right");
    left.addEventListener("click", () => {
      position -= 1;
      if (position < 0) position = slides.length - 1;
      Select(position);
    });
    right.addEventListener("click", () => {
      position += 1;
      if (position === slides.length) position = 0;
      Select(position);
    });
    el.appendChild(left);
    el.appendChild(right);
  }
  triggers.forEach(Tooggler);
  Nav();
  Select(0);
}

var $await = function(elid, cb) {
  function _chk() {
    var el = document.querySelector(elid);
    if (el) cb(el);
    else setTimeout(_chk, 300);
  }
  _chk();
}

$await(".cr-ft", Rider);