Skip to content

Commit cc5e417

Browse files
vltanskyvltansky
authored
feat(pagination): hide 1 dot pagination (#4786)
* feat(pagination): hide 1 dot pagination * chore: use !important * chore: use !important
1 parent ca4f6b8 commit cc5e417

File tree

4 files changed

+57
-43
lines changed

4 files changed

+57
-43
lines changed

‎playground/core/index.html

+42-43
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,48 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Swiper Playground</title>
6+
<link rel="stylesheet" href="../../build/swiper-bundle.css" />
7+
<meta name="viewport" content="width=device-width" />
8+
</head>
39

4-
<head>
5-
<meta charset="UTF-8" />
6-
<title>Swiper Playground</title>
7-
<link rel="stylesheet" href="../../build/swiper-bundle.css" />
8-
<meta name="viewport" content="width=device-width" />
9-
</head>
10+
<body>
11+
<section class="swiper-container">
12+
<div class="swiper-slide">Slide 1</div>
13+
<div class="swiper-slide">Slide 2</div>
14+
<div class="swiper-slide">Slide 3</div>
15+
<div class="swiper-slide">Slide 4</div>
16+
<div class="swiper-slide">Slide 5</div>
17+
<div class="swiper-slide">Slide 6</div>
18+
<div class="swiper-slide">Slide 7</div>
19+
<div class="swiper-slide">Slide 8</div>
20+
<div class="swiper-slide">Slide 9</div>
21+
<div class="swiper-slide">Slide 10</div>
22+
</section>
23+
<a href="#" class="append-slide">Append</a>
24+
<style>
25+
body,
26+
html {
27+
padding: 0;
28+
margin: 0;
29+
position: relative;
30+
height: 100%;
31+
}
1032

11-
<body>
12-
<section class="swiper-container">
13-
<div class="swiper-slide">Slide 1</div>
14-
<div class="swiper-slide">Slide 2</div>
15-
<div class="swiper-slide">Slide 3</div>
16-
<div class="swiper-slide">Slide 4</div>
17-
<div class="swiper-slide">Slide 5</div>
18-
<div class="swiper-slide">Slide 6</div>
19-
<div class="swiper-slide">Slide 7</div>
20-
<div class="swiper-slide">Slide 8</div>
21-
<div class="swiper-slide">Slide 9</div>
22-
<div class="swiper-slide">Slide 10</div>
23-
</section>
24-
<style>
25-
body,
26-
html {
27-
padding: 0;
28-
margin: 0;
29-
position: relative;
30-
height: 100%;
31-
}
32-
33-
.swiper-container {
34-
width: 100%;
35-
height: 300px;
36-
margin: 50px auto;
37-
}
38-
39-
.swiper-slide {
40-
background: #f1f1f1;
41-
color: #000;
42-
text-align: center;
43-
line-height: 300px;
44-
}
45-
</style>
46-
<script type="module" src="./main.js"></script>
47-
</body>
33+
.swiper-container {
34+
width: 100%;
35+
height: 300px;
36+
margin: 50px auto;
37+
}
4838

39+
.swiper-slide {
40+
background: #f1f1f1;
41+
color: #000;
42+
text-align: center;
43+
line-height: 300px;
44+
}
45+
</style>
46+
<script type="module" src="./main.js"></script>
47+
</body>
4948
</html>

‎playground/core/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,10 @@ window.swiper = new Swiper({
1919
itemRoleDescriptionMessage: 'slide',
2020
},
2121
});
22+
23+
// eslint-disable-next-line no-restricted-globals
24+
document.querySelector('.append-slide').addEventListener('click', (e) => {
25+
e.preventDefault();
26+
// eslint-disable-next-line no-restricted-globals
27+
window.swiper.appendSlide('<div class="swiper-slide">Slide</div>');
28+
});

‎src/components/pagination/pagination.less

+4
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@
7777
.swiper-pagination-clickable & {
7878
cursor: pointer;
7979
}
80+
81+
&:only-child {
82+
display: none !important;
83+
}
8084
}
8185
.swiper-pagination-bullet-active {
8286
opacity: 1;

‎src/components/pagination/pagination.scss

+4
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@
6767
.swiper-pagination-clickable & {
6868
cursor: pointer;
6969
}
70+
71+
&:only-child {
72+
display: none !important;
73+
}
7074
}
7175
.swiper-pagination-bullet-active {
7276
opacity: 1;

0 commit comments

Comments
 (0)