HomeDemoLayouts

Gitart Scroll Carousel

Scrollable, lightweight and customizable carousel component for Vue apps. 
npm i gitart-scroll-carousel
yarn add gitart-scroll-carousel

Features

  • Native scroll support
  • Drag the scroll indicator to scroll
  • Customize the carousel with CSS variables
  • Customize the carousel with layouts

Setup

0
1
2
3
4

For better performance and optimization, we have several different CSS files that can be imported on demand. For base usage, you can import the following CSS files from dist:

// required styles for carousel and bottom scroll indicatorimport 'gitart-scroll-carousel/dist/index.css'// arrows styles if you want use default arrows..import 'gitart-scroll-carousel/dist/GSArrow.css'// styles of the layout you want to use. // read more in the layouts section.import 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'

If your project supports typescript and scss, remove /bundled from the import statement. css imports is not needed, you will use not bundled components.

import {  GSCarousel,  GSLayoutDefault,} from 'gitart-scroll-carousel'

v1.2.0+

<script>import { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'import 'gitart-scroll-carousel/dist/index.css'import 'gitart-scroll-carousel/dist/GSArrow.css'import 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'export default defineComponent({  components: {    GSCarousel,  },  setup() {    return {      items: [0, 1, 2, 3, 4],      GSLayoutDefault,    }  },})</script><template>  <GSCarousel    :items="items"    item-gap="16"    :items-to-show="2"    :layout="GSLayoutDefault"    :layout-props="{      disableArrows: true,    }"  >    <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;  background: rgb(202, 202, 202);  color: #000;}</style>

One more example

With GSLayoutNumeric layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1 / 15

Theming

Layouts

Detailed description of the layouts can be found in the layouts page.

Each carousel component should have a lyout. It's made to be easy to customize the carousel. Or even write you own layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Put the layout component in the layout prop. Layout specific props you can put into layout-props (learn more about them in the layouts page).

<template>  <GSCarousel    :layout="GSLayoutDefault"    :layout-props="{      disableArrows: true,    }"  >  <!-- ... -->  </GSCarousel></template>

Layouts Details

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

  • currentItem
    • Type: Number
    • Details:
      Where the carousel is currently at. There is update:current-item event that is emitted when the current item changes.
      v1.2.0+
  • 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.
  • sticky
    • Type: Number
    • Default: 120
    • Details:
      After scrolling not by arrow, the carousel will stick to the current item. Try out in the demo (select sticky checkbox and scroll the carousel).
  • ssrItemMinWidth
    • Type: Number, String
    • Default: null
    • Details:
      Carousel item min-width on app startup when HTML is displayed, but js is not loaded yet. It corrects the item width in SSR mode.
  • ssrItemMaxWidth
    • Type: Number, String
    • Default: null
    • Details:
      Carousel item max-width on app startup when HTML is displayed, but js is not loaded yet. It corrects the item width in SSR mode.

Slots

More control over the carousel you can find in the layouts page.

NameDescription
itemslot for each carousel item
  • item
    • Scoped Data:
      {  data: any // any data from the items array  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>