Giter VIP home page Giter VIP logo

vue-split-carousel's Introduction

中文文档

Vue Split Carousel

GitHub

A carousel component for vue,meanwhile display several carousel item.

show

2.x version for vue 3

1.x version for vue 2

1.x version doc

Browser Compatibility

Modern browser, follow vue 3 compatibility.

Component Structure

Use <split-carousel-item> in <split-carousel>,put your custom content in split-carousel-item.

<split-carousel>
  <split-carousel-item>
    custom content
  </split-carousel-item>
  <split-carousel-item>
    custom content2
  </split-carousel-item>
</split-carousel>

Install

# use npm
npm i vue-split-carousel
# use yarn
yarn add vue-split-carousel

support prefix option prevent name conflict while install component with app.use

Local Component

<template>
  <div id="app">
    <split-carousel>
      <split-carousel-item v-for="item in 8" :key="item">
        {{ item }}
      </split-carousel-item>
    </split-carousel>
  </div>
</template>

<script>
  import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel";
  export default {
    components: {
      SplitCarousel,
      SplitCarouselItem
    }
  };
</script>

Global Component

import Vue from "vue";
import App from "./App.vue";
import SplitCarousel from "vue-split-carousel";

const app = createApp(App);
app.use(SplitCarousel);

//accpect prefix for component name conflict, use as `<ElSplitCarousel>` and `<ElSplitCarouselItem>`
//app.use(SplitCarousel,{prefix:'El'});

app.mount("#app");

import by <script>

can use vue-split-carousel.min.umd.js in the dist folder.

<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="./vue-split-carousel.umd.min.js"></script>
<script>
  const app = Vue.createApp({
    template:`
      <split-carousel>
        <split-carousel-item v-for="i in 8">{{i}}</split-carousel-item>
      </split-carousel>
    `
  })
  app.use(window['vue-split-carousel'])
  app.mount('#app')
</script>

Props

Attribute Description Type Accpected Values Default
speed transition duration of carousel item, in milliseconds Number - 500
autoplay whether automatically switch carousel items Boolean - true
interval interval of switch carousel items, in milliseconds Number - 3000
loop whether display carousel items in loop Boolean - true
display-amount the amount of carousel items display in carousel container Number - 4
item-width the width of carousel items Number - 120
height height of carousel, if the prop value type is number,the unit is px by default. you can pass string value to use other unit, eg: 40vh Number/String - 80
timing-function the animation effect of carousel item,reference transition-timing-function String - ease
pause-on-hover whether pause autoplay while mouse hover Boolean - true
arrow-visible whether arrow visiable, avaliable when loop set to false String default/always default

Slots

Name Descrition
left customize left arrow
right customize right arrow

License

MIT

vue-split-carousel's People

Contributors

renovate-bot avatar renovate[bot] avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.