脚本宝典收集整理的这篇文章主要介绍了Vue-SuperSlide(SuperSlide component for Vue)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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 陆续更新。

如有问题欢迎留言沟通。

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的Vue-SuperSlide(SuperSlide component for Vue)全部内容，希望文章能够帮你解决Vue-SuperSlide(SuperSlide component for Vue)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。