swiper官方的demo已经足够简单了！
但是我们还想更简单些，只想复制粘贴，其他的都别说！
1、引入swiper.js、swiper.css文件，不会的自罚一杯。
2、html:
<div class="index_section7_big_box">
<div class="swiper-container index_section7_box">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="pic"><img src="/public/static/index/images/honor1.jpg"></div>
<div class="text">2015-2016年度北京市律师行业先进党组织</div>
</div>
<div class="swiper-slide">
<div class="pic"><img src="/public/static/index/images/honor1.jpg"></div>
<div class="text">2015-2016年度北京市律师行业先进党组织</div>
</div>
<div class="swiper-slide">
<div class="pic"><img src="/public/static/index/images/honor1.jpg"></div>
<div class="text">2015-2016年度北京市律师行业先进党组织</div>
</div>
<div class="swiper-slide">
<div class="pic"><img src="/public/static/index/images/honor1.jpg"></div>
<div class="text">2015-2016年度北京市律师行业先进党组织</div>
</div>
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
var swiper = new Swiper('.index_section7_box', {
slidesPerView: 3,
spaceBetween: 30,
loop:true,
navigation: {
nextEl: ' .swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
320: { //当屏幕宽度大于等于320
slidesPerView: 1,
spaceBetween: 10
},
480: { //当屏幕宽度大于等于768
slidesPerView: 2,
spaceBetween: 20
},
768: { //当屏幕宽度大于等于768
slidesPerView: 3,
spaceBetween: 20
},
}
});
</script>3：css
.index_section7_big_box{
overflow: hidden;
position: relative;
margin-bottom: 5rem;
}
.index_section7_box{
overflow: hidden;
position: relative;
width: 90%;
margin: 0 auto;
}
.index_section7_box .swiper-slide{
text-align: center;
font-size: 1.6rem;
}
