Infinite image carousel built with Vue.js
//Example of images
let images = [
{
id: '1',
big: 'path to full image',
thumb: 'path to thumbnail'
},
{
id: '2',
big: 'path to full image',
thumb: 'path to thumbnail'
}
]
You can see an example in both index.html and component.html
Using the component with vue cli as a single file component
This method does not use Bulma
To reference the Carousel with another name
name
attribute inside the file to the previously given name e.g. MyCarousel
// import the Carousel.vue
import Carousel from 'path/to/Carousel.vue'
<script>
export default {
name: 'OtherComponent',
// Include the Carousel here
components: {
Carousel
}
...
}
</script>
<!-- Example -->
<carousel
:starting-image="2"
:images="images"
></carousel>
<!-- Example with auto slide-->
<carousel
:starting-image="2"
:images="images"
:auto-slide-interval="1500"
></carousel>
<!-- Example with auto slide and progressbar on top of the images-->
<carousel
:starting-image="2"
:images="images"
:auto-slide-interval="1500"
:show-progress-bar="true"
></carousel>
You can also find a post I've written explaining the process on dev.to
If you want a new feature to be implemented you can create an issue with the label Feature.
Pull requests are more than welcome! :smiley: