Flexbox로 회전식 슬라이더 만들기

회전식 슬라이더는 대부분의 슬라이더가 하나의 이미지 등을 표시하는 반면, 여러 가지를 표시하고 좌우 화살표를 누르면 페이지 어처럼 보이지 않았던 다음 쌍을 표시하는 것 가리키고 있습니다.

완성된 것

이미지로서는 이런 느낌의 것

코드

<div class="carousel">
  <div class="carousel_prev">&lt;</div>
  <div class="carousel_list_outer">
    <ul class="carousel_list">
      <li class="carousel_item">1</li>
      <li class="carousel_item">2</li>
      <li class="carousel_item">3</li>
      <li class="carousel_item">4</li>
      <li class="carousel_item">5</li>
      <li class="carousel_item">6</li>
      <li class="carousel_item">7</li>
      <li class="carousel_item">8</li>
    </ul>
  </div>
  <div class="carousel_next">&gt;</div>
</div>

.carousel{
  display: flex;
  align-items: center;
  width: 100%;
  .carousel_prev,
  .carousel_next{
    padding: 10px;
    cursor: pointer;
    &.hidden{
      visibility: hidden;
    }
  }
  .carousel_list_outer{
    flex: 1;
    overflow: hidden;
  }
  .carousel_list{
    display: flex;
    align-items: center;
    transition: 0.3s;
    .carousel_item{
      flex: 0 0 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25%;
      height: 100px;
      background-color: #ccc;
      border: 1px solid #fff;
    }
  }
}

간단히 설명

우선, 좌우의 화살표와 회전 목마의 표시 영역을 Flexbox로 가로 줄이고, 회전 목마는 flex: 1; 로 폭 가득
튀어나온 부분을 표시하고 싶지 않기 때문에 overflow: hidden;좌우 화살표가 아닌 가로 스크롤이라면 overflow-x: auto;
회전 목마 자체도 Flexbox에서 나란히 놓습니다.
이번에는, 정해진 수를 표시해, 좌우 화살표로 그 몇분 이동시키고 싶었으므로, flex: 0 0 25%; 로서, 4개 표시하도록(듯이) 했다

그리고는, 좌우의 화살표를 눌렀을 때에, 어떠한 방법으로, .carousel_list 에 클래스를 붙이는 등해, transform: 'translate(-100%, 0)'; 등으로 합니다
여기의 숫자 컨트롤에서 하나씩 스크롤 할 수 있습니다.

또한 Flexbox의 order에서도 제어할 수 있다고 생각합니다.

Vue.js에서 왼쪽 및 오른쪽 화살표 제어

CSS(Sass)는 같기 때문에 할애합니다
(마지막으로 끝나면 처음으로 돌아가지 않고 화살표를 숨기는 유형입니다)

<template>
  <div class="carousel">
    <div @click="carouselPrev" class="carousel_prev" :class="{hidden:(list.length<=4) || (carouselIndex===0)}">&lt;</div>
    <div class="carousel_list_outer">
      <ul class="carousel_list" :style="{transform: 'translate(-'+carouselIndex+'00%, 0)'}">
        <template v-for="(item, index) in list">
         <li class="carousel_item">{{item}}</li>
        </template>
      </ul>
    </div>
    <div @click="carouselNext" class="carousel_next" :class="{hidden:(list.length<=4) || (carouselIndex===carouselIndexMax)}">&gt;</div>
  </div>
</template>

<script>
export default {
  layout: "white",
  data(){
    return{
      list: [1, 2, 3, 4, 5, 6, 7, 8],
      carouselIndex: 0,
    }
  },
  computed: {
    carouselIndexMax() {
      return parseInt(this.list.length/4)-1;
    }
  },
  methods: {
    carouselPrev(){
      this.carouselIndex--;
    },
    carouselNext(){
      this.carouselIndex++;
    }
  }
}
</script>