자유로운 맞춤형 vue-carousel, 좋아하는 슬라이드 제작 기능

개발 과정에서 vue-carousel의 미끄럼 기능을 이용하여 그곳에서 막힌 난감한 부분과 방법에 따라 사전에 편리한 점을 귀결시킨다.
이런 슬라이드.js로 제작하고 싶을 때 vue-carousel이라는 프로그램 라이브러리를 사용하면 간단하게 실현할 수 있고 자신이 좋아하는 슬라이드 기능도 만들 수 있다.

단순 이용

간단한 가져오기

npm i vue-carousel

그리고 개발 중인 파일에

<script>
import { Carousel, Slide } from 'vue-carousel';
export default {
  components: {
    Carousel,
    Slide
  }
}
</script>

4장의 슬라이드를 준비하고 각각 1장의 이미지를 구성해 보세요.

<carousel>
  <slide>
    <img src="slide1.png" alt="スライド1">
  </slide>
  <slide>
    <img src="slide2.png" alt="スライド2">
  </slide>
  <slide>
    <img src="slide3.png" alt="スライド3">
  </slide>
  <slide>
    <img src="slide4.png" alt="スライド4">
  </slide>
</carousel>

이것은 何も指定指定していない의 새로운 상태 vue-carousel의 사용 예이다.
이렇게 하면 한 페이지에 두 개의 슬라이드가 표시됩니다.

편리한 기능

다음은 vue-carousel의 편리한 기능을 소개합니다.
vue-carousel은 아직 개발 중입니다.α버전 라이브러리입니다.
매일 편의기능이 추가됐지만, 지금은 기본적으로 사용할 수 있는 편의옵션을 두 가지 방법으로 사용할 수 있다.하나는 Configuration, 다른 하나는 Events이다.

Configuration/설정

vue-carousel에 대한 다양한 설정이 기본적으로 준비되어 있습니다.
아무것도 설정하지 않으면 1장의 슬라이드에 2장의 그림이 나오지만 1장의 슬라이드 그림으로 설정하고 싶습니다.현재 슬라이드와 아래 내비게이션● ○에서 슬라이드를 사용하고 있지만 < > 단추를 설정하고 싶을 수도 있고 슬라이드의 속도를 좀 더 늦추고 싶을 수도 있습니다.
따라서 슬라이드에 여러 가지 설정을 하려고 할 때 <carousel> 탭이 준비한 내용에 대해 Configuration을 써서 간단하게 설정할 수 있습니다.
예를 들어, 위의 Configuration을 태그로 설정합니다.

<carousel
:per-page="1"
:navigation-enabled="true"
navigation-prev-label="〈"
navigation-next-label="〉"
:speed="1000">
  <slide>
    <img src="slide1.png" alt="スライド1">
  </slide>
  <slide>
    <img src="slide2.png" alt="スライド2">
  </slide>
  <slide>
    <img src="slide3.png" alt="スライド3">
  </slide>
  <slide>
    <img src="slide4.png" alt="スライド4">
  </slide>
</carousel>

: per-page = "1": 슬라이드 1장에 1장의 이미지를 표시하기 위해 1페이지 1장의 슬라이드를 설정합니다.
: navigation enabled = "진짜": navigation 탭을 사용할 수 있도록 설정
설정설정설정설정(text 뭐든지 가능)
navigation-next-label=">: 다음 버튼 설정(text 뭐든지 가능)
: speed = "1000": 느린 슬라이딩 속도(500은 기본값, 숫자는 크면 느림)
이렇게 자신이 사용하고 싶은 설정을 쓰면 자유롭게 사용자 정의를 할 수 있다.상기 이외의 설정은 vue-carouselGithub에서 공개되며 거기서 확인하세요.

이벤트 / 이벤트

사용자 정의 슬라이드의 또 다른 방법은 활동이다.
이벤트에는 <carousel> 탭 또는 <slide> 탭에 기술된 두 개의 기술 장소가 있습니다.
예를 들어 강좌를 상상해 보면 기본적인 귀환/다음 단추를 제외하고는 내비게이션 옆에 건너뛰기 단추를 설정하거나 아래에 단추를 설정하고 싶을 수도 있다.이럴 때 vue-carousel의 기본 기능은 이런 기능이 존재하지 않기 때문에 스스로 조작해야 한다(앞으로 실현될지 모르겠지만).
이 경우 Events 를 사용하면 기본navigation-next-labe와 단추를 연결할 수 있습니다.

