nb-slide-div-fixed-size

This is a slide component for Vue.js 3+.

Look at the console to see the triggered event

Installation

Yarn
yarn add @vlalg-nimbus/nb-slides
NPM
npm install @vlalg-nimbus/nb-slides

Usage

Vue 3
import { createApp } from 'vue'
import App from './App.vue'

import NbSlidesComponents from '@vlalg-nimbus/nb-slides'
import "@vlalg-nimbus/nb-slides/dist/style.css";

const app = createApp(App)
app.use(NbSlidesComponents)
app.mount('#app')
Nuxt 3
import NbSlidesComponents from '@vlalg-nimbus/nb-slides'
import "@vlalg-nimbus/nb-slides/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbSlidesComponents)
})

To use, simply call the component, in this case it will be NbSlideDivFixedSize or nb-slide-div-fixed-size.

Mode 1
<template>
  <NbSlideDivFixedSize />
</template>
Mode 2
<template>
  <nb-slide-div-fixed-size />
</template>
Mode 3
<template>
  <nb-slide-div-fixed-size></nb-slide-div-fixed-size>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
displayString'b'Defines the display type. Accepts ib and b.
disabledBooleanfalseDefines if the slide is disabled
borderRadiusNumber0.375Defines border-radius.
slideTypeString'transform'Defines the slide type. Accepts transform and z-index.
slideWidthNumber200Defines slide width.
slideHeightNumber200Defines slide height.
slideIntervalNumber5000Defines the slider speed.
showButtonsBooleantrueDefines whether the buttons are shown.
buttonsSizeNumber10Defines slide buttons size.
buttonMarginTopNumber10Defines slide buttons margin top.
buttonMarginBottomNumber10Defines slide buttons margin bottom.
buttonsColorString'tomato'Defines the buttons color. Accepts Color name and Hex
buttonsColorHoverString'blue'Defines the buttons color on hover and active. Accepts Color name and Hex
showProgressBarBooleanfalseDefines whether the progress bar is shown.
progressColorString'blue'Defines the progress bar color. Accepts Color name and Hex

Slots

The component has slots called slide+NUMBER where the content that will be manipulated must be passed, the slideNUMBER is made up of the word slide plus the slide number, it needs to be in ascending order and starting with the number 1. It has a default text (Default Text) in case the content does not pass through the slot.

<template>
  <NbSlideDivFixedSize>
    <template #slide1>
      <div>
        CONTENT/TEXT 1
      </div>
    </template>
    <template #slide2>
      <div>
        CONTENT/TEXT 2
      </div>
    </template>
    ...
    <template #slide5>
      <div>
        CONTENT/TEXT 5
      </div>
    </template>
  </NbSlideDivFixedSize>
</template>

The example below shows the use of the slot for 5 contents.

I recommend using text-wrap and/or word-break in the div (wrapper) of your content to be able to break the texts, test first without these stylizations and then with them to see the difference.

Table of Contents