Vue-SuperSlide(SuperSlide component for Vue)

水深无声 2022-03-06 02:36 300阅读 0赞

# Vue-SuperSlide #

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

## 简介 ##

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

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

今天提供一个 Superslide 的 Vue 封装版本，同时也逐步将 Superslide 官网上的所有 demo 用例全部示例一遍（目前正在逐步添加），让你能够便捷的在 Vue 工程中使用 Superslide 的全部功能。

## Example ##

[Demo Page][]

[CDN Example][]

## Install ##

### CDN ###

<script src="https://unpkg.com/vue/dist/vue.js"></script>
    
    <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">
        
        <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>
    
        
        
        <div class="hd" slot="titCell">
          <ul>
            <li class="on">1</li>
            <li class="">2</li>
            <li class="">3</li>
          </ul>
        </div>
    
        
        <a class="prev" href="javascript:void(0)" slot="prev"></a>
        
        <a class="next" href="javascript:void(0)" slot="next"></a>
    
        
        <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 陆续更新。

如有问题欢迎留言沟通。

[Github]: https://github.com/rockyxia/vue-superslide
[SuperSlide _ -]: http://www.superslide2.com/
[Demo Page]: https://rockyxia.github.io/vue-superslide/#/
[CDN Example]: https://codepen.io/exd/pen/qgzqme
[SuperSlide Params]: http://www.superslide2.com/param.html

发表评论取消回复

表情：

评论列表（有 0 条评论，300人围观）

还没有评论，来说两句吧...

相关阅读

相关 Unknown custom element: ＜dialog-component＞ - did you register the component correctly? For recursive

初学者找了半天的bug，对初学者太不友好了，我哭死，背景：打算拿组件来让新增和编辑都用同一个dialog。自己写不出来，去网上copy，参考： [(11条消息) Vue+

心已赠人/ 2024年03月24日 10:54/ 0 赞/ 42 阅读

相关 vue日历组件vue-calendar-component的使用介绍

[vue-calendar-component的GitHub介绍][vue-calendar-component_GitHub] 使用效果：根据开始时间和结束时间，查询出当

ゝ一纸荒年。/ 2023年02月26日 05:26/ 0 赞/ 315 阅读

相关 Vue.use()丶Vue.component()丶Vue.directive() 使用

小白记录 1. Vue.use() 引入插件安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 inst

ゝ一世哀愁。/ 2022年12月17日 02:28/ 0 赞/ 112 阅读

相关 vue 组件（component、components）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

分手后的思念是犯贱/ 2022年12月12日 15:07/ 0 赞/ 210 阅读

相关 vue 全局自定义组件 components

创建组件在/components目录下创建tabBar.vue <template> <div class="barBar-container">

╰半橙微兮°/ 2022年12月10日 01:20/ 0 赞/ 213 阅读

相关 vue components组件

组件组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。 1.局部注册

约定不等于承诺〃/ 2022年11月29日 12:23/ 0 赞/ 217 阅读

相关 To install them, you can run: npm install --save vue-upload-component vue-upload-component/dist/vue-

> 问题描述 > > To install them, you can run: npm install --save vue-upload-component

心已赠人/ 2022年11月27日 06:29/ 0 赞/ 165 阅读

相关 vue 自定义components

使用vue编写界面的时候，我们需要把一个界面里面的不同功能进行拆分，拆分到其他的文件里面，这样的逻辑更加清晰，不多说了，直接上代码，看下如何进行拆分： <templa

绝地灬酷狼/ 2022年05月23日 05:44/ 0 赞/ 180 阅读

相关 Vue-SuperSlide(SuperSlide component for Vue)

Vue-SuperSlide Vue-SuperSlide([Github][]) 是 SuperSlide 的 Vue 封装版本，API 配置及使用方法与 SuperS

水深无声/ 2022年03月06日 02:36/ 0 赞/ 301 阅读

相关构建个人组件库——vue.extend和vue.component

需求：构建一个类似[elment-ui][]的组件库，打包发布到npm 个人探索：webpack打包发布到npm流程 --> 组件开发环境和组件发布环境探索

我就是我/ 2021年09月15日 08:12/ 0 赞/ 348 阅读