Scrollbar not working

中文用户注意：

1. 尽量用英文描述你的 Issue，你的问题是面向世界的
2. 不要把内容堆彻在标题上，逻辑清晰地写在内容区
3. 贴代码要提前格式化好，有颜色高亮那种，贴文本，不要贴图片
4. 提问题前，务必仔细阅读 README.md；在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决

BUG REPORT TEMPLATE

Vue.js version and component version

Vue.js v2.6.11 Swiper 6.0.1 Vue Awesome Swiper 4.1.1

Reproduction Link

https://jsfiddle.net/u42arhtg/2/

Steps to reproduce

add <div class="swiper-scrollbar" slot="scrollbar"></div> add

scrollbar: {
          el: '.swiper-scrollbar',
          draggable: true,
          hide: false,
        },

to the swiperOptions Object

What is Expected?

There should be an scrollbar which allows the user to drag the slider and indicate how many items are left

this is an example:

<div class="c-slider__scrollbar swiper-scrollbar">
    <div class="swiper-scrollbar-drag" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms; width: 572.028px;">    </div>
</div>

What is actually happening?

the Scrollbar gets rendered but is not working

[mortensassi]

I found that for many cases you don’t need this wrapper in order to get swiper to work - I don’t want to discredit the developer or maintainer but i am a fan of keeping stuff easy and simple. Now since swiper is offering a highly modular api you can just import all you need in your vue component and easy init when its mounted() @Ic3m4n34 i show you my code for a slider component which shows teaser of different types (“News” and “Work”)

<template>
  <div
    class="c-slider c-slider--fixed c-slider--start swiper-container"
    :class="{ 'is-ready': sliderReady }"
  >
    <div class="c-slider__wrapper swiper-wrapper">
      <SliderItem
        v-for="(entry, entryIndex) in data"
        :key="entryIndex"
        :active="currentIndex === entryIndex"
        :data="entry"
        class="c-slider__item swiper-slide"
      />
    </div>
    <div class="swiper-pagination c-slider__pagination"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Swiper, EffectFade, Autoplay, Pagination } from 'swiper'
Swiper.use([EffectFade, Autoplay, Pagination])

export default {
  name: 'Slider',
  props: {
    data: {
      type: Array,
      default: null,
    },
  },

  data() {
    const vm = this
    return {
      currentIndex: 0,
      nextSlideType: '',
      slider: null,
      options: {
        effect: 'fade',
        autoplay: {
          delay: 8000,
        },
        pagination: {
          el: '.c-slider__pagination',
          clickable: true,
        },
        loop: true,
        on: {
          slideChange() {
            const slides = vm.data.length - 1
            const index = this.realIndex
            const slideType = (i) => vm.data[i].type
            const currentPost = vm.data[this.realIndex]

            vm.currentIndex = this.realIndex

            vm.nextSlideType =
              index === slides ? slideType(0) : slideType(index + 1)

            vm.$store.dispatch('aside/setBottomContent', {
              post: currentPost,
              type: 'tease',
            })
          },
        },
      },
    }
  },

  computed: {
    ...mapGetters({ sliderReady: 'site/sliderReady' }),
  },

  mounted() {
    this.$store.dispatch('site/sliderImagesCount', this.data.length)
    this.slider = new Swiper('.c-slider', this.options)
    this.slider.init()
  },

  beforeDestroy() {
    this.$store.dispatch('site/resetImages')
    this.slider.autoplay.stop()
    this.$store.dispatch('aside/setBottomContent', null)
    this.$store.dispatch('imageClone/resetClone')
    this.slider.destroy()
  }
}
</script>

<style lang="scss" src="@/assets/scss/components/_slider.scss"></style>

I think this code will get you an better idea of what is possible with just the core plugin

[AndrewBogdanovTSS]

@mortensassi I agree with you. Since vue-awesome-swiper still doesn’t have proper Swiper 6 support - I would also recommend to use wrapperless lib whenever possible, basically in 99% of cases you can use a Swiper.js itself