HomeDemoLayouts

Carousel Layouts

To make carousel more flexible, I created layout system. You need to pass layout prop to define how the carousel should look like. And optionally you can pass layout-props prop to pass some props to the specific layout.

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

Put the layout component in the layout prop. You can also pass layout props there:

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

Pre-defined layouts

ExampleLayoutDefault

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/ExampleLayoutDefault.css'

GSArrow.css is unnecessary if disableArrows=true

Appearrance:

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

Props:

  • disableArrows
    • Type: Boolean
    • Default: false
    • Details:
      Disabled arrows on both sides of the carousel.

GSLayoutNumeric

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'

GSArrow.css is unnecessary if disableArrows=true

Appearrance:

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

Props:

  • disableArrows
    • Type: Boolean
    • Default: false
    • Details:
      Disable arrows on bootom of the carousel.
  • disableCounter
    • Type: Boolean
    • Default: false
    • Details:
      Disables counter on bootom of the carousel.
  • percentCounter
    • Type: Boolean
    • Default: false
    • Details:
      Show counter number depends how much percent of the carousel is scrolled. Helpful when you have many slides.

Custom layout

How pre-defined layouts are made you can see here

Our layouts can accept few props and slots from the GSCarousel.

Props:

  • onMove - method to move the carousel. pass 1 or -1 to move the carousel.
  • disabledSide - 'left' | 'right' | 'none' - disabled side of the carousel.
  • currentItem
  • currentItemByPercent
  • items
  • initialized

Slots:

  • track - div with carousel items
  • indicator - scroll indicator
<!-- ... --><slot name="track" /><div>  <slot name="indicator" /></div><!-- ... -->

Let's create our own layout:

Hello Custom Layout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<
>

Custom layout code

CustomLayout.vue

<script lang="ts">import type { PropType } from 'vue'import { defineComponent } from 'vue'export default defineComponent({  name: 'CustomLayout',  props: {    onMove: {      type: Function as PropType<(to: number) => void>,      required: true,    },    disabledSide: {      type: String as PropType<'left' | 'right' | 'none'>,      required: true,    },    currentItem: {      type: Number,      required: true,    },    items: {      type: Array as PropType<any[]>,      required: true,    },    /**     * layout specific props     */    title: {      type: String,      required: true,    },  },})</script><template>  <div>    <div class="custom-layout-header">      <div class="custom-layout-header__title">        {{ title }}      </div>      <div class="custom-layout-header__indicator">        <slot name="indicator" />      </div>    </div>    <slot name="track" />    <div class="custom-layout-arrows">      <div @click="onMove(-1)">        {{ '<' }}      </div>      <div @click="onMove(1)">        {{ '>' }}      </div>    </div>  </div></template><style lang="scss" scoped>.custom-layout-header {  display: flex;  align-items: center;  gap: 20px;  &__title {    font-size: 1.5rem;    font-weight: 500;    line-height: 1.5;  }  &__indicator {    flex: 1;  }}.custom-layout-arrows {  display: flex;  div {    background: #6366f1;    margin: 5px;    padding: 10px;  }}</style>

Custom layout usage:

<template>  <GSCarousel    :items="items"    :items-to-show="2"    :layout="CustomLayout"    :layout-props="{      title: 'Hello Custom Layout',    }"  >    <template #item="{ data }">      <!-- ... -->    </template>  </GSCarousel></template>