0.6.0 • Published 1 year ago
vue-dynamic-slider v0.6.0
vue-dynamic-slider
Dynamic and light-weight slider for Vue
Note: This is in beta and is subject to change.
Installing
- Yarn:
yarn add vue-dynamic-slider
- or NPM:
npm install vue-dynamic-slider
Demos:
Please visit the demo site: https://bakovidagi.github.io/vue-dynamic-slider/demo/
Usage:
Template
<slider-frame>
<div slot-scope="{ next, prev, scrollToSlide, activeIndex, canScrollNext, canScrollPrev }">
<!-- With the exposed variables and methods it's simple to make your own pagination -->
<div @click="prev"><</div>
<slider-slides>
<!-- SliderSlide is currently needed for even sizing, but seems redundant so will likely be replaced with Flexbox CSS -->
<slider-slide
:key="ix"
v-for="(ix, iter) in [1, 2, 3, 4, 5, 6, 7]"
>
<img
:alt="`Image ${ix}`"
:src="`https://via.placeholder.com/300x300.png?text=${ix}`"
style="width: 100%;"
@click="scrollToSlide(iter)"
>
</slider-slide>
</slider-slides>
<div @click="next">></div>
</div>
</slider-frame>
Script
import {SliderFrame, SliderSlides, SliderSlide} from 'vue-dynamic-slider';
export default {
components: {SliderSlide, SliderSlides, SliderFrame}
}
Slot API
Props:
slidesPerView
: The number of slides to show at a time. Default:5
scrollIncrement
: The number of slides to scroll by at a time. If set, creates pages. Default:1
infiniteScroll
: True to enable infinite scrolling. Duplicate slides are created. Default:false
breakpoints
: Object of screen width to override props. Can adjustslidesPerView
andscrollIncrement
based on screen width. See below for more info.breakpointElement
: Function that returns the element to get breakpoint width from. Defaults to window if null. Use this if you have the slider in an element that isn't the full screen width and want the breakpoints to react to that element instead of the windowscrollingFunction
: Custom function for scrolling slides. Defaults to a cubic functionautoplay
: Boolean that automatically scrolls through the slides whentrue
. Toggle this to start/stop the autoplayautoplayInterval
: Number of milliseconds to wait before autoplaying
The following methods and properties are exposed via slots.
Properties:
activeIndex
: The current active slide, zero basedcanScrollNext
: A boolean that is true if it's possible to scroll to the rightcanScrollPrev
: A boolean that is true if it's possible to scroll to the leftslidesInView
: An array of all slides that are visible, zero basedpagination.numPages
: The total number of pages, used for creating pagination dotspagination.currentPage
: The current page that is visible, zero based
Methods:
scrollToSlide
: A function that takes a zero-based slide number and scrolls to either that or the closest one based on pagescrollToPage
: A function that takes a zero-based page number and scrolls to the first slide in that pagenext
: Scroll to the next slide or pageprev
: Scroll to the previous slide or page
Breakpoints
Breakpoints are an object of screen width to an override at that width.
Accepts a number for px width, or one of sm
, md
, lg
, xl
that maps to Bootstrap's breakpoint widths
Example:
{
"320": { "slidesPerView": 1 },
"md": { "slidesPerView": 2 },
"lg": { "slidesPerView": 3 }
}