Vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage

Related tags

Scroll vue-slidePage
Overview

vue-slidePage

Introduction

vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage

Demo

Usage

Install

$ npm i -S vue-slidepage

Work on a Vue instance:

{{item.name}}

">
<slide-container>
  <slide-page v-for="(item, index) in list">
    <h2>{{item.name}}h2>
  slide-page>
slide-container>
import { SlideContainer, SlidePage } from 'vue-slidePage'

new Vue( {
  el: 'body',
  data () {
    return {
      list: [
        {name: 'Page1'},
        {name: 'Page2'},
        {name: 'Page3'},
      ],
    }
  },
  components: {
    SlideContainer,
    SlidePage
  }
} )

Props

SlideContainer:

name type default description
useAnimation Boolean true 是否开启动画
refresh Boolean true 每次滚动进入是否重新执行动画
useWheel Boolean true 是否开启鼠标滚轮滑动
useSwipe Boolean true 是否开启移动端触控滑动

Events

SlideContainer:

name description $event
before 每次��全屏滚动前触发事件,�回调三个参数(origin, direction, target),分别是滚动前的page序号、方向('next'/'prev')、滚动后的page序号 $event.before
after 次��全屏滚动后触发事件,�回调三个参数(origin, direction, target),参数释义同上 $event.after

Slots

SlidePage:

name description
default Page's content

usage:

">
<slide-container>
  <slide-page>
    <img src="">
    <p>p>
    <button>button>
  slide-page>
slide-container>

License

MIT

You might also like...
:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

vue-seamless-scroll A simple, Seamless scrolling for Vue.js Features Initial configuration support Compatible with multiple platforms Multi-technology

A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Vue plugin to disable scrolling page

Vue plugin to disable scrolling page

A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

A simple, Seamless scrolling for Vue.js

A simple, Seamless scrolling for Vue.js

Lightweight Vue plugin for smooth-scrolling.
Lightweight Vue plugin for smooth-scrolling.

Vue Smooth Scroll Lightweight Vue plugin for smooth-scrolling. For simple use-cases, the native scroll-behavior CSS property (working draft) may be en

A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Comments
  • Example Scroll not work

    Example Scroll not work

    I have a list in v-for:

              <li  v-for="image in images" :key="image" class="col-sm-4 wrapper-actuation step animated zoomIn">
                <figure>
                  <img class="img-fluid" :src="image.img" :alt="image.alt">
                </figure>
                <h4 class="text-center red w-1">{{ image.text }}</h4>
              </li>
            </ul>
    

    But example Scroll not work....my images are cliped on responsive mode!

    Heeelp!

    bug 
    opened by ddiegommachado 19
Owner
null
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Open Source Afghanistan 15 Jun 14, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

vue-pinch-scroll-zoom Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices example: h

CoddiCat 24 Sep 9, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
A simple web component (Vue.js >= 3.2) that provides infinite scrolling to display a large array of data one element at a time

infinite-scroller-comp infinite-scroller-comp is a Vue.js (>=3.2) web component that provides a content area and an associated vertical scroll bar. Th

null 0 May 10, 2022
Vue Scroll Detect - Detect component visibility change on scrolling

Vue Scroll Detect Detect component visibility change on scrolling. Installation yarn add vue-scroll-detect Example See examples/ at Code Sandbox Usage

Dzul Nizam 1 Jun 5, 2022
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Feb 13, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

xlaoyu 119 Aug 22, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022