如何使用vue-slick包实现您自己的操作按钮
如何使用vue-slick包实现您自己的操作按钮
提问于 2021-04-25 21:44:09
我正在使用vue-slick包创建一个滑块，我知道这个包允许您设置它提供的按钮/箭头的样式，但我想创建我自己的工作按钮，通过单击更改图片我不知道也许这个包提供了这样的机会这里是my project in codesandbox，Link to the documentation for this package的链接
<template>
<div class="drag">
<VueSlickCarousel v-bind="settings">
<div v-for="(item, index) in homePageImageList" :key="index" class="hero-image"
:style="{ backgroundImage: 'url(' + item.imageURL + ')' }">
<div class="hero-text">
<div>
<button>Prev</button>
</div>
<div class="slide-counter">
<h4>{{ index + 1 }} / {{ homePageImageList.length }}</h4>
</div>
<div>
<button>Next</button>
</div>
</div>
</div>
</VueSlickCarousel>
</div>
</template>
<script>
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
import VueSlickCarousel from 'vue-slick-carousel'
export default {
components: {VueSlickCarousel},
name: 'HelloWorld',
data() {
return {
homePageImageList: [
{
imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
{
imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
{
imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
}
],
settings: {
"dots": false,
"dotsClass": "slick-dots custom-dot-class",
"edgeFriction": 0.35,
"infinite": false,
"speed": 500,
"slidesToShow": 1,
"slidesToScroll": 1,
"arrows": false,
}
}
}
}
</script>回答 1
Stack Overflow用户
发布于 2021-04-26 03:14:51
<template>
<div class="drag">
<VueSlickCarousel v-bind="settings" ref="carousel">
<div v-for="(item, index) in homePageImageList" :key="index" class="hero-image"
:style="{ backgroundImage: 'url(' + item.imageURL + ')' }">
<div class="hero-text">
<div>
<button @click="Prev">Prev</button>
</div>
<div class="slide-counter">
<h4>{{ index + 1 }} / {{ homePageImageList.length }}</h4>
</div>
<div>
<button @click="showNext">show me the next</button>
</div>
</div>
</div>
</VueSlickCarousel>
</div>
</template>
<script>
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
import VueSlickCarousel from 'vue-slick-carousel'
export default {
components: {VueSlickCarousel},
name: 'HelloWorld',
methods: {
Prev() {
this.$refs.carousel.prev()
},
showNext() {
this.$refs.carousel.next()
},
},
data() {
return {
homePageImageList: [
{
imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
{
imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
{
imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
}
],
settings: {
"dots": false,
"dotsClass": "slick-dots custom-dot-class",
"edgeFriction": 0.35,
"infinite": false,
"speed": 500,
"slidesToShow": 1,
"slidesToScroll": 1,
"arrows": false,
},
}
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67254063
复制相关文章
相似问题
腾讯云开发者
