index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>swiper全屏响应式幻灯片代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="static/css/swiper.min.css">
<style>
* {
padding: 0;
margin: 0;
}
body{background-color: #252525}
.clearfix:after {
visibility: hidden;
display: block;
content: "";
height: 0;
line-height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
html, body {
position: relative;
height: 100%;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.gallery-top {
padding-bottom: 12px;
width: 100%;
}
.gallery-top .swiper-slide {
max-width: 100%;
max-width: 100%;
width: auto;
overflow: hidden;
opacity: 0.5;
}
.gallery-top .swiper-slide img {
max-width: 100%;
height: 100%;
}
.gallery-top .swiper-slide-active {
opacity: 1;
}
.gallery-thumbs {
height: 65px;
box-sizing: border-box;
padding-top: 2px;
}
.gallery-thumbs .swiper-slide {
max-width: 100%;
max-height: 100%;
width: auto;
height: 100%;
overflow: hidden;
}
.gallery-thumbs .swiper-slide img {
max-width: 100%;
height: 100%;
}
.gallery-thumbs-box {
position: relative;
width: 100%;
height: 65px;
}
.gallery-thumbs-box .swiper-container {
margin-left: auto;
margin-right: auto;
}
.gallery-thumbs-box .swiper-button-prev {
background-image: url(static/images/left-small.png);
width: 10px;
height: 65px;
background-size: 10px 18px;
left: 10px;
margin-top: 0;
top: 0;
outline: none;
}
.gallery-thumbs-box .swiper-button-next {
background-image: url(static/images/next-small.png);
width: 10px;
height: 65px;
background-size: 10px 18px;
right: 10px;
margin-top: 0;
top: 0;
outline: none;
}
.gallery-top-box {
position: relative;
width: 100%;
}
.gallery-top-box .swiper-container {
margin-left: auto;
margin-right: auto;
}
.gallery-top-box .swiper-button-prev {
background-image: url(static/images/left-lg.png);
width: 18px;
background-size: 18px 38px;
left: 10px;
margin-top: 0;
top: 50%;
outline: none;
transform: translate(0, -50%)
}
.gallery-top-box .swiper-button-next {
background-image: url(static/images/next-lg.png);
width: 18px;
background-size: 18px 38px;
right: 10px;
margin-top: 0;
top: 50%;
outline: none;
transform: translate(0, -50%)
}
.slideshow {
float: right;
margin-right: 30px;
margin-top: 15px;
display: inline-block;
background-repeat: no-repeat;
background-position: center right;
background-image: url("static/images/play.png");
cursor: pointer;
padding-right: 15px;
color: #999;
transition: all 0.3s ease
}
.pauseed {
background-image: url("static/images/pause.png");
}
.inner_img_area:hover img{
transform: scale(1.2);
}
.inner_img_area img{
width: 100%;
transition: .5s;
}
</style>
</head>
<body >
<!-- Swiper -->
<div class="inner_img_area">
<div class="gallery-top-box">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" data-id="1"> <img src="static/images/a1.png"> </div>
<div class="swiper-slide" data-id="2"> <img src="static/images/a2.png"> </div>
<div class="swiper-slide" data-id="3"> <img src="static/images/a3.png"> </div>
<div class="swiper-slide" data-id="4"> <img src="static/images/a4.png"> </div>
<div class="swiper-slide" data-id="5"> <img src="static/images/a5.png"> </div>
<div class="swiper-slide" data-id="6"> <img src="static/images/a6.png"> </div>
<div class="swiper-slide" data-id="7"> <img src="static/images/a1.png"> </div>
<div class="swiper-slide" data-id="8"> <img src="static/images/a2.png"> </div>
<div class="swiper-slide" data-id="9"> <img src="static/images/a3.png"> </div>
<div class="swiper-slide" data-id="10"> <img src="static/images/a4.png"> </div>
<div class="swiper-slide" data-id="11"> <img src="static/images/a5.png"> </div>
<div class="swiper-slide" data-id="12"> <img src="static/images/a6.png"> </div>
<div class="swiper-slide" data-id="13"> <img src="static/images/a1.png" > </div>
<div class="swiper-slide" data-id="14"> <img src="static/images/a2.png"> </div>
<div class="swiper-slide" data-id="15"> <img src="static/images/a3.png"> </div>
<div class="swiper-slide" data-id="16"> <img src="static/images/a4.png"> </div>
<div class="swiper-slide" data-id="17"> <img src="static/images/a5.png"> </div>
<div class="swiper-slide" data-id="18"> <img src="static/images/a6.png"> </div>
<div class="swiper-slide" data-id="19"> <img src="static/images/a1.png" > </div>
<div class="swiper-slide" data-id="20"> <img src="static/images/a2.png"> </div>
<div class="swiper-slide" data-id="21"> <img src="static/images/a3.png"> </div>
<div class="swiper-slide" data-id="22"> <img src="static/images/a4.png"> </div>
<div class="swiper-slide" data-id="23"> <img src="static/images/a5.png"> </div>
<div class="swiper-slide" data-id="24"> <img src="static/images/a6.png"> </div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" data-id="1"> <img src="static/images/a1.png"> </div>
<div class="swiper-slide" data-id="2"> <img src="static/images/a2.png"> </div>
<div class="swiper-slide" data-id="3"> <img src="static/images/a3.png"> </div>
<div class="swiper-slide" data-id="4"> <img src="static/images/a4.png"> </div>
<div class="swiper-slide" data-id="5"> <img src="static/images/a5.png"> </div>
<div class="swiper-slide" data-id="6"> <img src="static/images/a6.png"> </div>
<div class="swiper-slide" data-id="7"> <img src="static/images/a1.png"> </div>
<div class="swiper-slide" data-id="8"> <img src="static/images/a2.png"> </div>
<div class="swiper-slide" data-id="9"> <img src="static/images/a3.png"> </div>
<div class="swiper-slide" data-id="10"> <img src="static/images/a4.png"> </div>
<div class="swiper-slide" data-id="11"> <img src="static/images/a5.png"> </div>
<div class="swiper-slide" data-id="12"> <img src="static/images/a6.png"> </div>
<div class="swiper-slide" data-id="13"> <img src="static/images/a1.png" > </div>
<div class="swiper-slide" data-id="14"> <img src="static/images/a2.png"> </div>
<div class="swiper-slide" data-id="15"> <img src="static/images/a3.png"> </div>
<div class="swiper-slide" data-id="16"> <img src="static/images/a4.png"> </div>
<div class="swiper-slide" data-id="17"> <img src="static/images/a5.png"> </div>
<div class="swiper-slide" data-id="18"> <img src="static/images/a6.png"> </div>
<div class="swiper-slide" data-id="19"> <img src="static/images/a1.png" > </div>
<div class="swiper-slide" data-id="20"> <img src="static/images/a2.png"> </div>
<div class="swiper-slide" data-id="21"> <img src="static/images/a3.png"> </div>
<div class="swiper-slide" data-id="22"> <img src="static/images/a4.png"> </div>
<div class="swiper-slide" data-id="23"> <img src="static/images/a5.png"> </div>
<div class="swiper-slide" data-id="24"> <img src="static/images/a6.png"> </div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Swiper -->
<div class="footernav clearfix" style="height:45px;overflow:hidden;">
<div class="slideshow">Stop</div>
</div>
</div>
<!-- Swiper JS -->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script>
//图片等比例
galleryTopHeight()
$(window).resize(function(){
galleryTopHeight()
})
var galleryTop = new Swiper('.gallery-top-box .gallery-top', {
centeredSlides: true,
autoplay:{
delay:4000,
disableOnInteraction: false
},
slidesPerView: 'auto',
spaceBetween: 10,
navigation: {
nextEl: '.gallery-top-box .swiper-button-next',
prevEl: '.gallery-top-box .swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
hide: false,
draggable: true,
dragSize:150,
}
});
$(".slideshow").click(function(){
if($(this).hasClass("pauseed")){
//播放
$(this).removeClass("pauseed")
galleryTop.autoplay.start()
}else{
//暂停
$(this).addClass("pauseed")
galleryTop.autoplay.stop()
}
})
galleryTop.scrollbar.$el.css({
"bottom":"0px",
"background":"none",
"height":"5px"
});
galleryTop.scrollbar.$dragEl.css({
'background':'rgba(171,171,171,171.6)'
});
galleryTop.scrollbar.updateSize();
var galleryThumbs = new Swiper('.gallery-thumbs-box .gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 'auto',
touchRatio: 0.2,
navigation: {
nextEl: '.gallery-thumbs-box .swiper-button-next',
prevEl: '.gallery-thumbs-box .swiper-button-prev',
}
});
galleryTop.controller.control = galleryThumbs;
<!--注意添加objThumbs,objTop对应的索引值1 ~ N -->
var objThumbs = $(".gallery-thumbs .swiper-wrapper .swiper-slide");
var objTop = $(".gallery-top .swiper-wrapper .swiper-slide");
objThumbs.click(function(e){
var currentId = $(this).attr("data-id");
for(var i = 0 ; i< objTop.length; i++){
if($(objTop[i]).attr("data-id") === currentId){
$(objTop[i-1]).addClass("swiper-slide-prev")
$(objTop[i-1]).siblings().removeClass("swiper-slide-prev")
$(objTop[i]).addClass("swiper-slide-active")
$(objTop[i]).siblings().removeClass("swiper-slide-active")
$(objTop[i+1]).addClass("swiper-slide-next")
$(objTop[i+1]).siblings().removeClass("swiper-slide-next")
e.preventDefault();
galleryTop.slideTo(i,1000, false);
}
}
})
function galleryTopHeight(){
//处理图片比例
var wh = $(window).height();
var headernav_height = $(".headernav").height()
var footernav_height = $(".footernav").height()
var galleryThumbs_height = $(".gallery-thumbs").height()
var galleryTop_height = wh - galleryThumbs_height - headernav_height - footernav_height - 22
$(".gallery-top").css("height",galleryTop_height)
//缩略图
var galleryThumbs_width = $(window).width() - 60
$(".gallery-thumbs-box .swiper-container").css("width",galleryThumbs_width)
//大图
var galleryTop_width = $(window).width() - 80
$(".gallery-top-box .swiper-container").css("width",galleryTop_width)
}
</script>
</body>
</html>源码包swiper幻灯片
