swiper移动端全屏播放动态获取数据

Posted 2020-11-28 liubingyjui

 

 

 

html:

 <link rel="stylesheet" href="css/swiper.min.css">

 

<div class="swiper-container s-c">
        <div class="swiper-wrapper"></div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
</div>

<script src="js/swiper.min.js"></script>

 

js:

var vm = new Vue({
    el:‘#app‘,
    data:{
        imgs:[
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
            {thumb:"https://goss.veer.com/creative/vcg/veer/800water/veer-308318668.jpg"},
        ],
      
    },
    created: function(){
       
    },
    mounted:function(){
        var self = this;
        var imgs = self.imgs;
        for (var i = 0, len = imgs.length; i < len; i++) {
            var html = ‘<div class="swiper-slide"><img src="‘ + imgs[i].thumb + ‘"/></div>‘
            $(‘.swiper-wrapper‘).append(html)
        }
        var swiper = new Swiper(‘.swiper-container‘, {
            pagination: {
                el: ‘.swiper-pagination‘,
                type: ‘fraction‘,
            },
            loop: true,             //为 true循环
            autoplay: false,      //为 true自动播放到下一张
            init: true,          //为true自动执行，不用调用
            disableOnInteraction: false,
        });

    },
    methods:{
        
    },
    filters:{
        
    }

})