jquery - 如何在单个 Swiper slider 上添加多个分页

Question

我想为我的滑动 slider 添加两个分页，例如附加图像，一个将保存文本，另一个将是默认情况下在滑动 slider 中出现的点。我尝试了一些代码，但没有成功。

这是我的代码

    var menu = ['Slide 1', 'Slide 2', 'Slide 3']
    var swiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
			clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (menu[index]) + '</span>';
        },
    },
	
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

Answer 1

检查此工作片段以了解单个滑动 slider 中的多个分页。

var menu = ['Slide 1', 'Slide 2', 'Slide 3'];
var swiper = new Swiper('.swiper-container', {
	  pagination: {
		  el: '.swiper-pagination.pagination-bottom, .swiper-pagination.pagination-top',
		  clickable: true,
      renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (menu[index]) + '</span>';
      },
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
     },
    });

.swiper-container {
	width: 100%;
	height: 100%;
}
.pagination-bottom{
font-size:0px;
}

.pagination-top {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
} 
.pagination-top .swiper-pagination-bullet{
    width: auto;
    border-radius: 0px;
    height: auto;
    background-color: #fff;
    padding: 5px;
    color: #000;
    opacity: 1;
    background: rgba(0,0,0,0.2);
    }
.pagination-top .swiper-pagination-bullet-active {
	color:#fff;
	background: #007aff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
        <img src="http://placehold.it/700x500" />
        </div>
        <div class="swiper-slide">
        <img src="http://placehold.it/700x500" />
        </div>
        <div class="swiper-slide">
        <img src="http://placehold.it/700x500" />
        </div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination pagination-top"></div>
    <div class="swiper-pagination pagination-bottom"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>