Skip to content

Latest commit

 

History

History
112 lines (97 loc) · 2.89 KB

README.md

File metadata and controls

112 lines (97 loc) · 2.89 KB

SlideVue

Slider component for vue.js

Plan

Create slide component inspired with some swiper.js features.

1. Template usage:

// SomeComponent.vue

<!-- Example one -->
<template>
  <div class="some-component">
    <slide-vue>
      <template v-slot="slide-0">
        <div>Slide 1</div>
      </template>
      <template v-slot="slide-1">
        <div>Slide 2</div>
      </template>
      <template v-slot="slide-2">
        <div>Slide 3</div>
      </template>
      <template v-slot="slide-3">
        <div>Slide 4</div>
      </template>
    </slide-vue>
  </div>
</template>

<!-- Example two -->
<template>
  <div class="some-component">
    <slide-vue
      :initial-slide-index="2"
    >
      <template
        v-for="(slide, index) in slides"
        :slot="`slide-${index}`"
      >
        <div :key="`slide-${index}`">
          {{ `${slide.title} ${index}` }}
        </div>
      </template>
    </slide-vue>
  </div>
</template>

<!-- Example three -->
<template>
  <div class="some-component">
    <slide-vue
      :initial-slide-index="2"
      :slides-per-view="{
        'default': 1,
        500: 2,
        1200: 10,
        800: 'auto',
        1000: 4,
      }"
      :slide-gap-between="10"
    >
      <!-- Obligatory button slot -->
      <template slot="button-prev">
        <div>Test</div>
      </template>

      <template
        v-for="(slide, index) in slides"
        :slot="`slide-${index}`"
      >
        <div :key="`slide-${index}`">
          {{ `${slide.title} ${index}` }}
        </div>
      </template>

      <!-- Obligatory button slot -->
      <template slot="button-next">
        <div>Test</div>
      </template>
    </slide-vue>
  </div>
</template>

...

Slides contents are passed to slot

2. Props

Name Type Default Description
initial-slide-index number 0 Index of initial active slide.
slides-per-view number or string or object 1 Determines slides per view (can be 'auto'), in object breakpoints can be defined (example: {'default': 2, 768: 3, 1024: 'auto'})
slide-gap-between number 0 Space between slides in px
margin-start number 0 Space before first slide in px
margin-end number 0 Space after last slide in px
slides-per-page string or number Only 1 or auto available
namespace object specify later Provides possibility to overwrite default class names (example: {'sliderClass': 'slider', 'sliderButtonClass': 'slider__btn', ...})
add-inline-styles-to-button boolean true Toggle inline styles for slider buttons

3. Exposed methods

Name Arguments Returns Description
showNext Animate to next slide
showPrev Animate to previous slide
slideTo slideIndex: number (required) Animate to specified slide
getVisibleSlideIndexes visibleSlides: number [] Returns active slide indexes