Skip to content

Instantly share code, notes, and snippets.

@wxs77577

wxs77577/swiper-zoomable-pagination.html

Last active March 15, 2017 02:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wxs77577/0053251abed6d50f46fec04200a30bba to your computer and use it in GitHub Desktop.
Save wxs77577/0053251abed6d50f46fec04200a30bba to your computer and use it in GitHub Desktop.
Download ZIP
Swiper Zoomable (Scalable) Pagination
Raw
swiper-zoomable-pagination.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="http://github.com/wxs77577">
<link href="https://cdn.bootcss.com/Swiper/3.4.1/css/swiper.css" rel="stylesheet">
<style>
.swiper-slide{
text-align: center;
min-height:200px;
background: #999;
}
.swiper-pagination-bullet{
transition: all 0.3s;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 1</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.1/js/swiper.js"></script>
<script>
var $dots = $('.swiper-pagination');
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
initialSlide: 5,
onSlideChangeStart: function (swiper) {
var activeIndex = swiper.activeIndex
var len = $dots.children().length
var min = 8; //尺寸下限
var max = 16; //尺寸上限
var rate = 1.5; //缩放倍数
for (var i = 0; i < len; i++) {
var size = Math.max(min, max - Math.abs(i - activeIndex) * rate)
$dots.children().eq(i).css({
width: size,
height: size
});
}
},
paginationClickable: true
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment