问题描述
我正在使用 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",}
],settings: {
"dots": false,"dotsClass": "slick-dots custom-dot-class","edgeFriction": 0.35,"infinite": false,"speed": 500,"slidesToShow": 1,"slidesToScroll": 1,"arrows": false,}
}
}
}
</script>
解决方法
<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",}
],settings: {
"dots": false,"dotsClass": "slick-dots custom-dot-class","edgeFriction": 0.35,"infinite": false,"speed": 500,"slidesToShow": 1,"slidesToScroll": 1,"arrows": false,}
}
}
</script>