我正在尝试使navContainer
正常工作,但无法使用Vue版本的微型滑块。我也尝试过为此选项
-navContainer: '#customize-thumbnails'
,
-navContainer: document.querySelector('#customize-thumbnails')
,
-navContainer: this.$refs.sliderThumbs
,
它什么也没做。我可能会缺少什么?
<tiny-slider ref="tinySlider" v-bind="tinySliderOptions" class="customize" id="customize">
<div>
<img src="https://source.unsplash.com/collection/993239/600x400" alt="" width="600" height="400" />
</div>
<div>
<img src="https://source.unsplash.com/collection/1673600/600x400" alt="" width="600" height="400" />
</div>
</tiny-slider>
<ul ref="sliderThumbs" class="thumbnails" id="customize-thumbnails">
<li>
<img src="https://source.unsplash.com/collection/993239/600x400" alt width="600" height="400" />
</li>
<li>
<img src="https://source.unsplash.com/collection/1673600/600x400" alt width="600" height="400" />
</li>
</ul>
<script>
import VueTinySlider from 'vue-tiny-slider'
export default {
components: {
'tiny-slider': VueTinySlider
},
data() {
return {
tinySliderOptions: {}
}
},
methods: {
goToNext() {
this.$refs.tinySlider.slider.goTo('next')
},
goToPrev() {
this.$refs.tinySlider.slider.goTo('prev')
}
},
mounted() {
this.tinySliderOptions = {
mouseDrag: true,
loop: false,
items: 1,
swipeAngle: 45,
navContainer: this.$refs.sliderThumbs,
navAsThumbnails: true
}
}
}
</script>