theme: channing-cyan

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

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

1. If the official swiper package is introduced, will it be too big, is it necessary?

2. 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

1. 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

####methos event Type|Name|Introduction -|-|- ref event|refDom.prev()|Switch to the previous page /|refDom.next()|Switch to the next page /|refDom.slideTo(i)|Switch to the specified subscript (i) page emit event|@loadEnd|feedback function after the first rendering is completed /|@transitionend(i)|Feedback function after switching pages, i is the current subscript

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:

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

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

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

<swiper fast></swiper>

At this point, you can achieve fast sliding and enjoy silky smoothness

That's all for this issue, thank you all.

grateful

Thanks to all swiper open source developers Special thanks to linfeng [https://github.com/helicopters?tab=repositories]

author

Email: [email protected]

WeChat: ywr_98