R-swiper2 NPM | npm.io

theme: channing-cyan

r-swiper2 vue2 version contains forbidden sliding block and fast continuous mode, which perfectly solves the mobile/PC carousel needs

npm peer dependency version

r-swiper2 This is a vue2 version of the carousel plug-in, which is perfectly adapted to both mobile and PC

r-swiper vue3version has been launched on 2023/08/13

Some friends may ask, it is already 2023, and there are countless carousel components on the market, who would be stupid enough to build carousel wheels?

Ah this. . .

Doesn't it mean that existence is reasonable?

The reason? There are two main points

If the official swiper package is introduced, will it be too big, is it necessary?
There are other small-sized vue3 open source components, which can be adapted to most scenarios, and have encountered special needs many times, but have no choice but to change the source code many times

But Please: Don't Repeat Yourself!

That being the case, then I will package a powerful and beautifully animated carousel component, which can perfectly adapt to most of the normal business needs (if my component can’t meet your needs, in the spirit of patience, the more you think about it for a while Gas, take a step back from the principle that the more you think, the more you lose, I advise you to find a product alignment immediately... Ah no, contact me immediately, and I will see if I can optimize it).

This plugin contains the forbidden slider mode (noMove attribute), which can realize the blocking sliding effect inside the swiper carousel Silky mode (fast attribute), when switching continuously, there is no mandatory limit on the animation time, the switching speed only depends on your hand speed, Dove ~ enjoy silky smoothness Can be nested, all bugs encountered so far have been changed

The first time I wrote carousel was 17 years ago. I used jQuery, and the code can no longer be found. This time I browsed a lot of swiper open source codes, organized them comprehensively, and made some optimizations. If you feel that it is not smooth or have suggestions for modifying this plugin, please Contact me in time (the contact information is at the bottom), and finally hope you like it!

Install dependencies

Open the project root directory and execute the command

// if using npm
npm i r-swiper2

// if using yarn
yarn add r-swiper2

Import dependencies

Import according to your own needs after installing dependencies

Global import

import Swiper from 'r-swiper2'
//...
Vue. use(Swiper)

local import

import {rSwiper, rSlide} from 'r-swiper2'

export default {
  components: {
    'r-swiper': rSwiper,
    'r-slide': rSlide
  }
}

Component explanation

Name	Introduction
rSwiper	External components, all kinds of event animations are completed in this
rSlide	Internal components, wrapping the content of each carousel page

props parameters (all named with small camel case)

name	default	type	description
fast	false	Boolean	Whether it is fast sliding, enjoying the silky mode
autoPlay	false	Boolean	Whether to automatically play in carousel
playTime	5000	Number,Sting	Autoplay switching time
speed	500	Number, String	animation transition time after switching pages
therehold	100	Number	How many distances to slide to trigger the page cut function
slide	0	Number	initial default subscript
indicator	true	Boolean	Indicator display? Bottom centered blinking dot/bar
indicatorFlash	true	Boolean	indicator flashing animation
noMove	cs	String	non-sliding mode className (emphasis will be given later)
mobile	false	Boolean	Whether it is a mobile terminal (the mobile terminal will hide the left and right page cut buttons)
vLock	false	Boolean	Whether to scroll vertically

Code Examples

<template>
<div class="home-style">
   <r-swiper class="swiper" ref="swiper" @loadEnd="funLoadEnd" @transitionend=funTransitionend>
     <r-slide>
       <img src="../3.png" alt="">
     </r-slide>
     <r-slide>
       <img src="../3.png" alt="">
     </r-slide>
     <r-slide>
       <img src="../3.png" alt="">
     </r-slide>
   </r-swiper>
</div>
</template>

<script>
import { rSwiper, rSlide } from 'r-swiper2'

