Skip to content

Commit

Permalink
feat(pagination): keep pagination styles when it is outside of container
Browse files Browse the repository at this point in the history 
fixes #3736
  • Loading branch information
@nolimits4web
nolimits4web committed Aug 9, 2021
1 parent 95592a8 commit 1b11429
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 64 deletions.
4 changes: 4 additions & 0 deletions src/modules/pagination/pagination.js
View file
Expand Up @@ -29,6 +29,8 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
progressbarOppositeClass: `${pfx}-progressbar-opposite`,
clickableClass: `${pfx}-clickable`,
lockClass: `${pfx}-lock`,
horizontalClass: `${pfx}-horizontal`,
verticalClass: `${pfx}-vertical`,
},
});

Expand Down Expand Up @@ -290,6 +292,7 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
}

$el.addClass(params.modifierClass + params.type);
$el.addClass(params.modifierClass + swiper.params.direction);

if (params.type === 'bullets' && params.dynamicBullets) {
$el.addClass(`${params.modifierClass}${params.type}-dynamic`);
Expand Down Expand Up @@ -327,6 +330,7 @@ export default function Pagination({ swiper, extendParams, on, emit }) {

$el.removeClass(params.hiddenClass);
$el.removeClass(params.modifierClass + params.type);
$el.removeClass(params.modifierClass + swiper.params.direction);
if (swiper.pagination.bullets) swiper.pagination.bullets.removeClass(params.bulletActiveClass);
if (params.clickable) {
$el.off('click', classesToSelector(params.bulletClass));
Expand Down
69 changes: 37 additions & 32 deletions src/modules/pagination/pagination.less
View file
Expand Up @@ -16,7 +16,8 @@
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 10px;
left: 0;
width: 100%;
Expand Down Expand Up @@ -75,44 +76,44 @@
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-container-vertical {
> .swiper-pagination-bullets {
right: 10px;
.swiper-container-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0);
.swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
&.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translate3d(0px, -50%, 0);
transform: translateY(-50%);
width: 8px;
.swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
&.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
.swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
display: inline-block;
transition: 200ms transform, 200ms top;
}
}
}
.swiper-container-horizontal {
> .swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
.swiper-pagination-bullet {
margin: 0 4px;
}
&.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
.swiper-pagination-bullet {
margin: 0 4px;
transition: 200ms transform, 200ms left;
}
&.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
.swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
}
}
&.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
}
.swiper-container-horizontal.swiper-container-rtl
> .swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
Expand All @@ -131,14 +132,18 @@
transform-origin: right top;
}
.swiper-container-horizontal > &,
.swiper-container-vertical > &.swiper-pagination-progressbar-opposite {
&.swiper-pagination-horizontal,
.swiper-container-vertical > &.swiper-pagination-progressbar-opposite,
&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > &,
.swiper-container-horizontal > &.swiper-pagination-progressbar-opposite {
&.swiper-pagination-vertical,
.swiper-container-horizontal > &.swiper-pagination-progressbar-opposite,
&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
Expand Down
69 changes: 37 additions & 32 deletions src/modules/pagination/pagination.scss
View file
Expand Up @@ -18,7 +18,8 @@
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 10px;
left: 0;
width: 100%;
Expand Down Expand Up @@ -77,44 +78,44 @@
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-container-vertical {
> .swiper-pagination-bullets {
right: 10px;
.swiper-container-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0);
.swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
&.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translate3d(0px, -50%, 0);
transform: translateY(-50%);
width: 8px;
.swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
&.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
.swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
display: inline-block;
transition: 200ms transform, 200ms top;
}
}
}
.swiper-container-horizontal {
> .swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
.swiper-pagination-bullet {
margin: 0 4px;
}
&.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
.swiper-pagination-bullet {
margin: 0 4px;
transition: 200ms transform, 200ms left;
}
&.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
.swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
}
}
&.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
}
.swiper-container-horizontal.swiper-container-rtl
> .swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
Expand All @@ -133,14 +134,18 @@
transform-origin: right top;
}
.swiper-container-horizontal > &,
.swiper-container-vertical > &.swiper-pagination-progressbar-opposite {
&.swiper-pagination-horizontal,
.swiper-container-vertical > &.swiper-pagination-progressbar-opposite,
&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > &,
.swiper-container-horizontal > &.swiper-pagination-progressbar-opposite {
&.swiper-pagination-vertical,
.swiper-container-horizontal > &.swiper-pagination-progressbar-opposite,
&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
Expand Down
14 changes: 14 additions & 0 deletions src/types/modules/pagination.d.ts
View file
Expand Up @@ -268,4 +268,18 @@ export interface PaginationOptions {
* @default 'swiper-pagination-lock'
*/
lockClass?: string;

/**
* CSS class name set to pagination in horizontal Swiper
*
* @default 'swiper-pagination-horizontal'
*/
horizontalClass?: string;

/**
* CSS class name set to pagination in vertical Swiper
*
* @default 'swiper-pagination-vertical'
*/
verticalClass?: string;
}

0 comments on commit 1b11429

Please sign in to comment.