Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
38
Help us understand the problem. What is going on with this article?
@nakanishi03

【Vue.js】Vue.js(Nuxt.js)でスライダーを導入してみた【vue-awesome-swiper】

はじめに

人材系ベンチャーでシステムの開発をしている私ですが、「UI/UX色々変えちゃおうぜ!!」ってなったので
その一つを紹介していきますううううう:stuck_out_tongue::stuck_out_tongue:
ちなみにフロントはNuxtでRailsAPI叩いてますううううう:stuck_out_tongue::stuck_out_tongue:

環境

  • MacOS
  • yarn 1.21.1
  • node 12.0.0
  • vue 2.6.1
  • vue-awesome-swiper 2.1.3

解決したい問題

以前のデザイン

スクリーンショット 2020-04-03 21.23.14.png
スクリーンショット 2020-04-03 22.52.33.png

新デザイン

ダウンロード.gif
ダウンロード (1).gif

「案件の数がトップページで4つしか出ないのは微妙だなー」
「スマホでの冗長化えぐいなあ」
って思っていました。
これを解決するには「スライダーの導入や!!!」となり、実装するに至りました。

※ついでに中のカードのデザインも変えちゃいました(笑)

vue-awesome-swiperの導入

ターミナル
yarn add vue-awesome-swiper

今回はvue-awesome-swiperを使用しましたー

github
公式ドキュメント

pluginに追加

plugins/vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

pluginフォルダーの中にvue-awesome-swiper.jsを作成しましょう。
コードの中身は"Vue"とか「"VueAwesomeSwiper"を読み込んで、VueAwesomeSwiperとしてプラグインを使用します」みたいな感じです。

nuxt.config.jsに追記

nuxt.config.js
module.exports = {
  plugins: [
    { src: '@/plugins/vue-awesome-swiper', ssr: false }
  ],
  build: {
    vendor: [
      'vue-awesome-swiper'
    ]
  }
}

こんな感じですね。

index.vueに記載

index.vue
<template>
  <div>
    <swiper>
      <swiper-slide>スライダー1</swiper-slide>
      <swiper-slide>スライダー2</swiper-slide>
      <swiper-slide>スライダー3</swiper-slide>
    </swiper>
  </div>
</template>

swiper-slide(スライドさせたい子要素)をswiper(親要素)で囲う感じですね。

index.vue
<template>
  <div>
    <swiper>
      <swiper-slide>
        <img
          src="~/assets/images/top-sample1.png"
          alt="sample1">
      </swiper-slide>

      <swiper-slide>
        <img
          src="~/assets/images/top-sample2.png"
          alt="sample2">
      </swiper-slide>

      <swiper-slide>
        <img
          src="~/assets/images/top-sample3.png"
          alt="sample3">
      </swiper-slide>
    </swiper>
  </div>
</template>

画像をスライドさせたいならこんな感じです。

optionを追加する

ここからがvue-awesome-swiperの凄さが実感できます。

index.vue
<template>
  <div>
    <swiper
      :options="swiperOption">
      <swiper-slide>スライダー1</swiper-slide>
      <swiper-slide>スライダー2</swiper-slide>
      <swiper-slide>スライダー3</swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        speed: 1000,//スライドの切り替わりスピード
        spaceBetween: 30,//各スライドの余白
        centeredSlides: true,//スライダーを真ん中に
        loop: true, //無限ループ
        autoplay: { //スライドの自動切り替え
          delay: 5000,//スライドの自動切り替えの秒数
          disableOnInteraction: false//何らかのアクション後の自動切り替えを再開
        }
      }
    }
  }
}
</script>

よくあるスライドだとこんな感じです。
data内のswiperOptionにあれこれ記載してくだけでスライダーをカスタマイズできるんですね。
素晴らしい:clap::clap:
カスタマイズ(パラメーター)はここでは説明しきれないくらいたくさん種類があるので、是非公式を見て試してみてください。
公式ドキュメント

ページネーションとナビゲーション

index.vue
<template>
  <div>
    <swiper
      :options="swiperOption">
      <swiper-slide>スライダー1</swiper-slide>
      <swiper-slide>スライダー2</swiper-slide>
      <swiper-slide>スライダー3</swiper-slide>
    </swiper>
    <div
      slot="pagination"
      class="swiper-pagination"/>
    <div
      slot="button-prev"
      class="swiper-button-prev"/>
    <div
      slot="button-next"
      class="swiper-button-next"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        ~省略~
      },
        pagination: { //ページネーション設定
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: { //ナビゲーション設定
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

ページネーションとかナビゲーションもめちゃめちゃ簡単につけられます。
ちなみに<swiper>の中に入れることもできるのでお好みでどうぞ。
スクリーンショット 2020-04-04 3.21.45.png

レスポンシブ対応

index.vue
<script>
export default {
  data() {
    return {
      swiperOption: {
          ~省略~
        },
        pagination: { 
          ~省略~
        },
        navigation: { 
          ~省略~
        },
        breakpoints: {
          1200: {
            slidesPerView: 2
          },
          600: {
            slidesPerView: 1.2,
            spaceBetween: 0
          }
        }
      }
    }
  }
}
</script>

レスポンシブも超簡単です。
画面サイズごとに表示するスライド数や、スペース間隔を設定できます。swiperOptionにbreakpointsを追加し、画面サイズ毎に定義します。
例えば1200px以下になると「スライド数が2つ」、600px以下になると「スライド数が1つ」「スライドの余白ゼロ」にするみたいな感じでできます。

(補足)v-forでAPIデータをスライドさせる

※このセクションは今回の私の実装例の話ですので、簡単なスライダーを使いたいだけという方は飛ばしてください。

index.vue
<template>
  <div>
    <swiper>
      <swiper-slide
        v-for="project in projects"
        :key="project.id">
        <JobCard
          :project="project" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import JobCard from '~/components/parts/JobCard.vue'

export default {
  components: {
    JobCard
  },
  computed: {
    projects() {
      return this.$store.state.projects
    }
  },
  async mounted() {
    ~省略~
  }

</script>

今回の実装ではAPIで取得したprojectsデータをv-forで展開してます。
つまりprojectsの配列に入っている値の数だけswiper-slideが作られる感じですね。
そのデータを今回はJobCardコンポーネントに入れて、カードを作っています。
ここは状況によってかなり異なるので各自カスタマイズしてください。

おわりに

こんな感じでvue-awesome-swiperを使ってスライダーの実装を行いました!!!
社内でも「デザイン良くなった!!」と言われて喜んでます:santa::santa:
フリエンというフリーランスエンジニアの案件サイトを作っているので興味があったら覗いてみてください!!!
結構色々案件あります:money_mouth::money_mouth:

38
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nakanishi03
早稲田大学文化構想学部→JT(法人営業)→ITベンチャー(エンジニア)
anconsulting
フリーランスITエンジニア向け案件・求人サイト「フリエン」を運営するスタートアップ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
38
Help us understand the problem. What is going on with this article?