Vue-SuperSlide

Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本，API 配置及使用方法与 SuperSlide 几乎一致，让你能够便捷的在 Vue 工程中使用 SuperSlide。

简介

关于 SuperSlide 的详细介绍可以到 SuperSlide 官方网站 - 大话主席 进行查看。

大话主席的 SuperSlide 是多年以前前端还处于 jQuery 时代我使用的最多的一个插件，它帮我解决了网页中大部分的文字、图片切换轮播等问题，用起来的是特别的顺手，当然现在前端三大框架的火热，已经没有多少人在关注依赖于 jQuery 的插件了，但是我相信 Superslide 的粉丝还是有不少的。

今天提供一个 Superslide 的 Vue 封装版本，同时也逐步将 Superslide 官网上的所有 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>

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

<style type="text/css">/* 本例子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;}/* 下面是前/后按钮代码，如果不需要删除即可 */.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;}
</style>

API

SuperSlide 官网中的 API 及配置均可使用

• SuperSlide Params

结语

如果你的 Vue 项目中还有各种图片、文字的切换、轮播、滚动效果，你可以直接使用 Vue-SuperSlide 了，更多的 Examples 陆续更新。

如有问题欢迎留言沟通。