如何在单个 Swiper Slider 上添加多个分页 [英] How to add Multiple pagination on a single Swiper Slider

查看：31
本文介绍了如何在单个 Swiper Slider 上添加多个分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想为我的 swiper 滑块添加两个分页，类似于附加图像，一个将保存文本，另一个将是 swiper 滑块中默认出现的点.我尝试了一些代码，但没有用.

这是我的代码

 var menu = ['Slide 1', 'Slide 2', 'Slide 3']var swiper = new Swiper('.swiper-container', {分页:{el: '.swiper-分页',可点击:真实，renderBullet:函数(索引，类名){return ''+ (menu[index]) + '';},},导航: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});

解决方案

检查此工作片段以了解单个滑动条滑块中的多个分页.

var menu = ['Slide 1', 'Slide 2', 'Slide 3'];var swiper = new Swiper('.swiper-container', {分页:{el: '.swiper-pagination.pagination-bottom, .swiper-pagination.pagination-top',可点击:真实，renderBullet:函数(索引，类名){return ''+ (menu[index]) + '';},},导航: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});

.swiper-container {宽度:100%；高度:100%；}.分页底部{字体大小:0px;}.分页顶部{位置:绝对；顶部:10px；右:10px；边距:0；}.pagination-top .swiper-pagination-bullet{宽度:自动；边界半径:0px；高度:自动；背景颜色:#fff;填充:5px；颜色:#000；不透明度:1；背景:RGBA(0,0,0,0.2)；}.pagination-top .swiper-pagination-bullet-active {颜色:#fff;背景:#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"/><!-- 滑块主容器--><div class="swiper-container"><!-- 额外需要的包装器--><div class="swiper-wrapper"><!-- 幻灯片 --><div class="swiper-slide"><img src="http://placehold.it/700x500"/>

<div class="swiper-slide"><img src="http://placehold.it/700x500"/>

<div class="swiper-slide"><img src="http://placehold.it/700x500"/>

...

<!-- 如果我们需要分页--><div class="swiper-pagination pagination-top"></div><div class="swiper-pagination pagination-bottom"></div><!-- 如果我们需要导航按钮--><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>

I would like to add two pagination for my swiper slider, something like attached image, one will hold text and another will be dot which comes by default in swiper slider. I tried some code but that did not work.

Here is my code

    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',
      },
    });

解决方案

Check this working snippet for Multiple paginations in a single swiper 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>

这篇关于如何在单个 Swiper Slider 上添加多个分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