[筆記] Vue-Carousel 輕量化輪撥套件介紹 @地瓜大的飛翔旅程

章節連結

說明

安裝
使用

參考資料
其他 Vue.js 相關文章

說到 Carousel 輪撥系列的套件，Swiper 可以說是滿知名的一個，也有整合版的 Vue Awesome Swiper 可供使用。不過若你只是要簡單輕量的輪撥功能，那麼 Vue-Carousel 在使用上更加直覺、方便且檔案大小較小。

說明

安裝

1. 運用 npm install -s vue-carousel 來進行安裝
2. 建議使用 Global 方式來安裝，這樣可以直接在樣板以 <carousel> 和 <slide> 的方式使用
官方文件：https://ssense.github.io/vue-carousel/guide/

使用

示範結構如下：

// demo1
<carousel>
  <slide>
    Slide 1 Content
  </slide>
  <slide>
    Slide 2 Content
  </slide>
</carousel>

// demo2
// 若你要複雜一點的內容也是可以的，以下是把一張 card 的內容放到 Slide 裡面
<carousel
          :per-page="1"
          :perPageCustom="[
            [576, 1],
            [768, 2],
            [1024, 4]
          ]"
          :mouse-drag="true"
          :navigationEnabled="windowWidth >= 576 ? true : false"
          class="carousel-custom"
        >
          <slide v-for="(project, index) in projects" :key="index">
            <div class="card">
              <img
                :src="`${project.thumb_img}`"
                :alt="`port-folio-${index}`"
                class="card__img"
              />

              <div class="card__body">
                <h3 class="card__body__title">{{ project.title }}</h3>
                <span
                  class="card__body__finishedTime"
                  :class="
                    project.isFinished ? 'card__body__finishedTime--blue' : ''
                  "
                  >{{ project.finished_time }}</span
                >
                <span>
                  <font-awesome-icon
                    v-if="project.isFinished"
                    :icon="['fas', 'check']"
                    class="card-body__icon card-body__icon--check"
                  />
                  <font-awesome-icon
                    v-else
                    :icon="['fas', 'wrench']"
                    class="card-body__icon card-body__icon--wrench"
                  />
                </span>
                <div class="card-text">
                  <ul v-for="(item, index) in project.listItems" :key="index">
                    <li>{{ item }}</li>
                  </ul>
                </div>
              </div>

              <div class="card-footer">
                <div class="row">
                  <div class="circle">
                    <a target="_blank" :href="project.web_url">
                      <font-awesome-icon
                        :icon="['fas', 'external-link-alt']"
                        class="card-footer__icon"
                      />
                    </a>
                  </div>
                  <div class="circle" v-if="project.github_url">
                    <a target="_blank" :href="project.github_url">
                      <font-awesome-icon
                        :icon="['fab', 'github']"
                        class="card-footer__icon"
                      />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </slide>
        </carousel>