利用js实现swiper手机图片滑动切换代码

利用js实现swiper手机图片滑动切换代码

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<!-- Swiper -->
 <section class="pc-banner">
	<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-center none-effect"><a href="#"><img src="images/top_hero_conc_2017.jpg" ></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/top_hero_cs_2017.jpg" ></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/top_hero_cw_im17.jpg" ></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/top_hero_hakko.jpg" ></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/top_hero_karadacalpis_im02.jpg" ></a></div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
	<div class="button">
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</section>
<!-- Swiper JS -->
<!-- Initialize Swiper -->
<script>
window.onload = function() {
var swiper = new Swiper('.swiper-container',{
	autoplay:3000,
	speed:1000,
	autoplayDisableOnInteraction : false,
	loop:true,
	centeredSlides : true,
	slidesPerView:2,
	pagination : '.swiper-pagination',
	paginationClickable:true,
	prevButton:'.swiper-button-prev',
	nextButton:'.swiper-button-next',
	onInit:function(swiper){
		swiper.slides[2].className="swiper-slide swiper-slide-active";//第一次打开不要动画
		},
	breakpoints: { 
			668: {
				slidesPerView: 1,
			 }
		}
	});
	}
</script>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到