I would like to use glidejs
inside a vuejs
component, although I couldn't make it work so far.
Is it possible to achieve this? Does vuejs
support such a thing?
my code:
<template>
<div>
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">0</li>
<li class="glide__slide">1</li>
<li class="glide__slide">2</li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
</div>
</template>
<script>
import Glide from '@glidejs/glide'
new Glide('.glide').mount() // this is probably wrong
export default {
name: 'Carousel',
}
</script>
<style scoped>
@import '../assets/styles/glide/glide.core.min.css';
</style>
The main fix needed in your code is to move the Glide
initialization to the mounted()
hook , which runs when the component has mounted in the document, enabling the .glide
selector given to the Glide
constructor to be found:
<script>
import Glide from '@glidejs/glide'
export default {
mounted() {
new Glide('.glide').mount()
},
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.