No one knows how hard it is to open water

With friends for the first time open source a round of plug-in, I hope you actively taste

introduce

Based on the VUE3 composition API written round plug-in, a variety of attribute adaptation, round content can be fully customized, can basically meet most of the needs of the round.

Basic functions:

  • Whether to enable automatic rotoasting and customize the rotoasting time
  • When the mouse pointer is moved in, the round play is paused. When the mouse pointer is moved out, the round play is reset
  • Click the left/right toggle button to switch manually
  • Click on the bottom of the rotation indicator to switch manually
  • Hover display can be set by toggle button and rowhead indicator
  • Switch left scroll left, switch right scroll right
  • .

Online Demo: Working on…

The installation

npm install v3-carousel
Copy the code

or

yarn add v3-carousel
Copy the code

use

main.js

import { createApp } from "vue";
import App from "./App.vue";
import Carousel from "v3-carousel"; / / introduction

const app = createApp(App)
app.use(Carousel).mount('#app') / / use
Copy the code

Note: Wrap the carouselitems you want to display (creating the carouselitems will have to be done using the V-for loop for now, because I need to use IDX to do it), and then wrap the carouselitems in a large Carousel. Add the properties you need to the Carousel, and there you go, an instance is done, and you can go to the web page and look at the Carousel diagram

App.vue

<template>
  <div class="app">
    <Carousel
      :autoplay="true"
      :duration="2000"
      :initIndex="2"
      :direction="true"
      directionMode="hover"
      :directionSize="20"
      directionColor="skyblue"
      :indicator="true"
      indicatorMode="always"
      indicatorColor="white"
      indicatorActiveColor="skyblue"
      @before-moving="beforeMoving"
      @after-moving="afterMoving"
    >
      <CarouselItem v-for="(item, index) in data" :key="index" :idx="index">
        <img :src="item" />
      </CarouselItem>
    </Carousel>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "App".setup() {
    const state = reactive({
      data: [
        "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00693-2745.jpg"."Https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2190440116, & FM = 26 & gp = 0. 1436403087 JPG"."Https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593656793, & FM = 26 & gp = 0. 3600757928 JPG",]});function beforeMoving(dire) {
      console.log("before", dire);
    },
    function afterMoving(obj) {
      console.log("after", obj);
    },

    return{... toRefs(state), beforeMoving, afterMoving, }; }});</script>
Copy the code

parameter

Carousel component options (Props)

property name type default value meaning
containerWidth String 100% Set the width of the entire Carousel container, but you can also use vw, REM, em, etc
containerHeight String 100% Set the g height of the entire Carousel container, ibid
duration Number 3000 How often is the rotation interval
initIndex Number 0 Initializes the index of the displayed picture
autoplay Boolean true Whether to automatically start the round play
direction Boolean true Do you need toggle buttons (i.e. up and down buttons)?
directionMode String always Toggle button display mode, always, hover optional
directionColor String white Toggle the color of the button
directionSize Number 25 Size of the toggle button (px)
indicator Boolean true Whether a rotograph indicator is required (currently selected at the bottom)
indicatorMode String always Toggle button display mode, always, hover optional
indicatorColor String #FFFFFF80 Indicator color when unchecked
indicatorActiveColor String #FFFFFF Indicator color when selected

Carousel Event

event Name parmas meaning
@before-moving The hook function takes an object argument that you can get: the direction of the round (direction) and the index of the current round (index) The hook function that is executed before the view is moved. You can use this hook if you want to do some logic before the rowhead diagram
@after-moving Same as above… The hook function that is executed after the view has been moved. You can use this hook if you want to do some logic after the rosette diagram has been rosette

CarouselItem component option (Props)

property name type default value meaning
idx Number 0 Index for each subinstancev-forThe second parameter in the

contact

If there is any problem, please come to discuss it. If you think it is easy to use, just click star, o(￣▽￣)o

Any suggestions are welcome to submit pr, thank you!

Repo attributable

  • WeChat: x972761675
  • Front-end QQ group: 700785102

Current maintainer: Chun Chun classmate

  • WeChat: lcc961150665
  • Personal blog
  • Github
  • The Denver nuggets
  • Language finches
  • Jane’s book
  • Open source in China
  • Blog garden

A link to the

  • npm package
  • github repo

No Bug ~ wish you