I want to generate multiple paginations for one slider on the swiper.

"This is a question about ""swiper"" that creates sliders on the web."

The implementation goal is not to place multiple swippers on a single page, but
Create one swiper on one page and generate two paginations in it.

Simply

 pagination: {
　　　　el: '.swiper-pagination',
},
pagination: {
　　　　el: '.swiper-pagination-fraction',
　　　　type: 'fraction',
},

If you write these two things, only the ones with the design below were generated.

What do you want to know? ①Can multiple paginations be generated for a single swiper in the first place?
　Also, I would like to know how to do it.
②Other possible implementations if not
　(If you operate the current with realIndex, you can make it from scratch, but I prefer the simplest and least man-hour method possible>)

"I asked the official website and Google teacher about ""swiper pagination multiple"", but I only saw the question of installing multiple swippers on one page, so I couldn't solve it myself, so I asked you a question."

I look forward to hearing from you.

jquery swiper

2022-09-30 21:39

1 Answers

You can have multiple pages.

Simply, you can increase the div of a pageation by replicating it (<div class="swiper-pagination"></div>) and adjusting the position with css.

If you want to express something complicated, use the Swiper API to customize it.

adding
Using the Events callback in Swiper API, you can add (new) the original page by writing a script to the original design.
Events Callback Configuration Example

swiper2 = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'progressbar',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {
        init:function(){
          // Initial processing
          var li = $("#p2li");
          li.removeClass("act1");
          li.eq(p2[ss_array[0]]).addClass("act1");
        },
        slideChangeTransitionStart: function() {
          // What to do when the slider changes
          var act = this;
          varindex=act.activeIndex;
          var li = $("#p2li");
          li.removeClass("act1");
          li.eq (p2[ss_array [index])]).addClass("act1");
        }
      }
});

The following code was added to the Swiper 4.5.0 demo 050-pagination-progress.html in the snippet.

$(function(){
  varp2={"A":"0", "B":"1", "C":"2", "D":"3", "E":"4", "F":"5", "G":"6", "H":"7", "I":"8", "J":"9";

  vars=$(".swiper-slide";
  vars_array = Array;
  ss2_array=Array;
  for (key ins) {
    ss_array[key] = ss.eq(key).attr("ss");
    ss2_array [ss.eq(key).attr("ss")] = key;
  }

     swiper2 = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        init:function(){
          /*Initial processing*/
          var li = $("#p2li");
          li.removeClass("act1");
          li.eq(p2[ss_array[0]]).addClass("act1");
        },
        slideChangeTransitionStart: function() {
          /* What to do when the slider changes*/
          var act = this;
          varindex=act.activeIndex;
          var li = $("#p2li");
          li.removeClass("act1");
          li.eq (p2[ss_array [index])]).addClass("act1");
        }
      }
    });
});

html,body{
      position:relative;
      height —100%;
    }
    body{
      background: #eee;
      font-family —Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin:0;
      padding:0;
    }
    US>.swiper-container {
      width: 100%;
/*      height —100%;*/
    }
    .swiper-slide {
      text-align:center;
      font-size: 18px;
      background: #ffff;

      /* Center slide text vertically*/
      display:-webkit-box;
      display:-ms-flexbox;
      display :- webkit-flex;
      display:flex;
      - webkit-box-pack:center;
      -ms-flex-pack:center;
      - webkit-justify-content:center;
      justify-content:center;
      - webkit-box-align:center;
      -ms-flex-align:center;
      - webkit-align-items:center;
      align-items:center;
    }
    .act1{
      color:#2C8DFB;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <metacharset="utf-8">
  <title>Swiper demo</title>
  <!--Link Swiper's CSS-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
  <!--Demo styles-->
  <style>

  </style>
</head>
<body>
<div>
<ulid="p2">
  <lionclick="swiper2.slideTo(ss2_array['A'])">A</li>
  <lionclick="swiper2.slideTo(ss2_array['B'])">B</li>
  <lionclick="swiper2.slideTo(ss2_array['C'])">C</li>
  <lionclick="swiper2.slideTo(ss2_array['D'])">D</li>
  <lionclick="swiper2.slideTo(ss2_array['E'])">E</li>
  <lionclick="swiper2.slideTo(ss2_array['F'])">F</li>
  <lionclick="swiper2.slideTo(ss2_array['G'])">G</li>
  <lionclick="swiper2.slideTo(ss2_array['H'])">H</li>
  <lionclick="swiper2.slideTo(ss2_array['I'])">I</li>
  <lionclick="swiper2.slideTo(ss2_array['J'])">J</li>
</ul>
</div>
  <!--Swiper-->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"ss="J">Slide J</div>
      <div class="swiper-slide"ss="H">Slide H</div>
      <div class="swiper-slide"ss="F">Slide F</div>
      <div class="swiper-slide"ss="D">Slide D</div>
      <div class="swiper-slide"ss="I">Slide I</div>
      <div class="swiper-slide"ss="C">Slide C</div>
      <div class="swiper-slide"ss="A">Slide A</div>
      <div class="swiper-slide"ss="G">Slide G</div>
      <div class="swiper-slide"ss="B">Slide B</div>
      <div class="swiper-slide"ss="E">Slide E</div>
    </div>
    <!--Add Pagination-->
    <div class="swiper-pagination"></div>
    <!--Add Arrows-->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <!--Swiper JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

  <!--Initialize Swiper-->
  <script>

  </script>
</body>
</html>

2022-09-30 21:39

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656