美文网首页
vue-awesome-swiper的6.X版本小圆点不显示问题

vue-awesome-swiper的6.X版本小圆点不显示问题

作者: 百里春秋1 | 来源:发表于2020-09-08 10:10 被阅读0次

    //dom

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

    //引用
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';

    import 'swiper/swiper-bundle.css'

    import Swiper2, {Navigation, Pagination} from 'swiper'; // 这行代码很关键

    Swiper2.use([Navigation, Pagination]); // 这行代码很关键

    // 样式
    .swiper-container /deep/ .swiper-pagination-bullet{

          background: red;

          height: 10px;

          width: 10px;

          opacity: 1;

    }

    .swiper-container /deep/ .swiper-pagination-bullet-active{

          background-color: #ffffff;

    }

    全部代码

    <template>

        <!-- <div class="commodity">

            <div class="container"> -->

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

            <swiper-slide v-for="(item, index) in commodity" :data-index="index" :key="index">

                <img class='swiImg' :src='item' />

            </swiper-slide>

            <!-- //滚动条 -->

            <!-- <div class="swiper-scrollbar" ></div> -->

            <!-- //下一页 -->

            <div class="swiper-button-next" @click="slideNext()" slot="button-next"></div>

            <!-- //上一页 -->

            <div class="swiper-button-prev" @click="slidePrev()" slot="button-prev"></div>

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

        </swiper>

        <!-- <span class='swiText' v-if='commodity'>{{imgIndex}}/{{commodity.length}}</span> -->

        <!-- </div>

        </div> -->

    </template>

    <script>

    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';

    import 'swiper/swiper-bundle.css'

    import Swiper2, {Navigation, Pagination} from 'swiper';

    Swiper2.use([Navigation, Pagination]);

    export default {

        data() {

            const that = this;

            return {

                commodity: [

                    "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",

                    "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",

                    "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",

                    "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",

                ],

                imgIndex: 1,

                swiperOptions: {

                    loop: true,

                    pagination: {

                        el: '.swiper-pagination',

                        clickable: true,

                    },

                    // Some Swiper option/callback...

                }

            }

        },

        components: {

            Swiper,

            SwiperSlide

        },

        computed: {

            swiper() {

                return this.$refs.mySwiper.$swiper

            }

        },

        mounted() {

            // this.swiper.slideTo(3, 1000, false)

        },

        methods: {

            slideNext() {

                this.swiper.slideNext()

            },

            slidePrev() {

                this.swiper.slidePrev()

            },

        }

    }

    </script>

    <style lang="less" scoped>

    .swiImg {

        width: 100%;

        height: 400px;

    }

    .item {

        width: 10px;

        height: 10px;

        background: red;

    }

    .swiper-container {

        // --swiper-theme-color: #ff6600;

        // --swiper-pagination-color: #00ff33; /* 两种都可以 */

    }

    .swiper-container /deep/ .swiper-pagination-bullet{

          background: red;

          height: 10px;

          width: 10px;

          opacity: 1;

    }

    .swiper-container /deep/ .swiper-pagination-bullet-active{

          background-color: #ffffff;

    }

    </style>

    相关文章

      网友评论

          本文标题:vue-awesome-swiper的6.X版本小圆点不显示问题

          本文链接:https://www.haomeiwen.com/subject/ferdektx.html