export default {
   data() {
     return {
       nowIndex: 0 // current index
     }
   },

   components: {
     'r-swiper': rSwiper, // Carousel external components
     'r-slide': rSlide // carousel internal components
   },

   computed: {
     // current swipe DOM
     swiperRef() {
       return this.$refs.swiper
     }
   },

   methods: {
     /**
     * Feedback function for initialization loading completion 2023-07-31 10:53:04 Ywr
     */
     funLoadEnd() {
       console.log('Initialization loading complete')
     },
     /**
     * Switch page completion feedback function 2023-07-31 10:53:04 Ywr
     * @param {Number} i current subscript
     */
     funTransitionend(i) {
       this.nowIndex = i
       console.log('current index', this.nowIndex)
     },

     /**
     * Switch page function 2023-07-31 19:06:56 Ywr
     * @param {Number} i subscript
     * @param {Boolean} st current subscript
     */
     changePage(i, st = false) {
       // If jumping to a page
       if (st) {
         this.swiperRef.slideTo(i)
       }
       else {
         i < 0 ? (this.swiperRef.prev()) : (this.swiperRef.next())
       }
     }
   }
}
</script>

<style scope lang="scss">
.home-style {
   width: 100vw;
   height: 100vh;
   img {
     height: 100%;
   }
}
</style>

Renderings

pc side

mobile terminal

Kind tips

By default, the bottom indicator, pc end: two left and right switching buttons will be displayed, and both the indicator and the button have the effect of clicking the page

It can be hidden according to the value of props

Named slots: If you feel that the style of the left and right buttons and the indicator is not beautiful or you want to write new content, you can use the following slots

   <!-- left and right button switch page up and down -->
   <slot name="leftBtn">
   <slot name="rightBtn">

   <!-- indicator -->
   <slot name="indicator"></slot>

   <!-- other slots -->
   <slot name="all"></slot>

noMove explained

Why is there a noMove attribute default: cs?

If I want to nest two carousels, the parent carousel will not be affected when the child carousel is switched. At this time, the child carousel must not trigger the parent carousel to slide when sliding

pc side:

Slide the top blue hello world! area, the overall parent swiper page will be switched, the effect is as follows

Swipe the earth picture, only switch the internal sub-swiper

WeChat picture_20230731114908.png

We only need to add the className attribute "cs" to the inner element

  <img class="cs" src="../2.png" alt="">

Note that if you feel that cs does not meet the requirements, you can choose to change the props attribute

<r-swiper :noMove="yourClassName"></r-swiper>

<img class="yourClassName" src="../2.png" alt="">

Complete code example

<template>
<div class="home-style">
   <r-swiper class="swiper" :autoPlay="false" ref="swiper" @loadEnd="funLoadEnd" @transitionend=funTransitionend :mobile="true">
     <r-slide>
       <div class="first-cont">
         <div class="can">hello world!</div>
         <!-- Note here that the noMove attribute of the child swiper must not be cs [the noMove attribute in the parent swiper, otherwise its own swipe events will also be blocked] -->
         <r-swiper class="child" noMove="nononononono" :mobile="true" :autoplay="false">
           <r-slide>
             <img class="cs" src="../2.png" alt="">
           </r-slide>
           <r-slide>
             <img class="cs" src="../2.png" alt="">
           </r-slide>
           <r-slide>
             <img class="cs" src="../2.png" alt="">
           </r-slide>
         </r-swiper>
       </div>
      </r-slide>
      <r-slide>
        <img src="../1.png" alt="">
      </r-slide>
      <r-slide>
       <img src="../1.png" alt="">
      </r-slide>
    </r-swiper>
</div>
</template>

<script>
import { rSwiper, rSlide } from 'r-swiper2'

export default {
   data() {
     return {
       nowIndex: 0 // current index
     }
   },

   components: {
     'r-swiper': rSwiper, // external component
     'r-slide': rSlide // internal components
   },

   computed: {
     swiperRef() {
       return this.$refs.swiper
     }
   },

   methods: {
     /**
     * Initial loading completed 2023-07-31 10:53:04 Ywr
     */
     funLoadEnd() {
       console.log('Initialization loading complete')
     },

     /**
     * Initial loading completed 2023-07-31 10:53:04 Ywr
     * @param {Number} i current subscript
     */
     funTransitionend(i) {
       this.nowIndex = i
       console.log('current index', this.nowIndex)
     },

     /**
     * Switch page function 2023-07-31 19:06:56 Ywr
     * @param {i} subscript
     * @param {Boolean} st current subscript
     */
     changePage(i, st = false) {
       // If jumping to a page
       if (st) {
         this.swiperRef.slideTo(i)
       }
       else {
         i < 0 ? (this.swiperRef.prev()) : (this.swiperRef.next())
       }
     }
   }
}
</script>

