feat(pagination): hide 1 dot pagination (#4786)

* feat(pagination): hide 1 dot pagination * chore: use !important * chore: use !important
nolimits4web · Jul 26, 2021 · cc5e417 · cc5e417
1 parent ca4f6b8
commit cc5e417
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 43 deletions.
diff --git a/playground/core/index.html b/playground/core/index.html
@@ -1,49 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Swiper Playground</title>
+    <link rel="stylesheet" href="../../build/swiper-bundle.css" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <title>Swiper Playground</title>
-  <link rel="stylesheet" href="../../build/swiper-bundle.css" />
-  <meta name="viewport" content="width=device-width" />
-</head>
+  <body>
+    <section class="swiper-container">
+      <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>
+    </section>
+    <a href="#" class="append-slide">Append</a>
+    <style>
+      body,
+      html {
+        padding: 0;
+        margin: 0;
+        position: relative;
+        height: 100%;
+      }
 
-<body>
-  <section class="swiper-container">
-    <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>
-  </section>
-  <style>
-    body,
-    html {
-      padding: 0;
-      margin: 0;
-      position: relative;
-      height: 100%;
-    }
-
-    .swiper-container {
-      width: 100%;
-      height: 300px;
-      margin: 50px auto;
-    }
-
-    .swiper-slide {
-      background: #f1f1f1;
-      color: #000;
-      text-align: center;
-      line-height: 300px;
-    }
-  </style>
-  <script type="module" src="./main.js"></script>
-</body>
+      .swiper-container {
+        width: 100%;
+        height: 300px;
+        margin: 50px auto;
+      }
 
+      .swiper-slide {
+        background: #f1f1f1;
+        color: #000;
+        text-align: center;
+        line-height: 300px;
+      }
+    </style>
+    <script type="module" src="./main.js"></script>
+  </body>
 </html>
diff --git a/playground/core/main.js b/playground/core/main.js
@@ -19,3 +19,10 @@ window.swiper = new Swiper({
     itemRoleDescriptionMessage: 'slide',
   },
 });
+
+// eslint-disable-next-line no-restricted-globals
+document.querySelector('.append-slide').addEventListener('click', (e) => {
+  e.preventDefault();
+  // eslint-disable-next-line no-restricted-globals
+  window.swiper.appendSlide('<div class="swiper-slide">Slide</div>');
+});
diff --git a/src/components/pagination/pagination.less b/src/components/pagination/pagination.less
@@ -77,6 +77,10 @@
   .swiper-pagination-clickable & {
     cursor: pointer;
   }
+
+  &:only-child {
+    display: none !important;
+  }
 }
 .swiper-pagination-bullet-active {
   opacity: 1;

diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
@@ -67,6 +67,10 @@
   .swiper-pagination-clickable & {
     cursor: pointer;
   }
+
+  &:only-child {
+    display: none !important;
+  }
 }
 .swiper-pagination-bullet-active {
   opacity: 1;