@samwood/vue-carousel v0.1.98
vue-carousel
Installation
Install the npm package
npm install @samwood/vue-carousel
Import VueCarousel into Vue component script
// my-component.vue <template> <MyComponent>...</MyComponent> </template> <script> import VueCarousel from '@samwood/vue-carousel'; export default { name: 'MyComponent', components: { VueCarousel } } </script>
Add VueCarousel to Vue component template
To populate the slides, you will need to add
<template>
for each slide with av-slot[0]
starting at base 0. Eachv-slot
should increment by 1 for every slide.// my-component.vue <template> <MyComponent> <VueCarousel> <template v-slot[0]> <MyChildComponent /> </template> <template v-slot[1]> <MyChildComponent /> </template> <template v-slot[3]> <MyChildComponent /> </template> </VueCarousel> </MyComponent> </template> <script> ... </script>
Optionally, you can dynamically change the v-slot to avoid repeated code.
// my-component.vue <template> <MyComponent> <VueCarousel> <template v-for="n in slides" v-slot[n-1]> <MyChildComponent :key="`slide-${n-1}`" /> </template> </VueCarousel> </MyComponent> </template> <script> ... </script>
Config
Example
Vue carousel takes a config
prop - an object contain various keys to change the functionality and appearance of the component.
<vue-carousel
:config="{
slidesVisible: {...},
staticBreakpoint: "md",
loop: true
}"
>
...
</vue-carousel>
Parameters
Event API
Styling
Although the controls have options to pass styling through a JS object, this isn't always ideal, especially when you want to use your own CSS variables and mixins. You will find below a list of CSS classes that you can target to override existing styles.
Carousel classes
.v-carousel
If you set a breakpoint to become static, you may want to change the layout of the slides. You can do this by targetting the following class:
.v-carousel--static
Controls classes
.v-carousel__controls__btn
.v-carousel__controls__btn--prev
.v-carousel__controls__btn--next
.v-carousel__controls__btn--disabled
.v-carousel-pagination
.v-carousel-pagination__list // ul/ol element containing li elements
.v-carousel-pagination__li // li element wrapping the button
.v-carousel-pagination__btn
.v-carousel-pagination__btn--active
.v-carousel-pagination__btn--number
Slides
.v-carousel__slide
Troubleshooting
Note: Ensure that you do not apply any attributes to slide slots within the carousel that should not be duplicated such as id
as if you set loop
to true
, the content in these slides will be duplicated and will cause issues.
The first slide is missing content
The carousel uses base-0 incrementing numbers for slot names.
v-for="n in 10"
will produce numbers 1-10 for n
. You will need to use v-slot:[n-1]
to include the first slides content.
My styling isn't being applied to the carousel elements
If you are using scoped styles, ensure that you are using ::v-deep
before targetting the carousel class.
Example
<style lang="scss scoped>
.my-component {
& ::v-deep .v-carousel--static {
display: grid;
}
}
</style>
The carousel won't autoplay when off-screen
The carousel uses an Intersection Observer to remove the autoplay-interval when the carousel is not visible on screen.
This has been done to improve efficiency of the browser so that the carousel is not carrying out performance-expensive animations that may interfer with the user's experience.
Autoplay will be enabled again when the carousel is visible again.
The carousel is not looping when loop
is true
If config.group
is set to true
, ensure that the total slide-count can be divided by your config.slidesVisible
value at the current breakpoint without remainder. e.g
slide-count (10) % config.slidesVisible.xs (2) = 0
✅
slide-count (10) % config.slidesVisible.sm (3) = 1
❌
If there is a remainder, loop
will be disabled because there will not be enough items to fill out the last group of slides.
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago