精华内容
下载资源
问答
  • vue幻灯片
    2021-10-29 15:47:10

    1、html

    <div class="forestScene">
        <div class="forestScenePic">
            <div class<
    更多相关内容
  • vue-monoplasty-slide-verify 一个Vue插件以滑动验证 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run ...
  • vue 幻灯片组件_vue.js的幻灯片组件

    千次阅读 2020-07-25 11:58:50
    vue 幻灯片组件 Vue幻灯片放映 (vue-slideshows) a slideshow component for vue.js. vue.js的幻灯片组件。 安装 (Installation) Using npm npm install vue-slideshows --save #or cnpm install vue-slideshows...

    vue 幻灯片组件

    Vue幻灯片放映 (vue-slideshows)

    a slideshow component for vue.js.

    vue.js的幻灯片组件。

    安装 (Installation)

    Using npm

    使用npm

    npm install vue-slideshows --save
    #or
    cnpm install vue-slideshows --save

    用法 (Usage)

    In main.js

    在main.js中

    import Vue from 'vue'
    import slideShows from 'vue-slideshows'
    
    Vue.use(slideShows)
    
    // new Vue({ //... })

    In_.vue

    In_.vue

    <slideshow :data="imgList" @jump="jumpTo" />
    export default {
      name: "demo",
      data(){
        return {
          imgList: [
            // the object must have `src` property
            // `title` : img 's title
            // `src` : img 's src
            {title: "defalut" , src: "./images/1.jpg"},
            {title: "defalut2" , src: "./images/2.jpg"},
            // ...
          ]
        }
      },
      methods: {
        jumpTo(){
          // do somethig when you click the img ...
        }
      }
    }

    物产 (Properties)

    属性类型说明可选值是否必需
    wString轮播图宽度100% (默认)
    hString轮播图高度340px ( 默认)
    dataArray of object轮播数据默认展示的本地测试图片 使用 :data 覆盖即可
    autoplayBoolean是否开启自动循环轮播true (默认)
    intervalNumber自动轮播间隔毫秒数2000 (默认)
    属性 类型 说明 任选值 是否必需
    w 轮播图宽度 100%(最低)
    H 轮播图高度 340px(默认)
    数据 对象数组 轮播数据 默认展示的本地测试图片使用:data覆盖即可
    自动播放 布尔型 是否开启自动循环轮播 true(最低)
    间隔 自动轮播间隔毫秒数 2000(最低)

    注意:

    注意:

    1. :data prop 必须是对象数组类型,且该对象中必须包含 src 字段 (图片地址)

      :data prop必须是对象类别类型,并且该对象中必须包含src细分(图片地址)

    大事记 (Events)

    @jump

    @跳

    点击某张图片时触发句柄

    点击某张图片时触发句柄

    <slideshow @jump="jumpTo" />
    export default {
      name: "demo",
      data(){
        return {}
      },
      methods: {
        jumpTo(info){
          // `info` is the data of current img
          // do somethig when you click the img ...
        }
      }
    }

    翻译自: https://vuejsexamples.com/a-slideshow-component-for-vue-js/

    vue 幻灯片组件

    展开全文
  • vue 幻灯片组件 Vue-tantan堆栈 (vue-tantan-stack) A nice slide Component with vue.js. 带有vue.js的漂亮幻灯片组件。 View demo 查看演示 Download Source 下载源 安装 (install) npm install vue-tantan-...

    vue 幻灯片组件

    Vue-tantan堆栈 (vue-tantan-stack)

    A nice slide Component with vue.js.

    带有vue.js的漂亮幻灯片组件。

    安装 (install)

    npm install vue-tantan-stack --save

    (use)

    <template>
      <div class="mid-center">
        <div class="stack-wrapper">
          <stack ref="stack" :pages="someList" :stackinit="stackinit"></stack>
        </div>
        <div class="controls">
          <button @click="prev" class="button"><i class="prev"></i><span class="text-hidden">prev</span></button>
          <button @click="next" class="button"><i class="next"></i><span class="text-hidden">next</span></button>
        </div>
      </div>
    </template>
    <script>
    import stack from '../components/stack'
    export default {
      el: '#stack',
      data () {
        return {
          someList: [],
          stackinit: {
            visible: 3
          }
        }
      },
      mounted () {
        let that = this
        setTimeout(function () {
          that.someList = [
            {
              html: '<img src="src/img/1.png" alt="01">'
            },
            {
              html: '<img src="src/img/2.png" alt="02">'
            },
            {
              html: '<img src="src/img/3.png" alt="03">'
            },
            {
              html: '<img src="src/img/4.png" alt="04">'
            },
            {
              html: '<img src="src/img/5.png" alt="05">'
            },
            {
              html: '<img src="src/img/6.png" alt="06">'
            },
            {
              html: '<img src="src/img/7.png" alt="07">'
            }
          ]
        }, 2000)
      },
      components: {
        stack
      },
      methods: {
        prev () {
          this.$refs.stack.$emit('prev')
        },
        next () {
          this.$refs.stack.$emit('next')
        }
      }
    }
    </script>
    <style>
      .stack-wrapper{
        margin: 0 auto;
        position: relative;
        z-index: 1000;
        width: 320px;
        height: 320px;
        padding: 0;
        list-style: none;
        pointer-events: none;
      }
      .controls{
        position: relative;
        width: 200px;
        text-align: center;
        display:flex;/*Flex布局*/
        display: -webkit-flex; /* Safari */
        justify-content:space-around;
        margin: 0 auto;
        margin-top: 50px
      }
      .controls .button {
        border: none;
        background: none;
        position: relative;
        display: inline-block;
        cursor: pointer;
        font-size: 16px;
        width: 50px;
        height: 50px;
        z-index: 100;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        border-radius: 50%;
        background: #fff;
      }
      .button .next{
        display: inline-block;
        width: 10px;
        height:5px;
        background: rgb(129,212,125);
        line-height: 0;
        font-size:0;
        vertical-align: middle;
        -webkit-transform: rotate(45deg);
        left: -5px;
        top: 2px;
        position: relative;
      }
      .button .next:after{
        content:'/';
        display:block;
        width: 20px;
        height:5px;
        background: rgb(129,212,125);
        -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
      }
      .button .prev{
        display: inline-block;
        width: 20px;
        height:5px;
        background: rgb(230,104,104);
        line-height: 0;
        font-size:0;
        vertical-align: middle;
        -webkit-transform: rotate(45deg);
      }
      .button .prev:after{
        content:'/';
        display:block;
        width: 20px;
        height:5px;
        background: rgb(230,104,104);
        -webkit-transform: rotate(-90deg);
      }
      .controls .text-hidden {
        position: absolute;
        overflow: hidden;
        width: 0;
        height: 0;
        color: transparent;
        display: block;
    }
    </style>

    翻译自: https://vuejsexamples.com/a-nice-slide-component-with-vue/

    vue 幻灯片组件

    展开全文
  • 最近实在太忙了,这个页面早就设计好了,只是时间问题一直没有发。 页面交互功能没有做,主要考虑每个人用的支持库或者wke不同,自己修改也很简单。新手建议先去学习js与程序交互。源码中大部分js都是CDN,可能打开...
  • 基于vue.js构建的简单图片相册幻灯片轮播切换代码,响应式幻灯片大图切换展示效果,点击小图或者箭头按钮控制切换。
  • 主要介绍了vue.js实现的幻灯片功能,结合实例形式分析了vue.js实现幻灯片的相关样式、配置、功能等操作技巧,需要的朋友可以参考下
  • vue-concise-slider 一个轻量的vue幻灯片组件 阅读 541 收藏 35 2017-07-03 原文链接:github.com 外卖订单处理有烦恼?试试美团点评餐饮开放平台吧,可实现自动接单/录单!...v...

    vue-concise-slider 一个轻量的vue幻灯片组件

    阅读 541
    收藏 35
    2017-07-03
    原文链接: github.com

    中文 | English

    vue-concise-slider.js

    npm npm npm


    vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端

    版本

    v2.1.2 支持vue2.0+

    目前已实现

    •  全屏自适应
    •  移动端兼容
    •  垂直滚动
    •  定时自动切换
    •  不定宽度滚动
    •  无缝循环滚动
    •  多级滚动

    未来将实现

    •  渐变滚动
    •  视差效果

    例子

    slider效果
    完整文档

    安装

      npm install vue-concise-slider --save

    如何使用

    <template>
      <slider :pages="pages" :sliderinit="sliderinit"> <!-- slot --> </slider> </template> <script> import slider from 'vue-concise-slider'// 引入slider组件 export default {  el: '#app',  data () {  return {  //图片列表[arr]  pages:[  {  title: '',  style:{  background:'url(src/img/testimg-1.jpg)'  }  },  {  title: '',  style:{  background:'url(src/img/testimg-2.jpg)'  }  },  {  title: 'slide3',  style

    转载于:https://www.cnblogs.com/weiyiyong/p/7798024.html

    展开全文
  • 首先新建项目vue init webpack projectName 安装依赖包npm i这些就不说了 接下来就是构建我们的swiper组件因为我写的代码不规范, 通不过eslint的检测, 会频繁报警告, 所以不愿意看警告的可以打开\build\webpack....
  • 使用vue实现幻灯片

    千次阅读 2018-02-26 21:13:25
    1、在父组件中&lt;slide-show :slides="slides"&gt;&lt;/slide-show&gt;...import SlideShow from '@/components/SlideShow' ... },2、在slideshow.vue中&lt;template&gt; &l...
  • 安装组件需要停掉nuxt服务 否则报错
  • Vue2中使用vue-awesome-swiper创建轮播图幻灯片 vue-awesome-swiper@3.1.3 vue-awesome-swiper@4.1.1
  • 一个Vue组件用于基于Markdown的幻灯片
  • SpringBoot之Vue安装幻灯片插件 前台项目使用了nuxt模板,但这个模板没有Element组件,所以需要引入 Nuxt官网 1.安装插件 npm install vue-awesome-swiper 2. 新建nuxt-swiper-plugin.js,并放入内容 import Vue ...
  • vue.js图片相册幻灯片实例下载是一款基于Vue.js构建的响应式的图片幻灯片,图片相册,大图切换展示代码。
  • vue-mark-display Vue组件,用于生成基于Markdown的幻灯片。 安装npm install vue-mark-display用法<模板> <mark-display:markdown =“ markdown” @ title =“ setTitle” vue-mark-display Vue组件,用于...
  • vue.js图片相册幻灯片实例下载是一款基于Vue.js构建的响应式的图片幻灯片,图片相册,大图切换展示代码。
  • 电子应用程序,用于使用Reveal.js和Vue制作幻灯片 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 运行端到端测试 yarn test:e2e 整理和修复...
  • 幻灯片使用频率很高,就是各个网站的轮播大图。为了使图片更加平滑的过渡,就考虑给幻灯片加上transition动画。先看实现的效果,然后再分析动画原理。 上图可以看出,幻灯片是慢慢的滑出来,而不是一下一下的跳出来...
  • 使用Vue制作幻灯片

    千次阅读 2017-10-24 18:30:37
    一、数据准备在页面中的幻灯片一般都会作为一个组件,由父组件将幻灯片组件需要的数据传入,数据slides如下:slides: [ { src: require('../assets/slideShow/pic1.jpg'), title: 'xxx1', href: 'detail/analys
  • 官网: http://www.swiper.com.cn/ 1.在main.js引入import VueAwesomeSwiper from 'vue-awesome...在main.js使用Vue.use(VueAwesomeSwiper); 3.在页面中import { swiper, swiperSlide } from 'vue-awesome-swiper' 4...
  • 效果 想要达到的效果如下图,顶部横幅有6... } style> 根据这个模板,创建我们自己的走马灯组件,新建pmd.Vue文件设计我们自己的走马灯组件: <template> <el-carousel :interval="4000" type="card" height="100px"> ...
  • Vueper幻灯片Vue JS的触摸就绪且响应灵敏的幻灯片/轮播。 安装npm install vueperslides-保存演示和文档https:/ Vueper幻灯片Vue JS的触摸式就绪响应式幻灯片/轮播。 安装npm install vueperslides-保存演示和文档...
  • 与Three.js和GSAP一起使用的Vue.js 2.0幻灯片组件。 演示通过将isInt vue-displacement-slideshow Webgl图像位移转换设置得很简单,画布也可以是交互式的。 与Three.js和GSAP一起使用的Vue.js 2.0幻灯片组件。 演示...
  • vuejs 幻灯片组件发开

    千次阅读 2017-10-30 18:59:52
    实现一个幻灯片组件  回顾一下在vue里面组件之间的交互,父组件向子组件传递信息,通过的是子组件的属性props;子组件想要通知父组件一些事件,是通过自定义事件来实现的。那么想一下,幻灯件作为子组件,需要怎样...
  • Vue-8-puzzle一个由Vue.js组件制作的小巧幻灯片益智游戏播放演示源的图像/视频自动调整大小的安装和使用$ npm install v Vue-8-puzzle一个由Vue制作的小巧幻灯片益智游戏.js组件播放演示源的图像/视频自动调整大小...
  • vue-piece-slider(Demo)该库是Luis Manuel的一篇很棒的Codrops文章的简化Vue门户(原始资料)。 在此版本中,仅是vue-piece-slider(Demo)。该库是Luis Manuel撰写的精彩Codrops文章的简化Vue门户(原始资料)。 ...
  • vue简单的图片相册幻灯片实例 【原创】基于Vue.js构建的响应式的图片幻灯片,图片相册,大图切换展示代码。动态设置图片url路径,来实现简单的图片切换效果。 演示地址 下载地址

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,993
精华内容 797
关键字:

vue幻灯片

友情链接: bankou.zip