Vue-SuperSlide
Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封裝版本靶累，API 配置及使用方法與 SuperSlide 幾乎一致宏蛉，讓你能夠便捷的在 Vue 工程中使用 SuperSlide。
簡(jiǎn)介
關(guān)于 SuperSlide 的詳細(xì)介紹可以到 SuperSlide 官方網(wǎng)站 - 大話(huà)主席 進(jìn)行查看俘种。
大話(huà)主席的 SuperSlide 是多年以前前端還處于 jQuery 時(shí)代我使用的最多的一個(gè)插件，它幫我解決了網(wǎng)頁(yè)中大部分的文字、圖片切換輪播等問(wèn)題缚柳，用起來(lái)的是特別的順手，當(dāng)然現(xiàn)在前端三大框架的火熱搪锣，已經(jīng)沒(méi)有多少人在關(guān)注依賴(lài)于 jQuery 的插件了秋忙，但是我相信 Superslide 的粉絲還是有不少的。
今天提供一個(gè) Superslide 的 Vue 封裝版本构舟，同時(shí)也逐步將 Superslide 官網(wǎng)上的所有 demo 用例全部示例一遍（目前正在逐步添加）灰追，讓你能夠便捷的在 Vue 工程中使用 Superslide 的全部功能。
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 及配置均可使用
結(jié)語(yǔ)
如果你的 Vue 項(xiàng)目中還有各種圖片弹澎、文字的切換、輪播努咐、滾動(dòng)效果苦蒿，你可以直接使用 Vue-SuperSlide 了，更多的 Examples 陸續(xù)更新渗稍。
如有問(wèn)題歡迎留言溝通佩迟。
