swiper轮播插件的使用

swiper轮播插件的使用

引入js文件

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

接收后台返回的轮播数据，循环append进去，在append之后new swiper对象

                $.each(data['data'],function(i){
                       list_item += '<div class="swiper-slide">';
                       list_item += '<img src="./img/turn_logo.jpg" data-lazyload="'+data['data'][i]['FileUrl']+'"  onload="lazyload(this)" alt="">';
                       list_item += '</div>';
                    }) 
                    $(".swiper-wrapper").append(list_item);
                  }
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable :true,
                    effect: 'cube',
                    grabCursor: true,
                    cube: {
                        shadow: false,
                        slideShadows: false,
                        shadowOffset: 0,
                        shadowScale: 0
                    }
                });

备注1.

---

1. 对于插件的使用是很简单的，大神请绕道 ↩