Vue-SuperSlide

Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封裝版本，API 配置及使用方法與 SuperSlide 幾乎一致，讓你能夠便捷的在 Vue 工程中使用 SuperSlide。

簡(jiǎn)介

關(guān)于 SuperSlide 的詳細(xì)介紹可以到 SuperSlide 官方網(wǎng)站 - 大話主席 進(jìn)行查看。

大話主席的 SuperSlide 是多年以前前端還處于 jQuery 時(shí)代我使用的最多的一個(gè)插件，它幫我解決了網(wǎng)頁中大部分的文字、圖片切換輪播等問題，用起來的是特別的順手，當(dāng)然現(xiàn)在前端三大框架的火熱，已經(jīng)沒有多少人在關(guān)注依賴于 jQuery 的插件了，但是我相信 Superslide 的粉絲還是有不少的。

今天提供一個(gè) Superslide 的 Vue 封裝版本，同時(shí)也逐步將 Superslide 官網(wǎng)上的所有 demo 用例全部示例一遍（目前正在逐步添加），讓你能夠便捷的在 Vue 工程中使用 Superslide 的全部功能。

Example

Demo Page

CDN Example

Install

CDN

<!-- import Vue before SuperSlide -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/vue-superslide/lib/vue-superslide.umd.min.js"></script>

NPM

npm install vue-superslide --save

Mount

import Vue from 'vue'
import VueSuperSlide from 'vue-superslide'

Vue.use(VueSuperSlide)

SPA Example

<template>
  <superslide :options="options" class="slideBox">
    <!-- slides -->
    <div class="bd">
      <ul>
        <li>
          <a href="javascript:;"><img src="../images/pic1.jpg"/></a>
        </li>
        <li>
          <a href="javascript:;"><img src="../images/pic2.jpg"/></a>
        </li>
        <li>
          <a href="javascript:;"><img src="../images/pic3.jpg"/></a>
        </li>
      </ul>
    </div>

    <!-- Optional controls slots -->
    <!-- slot="titCell" -->
    <div class="hd" slot="titCell">
      <ul>
        <li class="on">1</li>
        <li class="">2</li>
        <li class="">3</li>
      </ul>
    </div>

    <!-- slot="prev" -->
    <a class="prev" href="javascript:void(0)" slot="prev"></a>
    <!-- slot="next" -->
    <a class="next" href="javascript:void(0)" slot="next"></a>

    <!-- slot="pageStateCell" -->
    <span class="pageState" slot="pageStateCell"></span>
  </superslide>
</template>

  export default {
    name: "slideBox",
    data () {
      return {
        options: {
          mainCell: ".bd ul",
          autoPlay: true
        }
      }
    }

  /* 本例子css */
  .slideBox {
    width: 450px;
    height: 230px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
  }
  .slideBox .hd {
    height: 15px;
    overflow: hidden;
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 1;
  }
  .slideBox .hd ul {
    overflow: hidden;
    zoom: 1;
    float: left;
  }
  .slideBox .hd ul li {
    float: left;
    margin-right: 2px;
    width: 15px;
    height: 15px;
    line-height: 14px;
    text-align: center;
    background: #fff;
    cursor: pointer;
  }
  .slideBox .hd ul li.on {
    background: #f00;
    color: #fff;
  }
  .slideBox .bd {
    position: relative;
    height: 100%;
    z-index: 0;
  }
  .slideBox .bd li {
    zoom: 1;
    vertical-align: middle;
  }
  .slideBox .bd img {
    width: 450px;
    height: 230px;
    display: block;
  }

  /* 下面是前/后按鈕代碼，如果不需要?jiǎng)h除即可 */
  .slideBox .prev,
  .slideBox .next {
    position: absolute;
    left: 3%;
    top: 50%;
    margin-top: -25px;
    display: block;
    width: 32px;
    height: 40px;
    background: url(../assets/images/slider-arrow.png) -110px 5px no-repeat;
    filter: alpha(opacity=50);
    opacity: 0.5;
  }
  .slideBox .next {
    left: auto;
    right: 3%;
    background-position: 8px 5px;
  }
  .slideBox .prev:hover,
  .slideBox .next:hover {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  .slideBox .prevStop {
    display: none;
  }
  .slideBox .nextStop {
    display: none;
  }

API

SuperSlide 官網(wǎng)中的 API 及配置均可使用

• SuperSlide Params

結(jié)語

如果你的 Vue 項(xiàng)目中還有各種圖片、文字的切換、輪播、滾動(dòng)效果，你可以直接使用 Vue-SuperSlide 了，更多的 Examples 陸續(xù)更新。

如有問題歡迎留言溝通。