Gitart Vue Carousel

Vue 3 Carousel Component

~9 KiB - index.cjs gitart-scroll-carousel

~3.5 KiB - style.css gitart-scroll-carousel/dist/style.css

Getting started

Installation

npm install gitart-scroll-carousel

Basic Using

<script>
import 'gitart-vue-dialog/dist/style.css'
import { GCarousel } from 'gitart-scroll-carousel';

export default {
  components: {
    GCarousel,
  },
  data: () => ({
    items: [0,1,2,3,4]
  })
};
</script>

<template>
  <GSCarousel
    :items="items"
    item-gap="16"
    :items-to-show="2"
  >
    <template #item="{ data }">
      <div class="slide">
        {{ data }}
      </div>
    </template>
  </GSCarousel>
</template>

<style scoped>
.slide {
  box-shadow: 0 6px 15px -3px rgb(0 0 0/0.3);
  padding: 25px;
  border-radius: 5px;
}
</style>

Result:

Docs

Theming

CSS variables

You can partially change appearance of the carousel by using css variables.
Here is a list:

--gsc-custom-arrow-bg - background color of the arrow

--gsc-custom-arrow-bg-hover - background color of the arrow when hovered

--gsc-custom-arrow-color - color of the arrow

--gsc-custom-indicator-bar-color - color of the bar below the carousel

--gsc-custom-indicator-track-color - color of the track for bar

Classes

Overwrite styling by yourself. Just use some classes below.
The package uses BEM. There is almost no inheritance.

Arrow:

.gsc-arrow, .gsc-arrow--side-right, .gsc-arrow--side-left

Indicator:

.gsc-indicator, .gsc-indicator--scrolling

.gsc-indicator__track

.gsc-indicator__bar

Props

  • items

    • Type: Array

    • Required

    • Details:

      An array of slider items. Each array element will be
      passed to the #item slot.

  • itemsToShow

    • Type: Number

    • Required

    • Details:

      The number of items to show.

  • keyField

  • Type: String

  • Default: null

  • Details:

    The field name of the item to use as a key. Using index if field is
    not specified.

  • itemGap

    • Type: Number | String

    • Default: 0

    • Details:

      The gap between each item.

      Value '12' means 'padding: 6px;' for each item.

      Value '12 20' means 'padding: 6px 10px;' for each item.

  • previewSize

    • Type: Number

    • Default: 120

    • Details:

      The visible part of the next item in the carousel.

  • showArrows

    • Type: Boolean

    • Default: true

    • Details:

      Determines whether arrows should be visible

  • showArrows

    • Type: Boolean

    • Default: true

    • Details:

      Determines whether arrows should be visible

  • arrowsTransition

    • Type: String

    • Default: 'gsc-arrow-transition'

    • Details:

      Transition name for disappearing arrows

  • ssrSlideMinWidth

    • Type: Number, String

    • Default: null

    • Details:

      Slide min-width on app startup when HTML is displayed,
      but js is not loaded yet.
      It corrects the slide width in SSR mode.

  • ssrSlideMaxWidth

    • Type: Number, String

    • Default: null

    • Details:

      Slide max-width on app startup when HTML is displayed,
      but js is not loaded yet.
      It corrects the slide width in SSR mode.

Slots

Name Description
item slot for each carousel item
arrow slot specify custom arrows
  • item

    • Scoped Data:

      {
  data: Object
  index: Number
}

    • Details:

      The slot is for each item of your carousel.

      data - current carousel item from items props

      index - index of the current carousel item.

      <GSCarousel :items="[1, 2, 3]" items-to-show="2">
  <template #item="{ data, index }">
    {{ data }} | {{ index }}
  </template>
</GSCarousel>
  • arrow

    • Scoped Data:

      {
  side: String ('left' | 'right')
  active: Boolean
  move: Function ((move: number) => void)
}

    • Details:

      Don't like default arrow? You can use this slot to specify custom arrow.

      side - 'left' or 'right'. specifies the arrow side.
      set a specific style for each side using this scope data.

      active - true if the arrow is clickable.

      move - function to move the carousel.

      <GSCarousel :items="[1, 2, 3]" items-to-show="2">
  <!-- ... -->

  <template #arrow="{ side, move, active }">
    <!-- optional transition if you want hide inactive arrow -->
    <Transition name="some-transition">
      <div
        v-if="active"
        :class="`arrow arrow-${side}`"
        @click="move"
      >
        <span>
          {{ side === 'left' ? '<' : '>' }}
        </span>
      </div>
    </transition>
  </template>
</GDialog>

GitHub

View Github