<style scope lang="scss">

.home-style {
   width: 100vw;
   height: 100vh;

   .first-cont {
     display: flex;
     flex-direction: column;
     overflow: hidden;
     width: 100%;
     height: 100vh;
     .can {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 10vh;
       background: skyblue;
     }
     .child {
       flex: 1;
     }
   }
   img {
     width: 100vw;
     height: 100vh;
   }
}

</style>

Mobile terminal: JD.com/Taobao/Pinduoduo/Dewu

Swipe the red box part of the left picture, and the overall swiper will switch

Slide the red box part of the right picture, the overall swiper will not switch, but the internal swiper-banner will switch

Or, some internal areas (list below) need to complete their own scrolling effect

<template>
<div class="home-style">
   <r-swiper class="swiper" :autoPlay="false" :identifier="false" ref="swiper" @loadEnd="funLoadEnd" @transitionend="funTransitionend " :mobile="true">
     <r-slide>
       <div class="first-cont">
         <img src="../1.png" alt="">
         <!-- Add noMove attribute cs here -->
         <div class="box cs">
            <div class="can cs">
              <div class="cs" v-for="i in 100">{{i}}</div>
            </div>
         </div>
       </div>
     </r-slide>
     <r-slide>
       <img src="../1.png" alt="">
     </r-slide>
     <r-slide>
       <img src="../1.png" alt="">
     </r-slide>
   </r-swiper>
</div>
</template>

<script>
import { rSwiper, rSlide } from 'r-swiper2'

export default {
   data() {
     return {
       nowIndex: 0 // current index
     }
   },

   components: {
     'r-swiper': rSwiper, // external component
     'r-slide': rSlide // internal components
   },

   computed: {
     swiperRef() {
       return this.$refs.swiper
     }
   },

   methods: {
     /**
     * Initial loading completed 2023-07-31 10:53:04 Ywr
     */
     funLoadEnd() {
       console.log('Initialization loading complete')
     },
     /**
     * Initial loading completed 2023-07-31 10:53:04 Ywr
     * @param {Number} i current subscript
     */
     funTransitionend(i) {
       this.nowIndex = i
       console.log('current index', this.nowIndex)
     },

     /**
     * Switch page function 2023-07-31 19:06:56 Ywr
     * @param {i} subscript
     * @param {Boolean} st current subscript
     */
     changePage(i, st = false) {
       // If jumping to a page
       if (st) {
         this.swiperRef.slideTo(i)
       }
       else {
         i < 0 ? (this.swiperRef.prev()) : (this.swiperRef.next())
       }
     }
   }
}
</script>

<style scope lang="scss">

.home-style {
   width: 100vw;
   height: 100vh;

  .first-cont {
     display: flex;
     flex-direction: column;
     overflow: hidden;
     width: 100%;
     height: 100vh;

     .box {
       width: 100%;
       height: 20vh;
       overflow-x: scroll;
       .can {
         display: flex;
         justify-content: flex-start;
         align-items: center;
         height: 20vh;

         div {
           background: skyblue;
           border: 1px solid #fff;
           width: 100px;
           padding: 80px;
           margin: 10px;
         }
       }
     }

     img {
       height: 80vh;
     }

     .child {
       flex: 1;
     }
   }
   img {
     width: 100vw;
     height: 100vh;
   }
}

</style>

The above situations can be solved by using the current swiper.

fast silky mode

You can try the swiper official website and the carousel pages of JD.com, Taobao, and Dewu. When you swipe quickly, you will feel disconnected Because inside the carousel component, there will be a protection mechanism for a time period. During this time period, you need to wait for the dynamic effect of the carousel event to complete. At this time, if you force the slide, there will be an exception The fast mode of this plug-in can perfectly avoid this Just set the swiper's fast to start the silky mode immediately