<carousel
ref="carousel"//←追記
:per-page="1"
:navigation-enabled="true"
navigation-prev-label="〈"
navigation-next-label="〉"
:speed="1000"
@pageChange="onPageChange">
  <slide>
    <img src="slide1.png" alt="スライド1">
  </slide>
  <slide>
    <img src="slide2.png" alt="スライド2">
  </slide>
  <slide>
    <img src="slide3.png" alt="スライド3">
  </slide>
  <slide>
    <img src="slide4.png" alt="スライド4">
  </slide>
</carousel>
<nuxt-link to="/example">スキップ</nuxt-link>//用意したスキップボタン
<p @click.prevent="nextSlide">次へ</p>//用意した次へボタン

<script>
import { Carousel, Slide } from 'vue-carousel';
export default {
  components: {
    Carousel,
    Slide
  },
  data() {
      return {
        preIndex: 0
    };
  },
  methods: {
    onPageChange: function(index) {
      this.preIndex = index;
    },
    nextSlide() {
      this.$refs.carousel.goToPage(this.$refs.carousel.getNextPage());
      // preIndexが最後のスライドだった時に別のページに飛ぶ
      if (this.preIndex === 3) {
        this.$router.push('/example');
      }
    }
  }
}
</script>

기본 설정 옵션pageChange 이벤트를 사용합니다.pageChange 이벤트는 현재 페이지의 값을 인덱스로 되돌려줍니다.
(주의: 클릭을 통해 현재 페이지의 값을 되돌려줍니다. 첫 번째 슬라이드를 보일 때 클릭이 없기 때문에 가져올 수 없습니다. index=0preIndex에 초기값 0을 설정합니다.)
마지막 슬라이드에서 다음 버튼을 누르면 다른 페이지로 날아갈 수 있도록preIndex의 값이 3이 될 때의 조건을 기재했습니다.이번엔 슬라이드가 4장밖에 없기 때문에 프리인덱스가 3이 됐을 때라도 이런 조건은 가능하지만 4는 현재의 슬라이드 수에 불과하기 때문에 앞으로의 일을 고려해 구체적인 숫자 이외의 실시는 피해야 한다.(스스로 피하지 않으면 욕을 먹을 수도 있다.)
이렇게 vue-carousel에 기본적으로 존재하는 이벤트pageChange를 사용하면 슬라이드의 구성도 사용자 정의로 할 수 있고 자신의 취향에 따라 진행할 수 있다.
또 이번에는 나비게이션에 추가된 다음 단계·복귀 버튼에 스타일을 적용해 첫 번째 슬라이드에서는 후퇴를 표시하지 않고 마지막 슬라이드에서는 다음 슬라이드를 표시하지 않도록 했다.

// > ボタン
/deep/ .VueCarousel-navigation-next {
  font-size: 4rem;
}

// < ボタン
/deep/ .VueCarousel-navigation-prev {
  font-size: 4rem;
}

// 最初と最後のスライドにつくclass
/deep/ .VueCarousel-navigation--disabled {
  display: none;
}

개발 도구를 크게 활용하고 vue-carousel이 기본적으로 설치한class와 스타일을 확인하며 좋아하는 슬라이드 기능을 실현할 수 있도록 하면 됩니다.
처음에도 vue-carousel은 아직 개발 중이라고 기록되어 있다α버전 라이브러리이기 때문에 자신이 하고 싶은 일이 기본 옵션이 되지 않았을 때도 Giithub의 Issues에 방법을 적는다.
이번에 참고로 이 IssuesFully customized pagination and navigation #88입니다.
그리고 아직 실수 옵션은 없지만
(´-`)Issues로 OO(이런 거 하고 싶구나~)라는 생각을 버리면...

이미 있다고 말해줘.
처음으로 외부와 교류하는 것이 흥분되어 놀라움을 남겼다.
나는 앞으로도 여러 가지 방법을 써서 vue-carousel을 사용할 것이라고 생각한다.
모든 공개된 설정과 이벤트는 Vue-carousel의Github를 참고하세요.
끝맺다