<div class="swiper">
  <h2 class="swiper__title">인기 작품</h2>
  <ul class="swiper__list">
    <li class="swiper__item">
      <div class="product-card">
        <div class="product-card__inner">
          <div class="product-card__poster">
            <img class="product-card__image" src="//github.com/UYEONG/swipe-with-rxjs/blob/master/images/we_are.jpeg?raw=true" alt="">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__title">우리는</h3>
            <ul class="product-card__genre-list">
              <li class="product-card__genre-item">로맨스</li>
              <li class="product-card__genre-item">미스테리</li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="swiper__item">
      <div class="product-card">
        <div class="product-card__inner">
          <div class="product-card__poster">
            <img class="product-card__image" src="//github.com/UYEONG/swipe-with-rxjs/blob/master/images/cats.jpeg?raw=true" alt="">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__title">아기 고양이 동그리</h3>
            <ul class="product-card__genre-list">
              <li class="product-card__genre-item">드라마</li>
              <li class="product-card__genre-item">일상</li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="swiper__item">
      <div class="product-card">
        <div class="product-card__inner">
          <div class="product-card__poster">
            <img class="product-card__image" src="//github.com/UYEONG/swipe-with-rxjs/blob/master/images/dog.jpeg?raw=true" alt="">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__title">멍멍냠냠</h3>
            <ul class="product-card__genre-list">
              <li class="product-card__genre-item">드라마</li>
              <li class="product-card__genre-item">일상</li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="swiper__item">
      <div class="product-card">
        <div class="product-card__inner">
          <div class="product-card__poster">
            <img class="product-card__image" src="//github.com/UYEONG/swipe-with-rxjs/blob/master/images/shes_hero.jpeg?raw=true" alt="">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__title">그녀의 히어로</h3>
            <ul class="product-card__genre-list">
              <li class="product-card__genre-item">판타지</li>
              <li class="product-card__genre-item">학원</li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div class="swiper__indicator">
    <button class="swiper__indication swiper__indication--active" data-index="0"></button>
    <button class="swiper__indication" data-index="1"></button>
    <button class="swiper__indication" data-index="2"></button>
    <button class="swiper__indication" data-index="3"></button>
  </div>
  <div class="swiper__control">
    <button class="swiper__button swiper__button--prev">PREV</button>
    <button class="swiper__button swiper__button--next">NEXT</button>
  </div>
</div>
.product-card {
  width:100%;
  box-sizing:border-box;
  user-select: none;
  &__inner{
    background:#fff;
    padding:8px;
    border:1px solid #c5cbd3;
  }
  &__poster{
    position:relative;
    width:100%;
    padding-bottom:50%;
    font-size:0;
    overflow:hidden;
  }
  &__image{
    position:absolute;
    width:100%;
  }
  &__title{
    margin:10px 0 0;
    font-size:16px;
  }
  &__genre-list{
    padding:0;
    margin:5px 0 0;
    list-style:none;
    font-size:0;
    color:#8fa6c0;
  }
  &__genre-item{
    position:relative;
    display:inline-block;
    padding-right:10px;
    font-size:14px;
    &:after {
      position:absolute;
      display:inline-block;
      content:'/';
      right:3px;
    }
    &:last-child:after {
      display:none;
    }
  }
}

.swiper {
  overflow:hidden;
  margin-top:10px;
  max-width: 640px;
  &__title{
    font-size:18px;
    margin:20px 0 0;
  }
  &__list{
    margin:10px -5px;
    padding:0;
    list-style:none;
    white-space:nowrap;
    font-size:0;
    overflow:visible;
  }
  &__item{
    width:100%;
    padding:0 5px;
    display:inline-block;
    box-sizing:border-box;
  }
  &__indicator{
    text-align:center;
  }
  &__indication{
    width:8px;
    height:8px;
    background:#8fa6c0;
    border:0;
    padding:0;
    border-radius:50%;
    font-size:0;
  }
  &__indication--active{
    background:#000;
  }
  &__control{
    margin:5px 0 0;
    font-size:0;
  }
  &__button{
    width:50px;
    background:#0877d6;
    border:0;
    color:#fff;
    font-size:11px;
  }
  &__button--next{
    float:right;
  }
}
View Compiled
const elSwiper = document.querySelector('.swiper');
const elList = elSwiper.querySelector('.swiper__list');
const elIndicator = elSwiper.querySelector('.swiper__indicator');
const elPrevious = elSwiper.querySelector('.swiper__button--prev');
const elNext = elSwiper.querySelector('.swiper__button--next');
const count = elList.querySelectorAll('.swiper__item').length - 1;

function translateX(element, deltaX, duration = 0, callback = null) {
    element.style.transition = `transform ${duration}s`;
    element.style.transform = `translate3d(${deltaX}px, 0, 0)`;
    if (duration > 0 && callback) {
        element.addEventListener('transitionend', callback, {once: true})
    }
}

function updateIndicator(element, index) {
    element.querySelector('.swiper__indication--active').classList.remove('swiper__indication--active');
    element.querySelector(`.swiper__indication:nth-child(${index + 1})`).classList.add('swiper__indication--active');
}
Rerun