swiper移动端触屏滑动图片轮播切换代码



500 1999 667



特效描述:swiper 移动端触屏滑动 图片轮播切换,swiper.js移动端banner图片轮播插件制作带索引的左右按钮控制图片轮播切换、触屏滑动图片切换、响应式的图片切换代码。

代码结构

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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图 幻灯片 图片轮播 图片切换 图片轮播 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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