关于swiper轮播图

2019独角兽企业重金招聘Python工程师标准>>>

html:

<div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="http://oss-cn-beijing.aliyuncs.com/xz-bktt/7473e4a985c23dc3b3196955fd37c3c5.jpg" />
                                <div class="title">1在十九届中央纪委三次...</div>
                            </div>
                            <div class="swiper-slide">
                                <img src="http://oss-cn-beijing.aliyuncs.com/xz-bktt/7473e4a985c23dc3b3196955fd37c3c5.jpg" />
                                <div class="title">2在十九届中央纪委三次...</div>
                            </div>
                            <div class="swiper-slide">
                                <img src="http://oss-cn-beijing.aliyuncs.com/xz-bktt/7473e4a985c23dc3b3196955fd37c3c5.jpg" />
                                <div class="title">3在十九届中央纪委三次...</div>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>

script: 

mounted() {
            new Swiper('.news .swiper-container', {
                loop: true,
                // autoplay: true,
                pagination: {
                    el: '.news .swiper-pagination',
                    clickable: true,
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '" style="background:#fff;opacity:1;"></span>';
                    },
                },
            })
        },

 

使用swiper之前需要在文件中引入swiper插件：

<script src="https://cdn.jsdelivr.net/npm/swiper@4.4.6/dist/js/swiper.min.js"></script>

转载于:https://my.oschina.net/u/3949469/blog/3016251