Problems with the use of vue plug-in Vue-Awesome-Swiper

npm install vue-awesome-swiper --save

Vue-Awesome-Swiper installed successfully as prompted on the official website

clipboard.png

main.js

clipboard.png

Jul.12,2021

for children's shoes with the same problem as me, you can consider directly quoting swiper

.
npm install swiper --save-dev

official website API https://www.swiper.com.cn/api.

<script>
import Swiper from 'swiper';
export default {
  name: "home",
  data() {
    return {
      msg: "",
    };
  },
  mounted(){
     new Swiper ('.swiper-container', {
    loop: true,
    // 
   pagination: {
      el: '.swiper-pagination',
    },
    // 
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 
    //   scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })        
  }
};
</script>

reference: vue introduces swiper vue using swiper vue scaffolding using swiper / importing js files / importing css files


Hello, landlord! Does this affect your normal use? If not, it should have something to do with your vscode configuration.


Hello, let me ask, can't you find a solution to the problem in your vue broadcast plug-in module? I also have this problem here. Can you show it to me? thank you, qq 1018715564


import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

configuration in Data:

components: {
        swiper,
        swiperSlide
    },
swiperOption: {
                direction: 'vertical',
                slidesPerView: 1,
                spaceBetween: 0,
                mousewheel: true,
                autoHeight: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: false,
                    type : 'fraction'
                },
                effect:'slide',
                speed:500,
                longSwipesRatio:0.3,
                resistanceRatio:0.1
            }

computed method:

computed: {
            swiper() {
                return this.$refs.pageSwiper.swiper
            }
        },

template code:

<swiper :options="swiperOption" class="swiper-box" ref="pageSwiper">
                <swiper-slide class="swiper-item">
                    
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination" v-show="true"></div>
            </swiper>
Menu