Question

我正在尝试使navContainer正常工作，但无法使用Vue版本的微型滑块。我也尝试过为此选项

-navContainer: '#customize-thumbnails'，
-navContainer: document.querySelector('#customize-thumbnails')，
-navContainer: this.$refs.sliderThumbs，

它什么也没做。我可能会缺少什么？

codesandbox

<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>

无法使navContainer适用于微型滑块（VUE）

0 个答案: