How to add Multiple pagination on a single Swiper Slider

问题

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

回答1:

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>

回答2:

I've added bullet pagination manually based on the fraction pagination:

var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
            delay: 100000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-number',
            type: 'fraction',
        },
      });

      // Generate pagination bullets inside div with #bullets ID
      for (var i = 1; i < swiper.slides.length - 1; i++){
            if ( i === 1){ 
              // add active class if it is the first bullet
              $('#bullets').append('<span class="swiper-pagination-bullet' + ' ' + 'swiper-pagination-bullet-active' + ' ' + 'slide' + i + '"><p>'+ i +'</p></span>');
            } else {
              $('#bullets').append('<span class="swiper-pagination-bullet' + ' ' + 'slide' + i + '"><p>'+ i +'</p></span>');
            }         
      }

      
      // ADD ACTIVE CLASS TO THE CURRENT BULLET

      // get all bullet elements
      var bullets = $('.swiper-pagination-bullet');

      swiper.on('slideChange', function () {
        // Get current slide from fraction pagination number
        var slide = "slide"+($('.swiper-pagination-current').html());
        // Remove active class from all bullets
        bullets.removeClass("swiper-pagination-bullet-active");
        // Check each bullet element if it has slideNumber class
        $.each(bullets, function (index, value) {
          if($(this).hasClass(slide)) {
            $(this).addClass("swiper-pagination-bullet-active");
            return false;
          }
        });
      });

来源：https://stackoverflow.com/questions/53484867/how-to-add-multiple-pagination-on-a-single-swiper-slider