Renderless Carousel Components For Vue.js

Install & Download:

# NPM
$ npm i vue-renderless-carousel

Description:

A carousel library for Vue.js that provides a set of renderless carousel components for easier carousel slider creation.

Features:

• Responsive and mobile-friendly.
• Supports both vertical and horizontal directions.
• Arrow & numerical navigation.
• Supports dynamic slides.

How to use it:

1. Import the carousel components.

import { RlCarousel, RlCarouselSlide } from ‘vue-renderless-carousel’;

2. Add the Carousel component to your template.

<rl-carousel
  v-model="slide"
  @swipe-recognized="clearInterval"
>
  <div slot-scope="{ wrapperStyles, slides: { count, active } }">
    <div class="overflow-hidden text-center">
      <div v-bind="wrapperStyles">
        <slot></slot>
      </div>
    </div>
    <div class="mt-4 text-center">
      <span
        v-for="(item, index) in count"
        :key="index"
        class="mx-1 cursor-pointer"
        @click="slide = index; clearInterval()"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="30"
          height="20"
          class="stroke-current"
          :class="{
            'text-grey': active !== index,
            'text-grey-dark': active === index
          }"
        >
          <line x1="0" y1="10" x2="30" y2="10" stroke-width="2" />
        </svg>
      </span>
    </div>
  </div>
</rl-carousel>

3. Register the component.

export default {
  name: 'my-carousel',
  components: {
    RlCarousel
  },
  data () {
    return {
      slide: 0,
      interval: undefined
    }
  },
  methods: {
    clearInterval () {
      clearInterval(this.interval)
    }
  },
  created () {
    this.interval = setInterval(() => { this.slide += 1 }, 2000)
  }
}

4. In your app.vue

<my-carousel>
  <rl-carousel-slide>
    <div
      class="border border-blue p-8 mx-8 text-center text-3xl"
      style="width: 20vw;"
    >
      One
    </div>
  </rl-carousel-slide>
  <rl-carousel-slide>
    <div
      class="border border-red p-8 mx-8 text-center text-3xl"
      style="width: 40vw;"
    >
      Two
    </div>
  </rl-carousel-slide>
  <rl-carousel-slide>
    <div
      class="border border-green p-8 mx-8 text-center text-3xl"
      style="width: 80vw;"
    >
      Three
    </div>
  </rl-carousel-slide>
</my-carousel>

5. Available carousel props

align: {
  type: String,
  default: "center",
  validator: (value) => value.match(/^(left|center|right)$/) !== null,
},
animateIn: {
  type: Boolean,
  default: false,
},
noWrap: {
  type: Boolean,
  default: false,
},
static: {
  type: Boolean,
  default: false,
},
touchWrap: {
  type: Boolean,
  default: false,
},
transition: {
  type: String,
  default: "ease",
  validator: (value) =>
    value.match(/^(ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier\(.*\))$/) !== null,
},
transitionTime: {
  type: [Number, String],
  default: 0.5,
},
value: {
  type: Number,
  required: true,
},
vertical: {
  type: Boolean,
  default: false,
},

Preview: