javascript - iDangerous swiper 反向分页
问题描述
我正在尝试使用自定义分页创建 iDangerous swiper。默认情况下,swiper 的分页从 1 到 10。这里有人可以帮我将顺序从 10 反转到 1 吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
</script>
</body>
</html>
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
const totalEl = (document.getElementsByClassName("swiper-slide")).length;
return '<span class="' + className + '">' + (-1*(index - totalEl)) + '</span>';
},
},
});
</script>
</body>
</html>
推荐阅读
- teradata - Teradata TPT 的数据加载失败
- python - 无法解析剩余部分:来自“forloop .counter”的“.counter”
- python - 单元测试设计和模拟
- material-ui - 在 Material-UI Datepicker 中停用当前和过去几天
- c# - 无法在 c# linq 中将可空长转换为不可空长
- azure - Azure 搜索返回不正确的结果
- validation - 是否可以在 Keras fit_generator() 的验证部分显示进度条或 ETA
- python - 当每行仅包含一个稀疏向量时,平均大量 pyspark 数据帧的所有行
- google-chrome-extension - 根据浅色或深色模式浏览器切换 Chrome 扩展图标?
- excel - 退出for循环以防止覆盖