关于Swiper
目前有Swiper4.x、Swiper3.x和Swiper2.x这三个版本
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。
Swiper2.
http://2.swiper.com.cn/usage/index.html
Swiper4.x的全部配置选项、方法、函数
http://www.swiper.com.cn/api/pagination/299.html
妙味课程Swiper移动端课程: 教学视频
https://study.miaov.com/study/show/chapter/271
Swiper4x. 基本配置
Swiper组件放在最上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css">
<style media="screen">
.swiper-container {
/* 宽高设置、不写是全屏 */
width: 1150px;
}
@media (max-width: 1150px) {
.swiper-container {
width: 100%;
}
}
.swiper-slide {
font-size: 50px;
line-height: 300px;
text-align: center;
}
.swiper-pagination-bullet {
/* 更改分页器css样式 */
width: 20px;
height: 20px;
}
.swiper-pagination-bullet-active {
/* 更改分页器 active の css样式 */
background-color: red;
width: 50px;
border-radius: 5px;
}
.swiper-button-prev {
width: 40px;
height: 70px;
background: url(首页-HIKER教育平台-HIKER教育平台_files/prevBtn.png) no-repeat;
opacity: 0.5;
}
.swiper-button-prev:hover {
opacity: 1;
}
</style>
</head>
<body>
<div id="swiper_Name"><!-- 轮播图名字 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #ffc;">Slide 1</div>
<div class="swiper-slide" style="background-color: #fcc;">Slide 2</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
<script type="text/javascript " src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.js"></script>
<!-- Swiper 设置部分 -->
<script>
var mySwiper = new Swiper('#swiper_Name .swiper-container', {
direction: 'horizontal', // 竖屏 vertical 、 横屏 horizontal
loop: true, // 打开之后,克隆最后一屏、放在整体最上面。实现轮播效果
initialSlide: 0, // 设定初始化时slide的索引。 默认:0
speed: 300, // 切换速度
grabCursor: true, // 抓手光标
autoplay: {
disableOnInteraction: false,// false: 触碰后自动切换也不会停止
},
// autoplay: { //等同于以下设置
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: true,
// },
// slidesPerView: 3.8, // 3.8个 'slide' 占满全屏
// slidesPerView: 'auto', // 自适应 每个'slide'的宽 以自定义的形式出现 (eg:13%)
// spaceBetween: 10, // 'slide' 与 'slide' 之间的距离
// 如果需要分页器
pagination: {
el: '#swiper_Name .swiper-pagination',
clickable: true,
},
//
// // 如果需要前进后退按钮
navigation: {
nextEl: '#swiper_Name .swiper-button-next',
prevEl: '#swiper_Name .swiper-button-prev',
},
//
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
</script>
</body>
</html>
为了让轮播图自适应
// <!-- 轮播图 Swiper高度自适应 -->
$(window).on('scroll load resize', function() {
$('.swiper-container').css('height', $('.banner img').height());
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css">
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 80%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(../img/banner-1.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-2.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-1.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-2.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-1.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-2.png)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(../img/banner-1.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-2.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-1.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-2.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-1.png)"></div>
<div class="swiper-slide" style="background-image:url(../img/banner-2.png)"></div>
</div>
</div>
<!-- Swiper JS -->
<script type="text/javascript " src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.js"></script>
<script type="text/javascript " src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Initialize Swiper -->
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
loop: true,
freeMode: true,
loopedSlides: 5, //looped slides should be the same
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs,
},
});
</script>
</body>
</html>