0.1.1 • Published 2 years ago
vue-blaze-slider v0.1.1
vue-blaze-slider
Vue 3 integration for Blaze Slider, an high performance slider library.
Usage
npm install vue-blaze-slider
- In your
.vue
component:
<template>
<BlazeSlider
:options="{
all: {
slidesToShow: 3,
slideGap: '2rem',
},
}"
>
<template #default>
<BlazeSlide>1</BlazeSlide>
<BlazeSlide>2</BlazeSlide>
<BlazeSlide>3</BlazeSlide>
<BlazeSlide>4</BlazeSlide>
<BlazeSlide>5</BlazeSlide>
<BlazeSlide>6</BlazeSlide>
</template>
<!-- Pagination slot is optional. -->
<template #pagination>
<BlazePagination />
</template>
</BlazeSlider>
</template>
<script setup lang="ts">
import { BlazeSlider, BlazeSlide, BlazePagination } from "vue-blaze-slider";
// CSS import is important for basic usage, do not skip this part or it won't work.
// You can easily extend the default styles.
import "vue-blaze-slider/dist/style.css";
</script>
Props
BlazeSlider
Name | Type | Default | Description |
---|---|---|---|
options | BlazeConfig | undefined | Blaze Slider configuration. See all available properties from official Blaze Slider documentation. |
Composables
useBlazeSlider
A composable to create a Blaze Slider instance. Gives you a better control over the DOM if necessary compared to the component-based approach.
You need to create the necessary HTML markup yourself as specified on the Blaze Slider setup page.
Usage
<template>
<div ref="sliderEl" class="blaze-slider">
<div class="blaze-container">
<div class="blaze-track-container">
<div class="blaze-track">
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import "vue-blaze-slider/dist/style.css";
import { useBlazeSlider } from "vue-blaze-slider";
const sliderEl = ref<HTMLDivElement | null>(null);
const slider = useBlazeSlider(sliderEl);
</script>
License
See LICENSE.
0.1.1
2 years ago
0.1.0
2 years ago
0.0.1
2 years ago
0.0.1-beta.3
2 years ago
0.0.1-beta.2
2 years ago
0.0.1-beta.1
2 years ago