不显示小圆点

来源:2-5 Vue项目首页 - 首页轮播图(1)

haoeyru

2020-09-04 14:02:42

<template>

    <div class="swiper">

        <swiper ref="mySwiper" :options="swiperOptions">

            <swiper-slide v-for='item of swiperList' :key="item.id">

                <img class="swiper-img" :src="item.imgUrl">

            </swiper-slide>

            <!-- options control -->

            <div class="swiper-pagination" slot="pagination"></div>

        </swiper>

    </div>

</template>

<script>

export default {

    name: 'HomeSwiper',

    data () {

      return {

        swiperOptions: {

            pagination:{

                el:'.swiper-pagination',

                clickable:true,

            },

            loop:true,

        },


写回答

2回答

好帮手慕久久

2020-09-04

同学你好,安装了2.6.7版本的swiper后,需要将其配置也改成对应该版本的方式,如下:

http://img.mukewang.com/climg/5f5201ce09bb20d005540368.jpg

同学再试一下。

祝学习愉快!

0

好帮手慕久久

2020-09-04

同学你好,从你配置swiper的方式可以看出,同学使用的版本与视频中讲师的版本不一致,同学使用的这个版本,会需要一些其他的配置,考虑到这些配置比较麻烦,而且官方文档也没有详细的说明,所以建议同学将插件的版本换成视频中讲师的版本,指令是npm i vue-awesome-swiper@2.6.7 --save,该版本的swiper比较稳定,而且文档也详细。

祝学习愉快!

0
haoeyru
h "dependencies": { "fastclick": "^1.0.6", "stylus": "^0.54.8", "stylus-loader": "^3.0.2", "swiper": "^6.1.3", "vue": "^2.5.2", "vue-awesome-swiper": "^2.6.7", "vue-router": "^3.0.1" },
h020-09-04
共1条回复

0 学习 · 10739 问题

查看课程