:root {
--flext-carousel-color: #000;
--flext-carousel-pagination-height: 3rem;
--flext-carousel-arrow-height: 4rem;
--flext-carousel-arrow-font-size: 1.8rem;
}
.flext-carousel {
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
z-index: 1;
}
.flext-carousel-vertical .flext-carousel-wrapper {
flex-direction: column;
}
.flext-carousel-wrapper {
box-sizing: content-box;
display: flex;
height: 100%;
position: relative;
transition-property: transform;
width: 100%;
z-index: 1;
}
.flext-carousel-android .flext-slide,
.flext-carousel-wrapper {
transform: translate3d(0, 0, 0);
}
.flext-carousel-multirow .flext-carousel-wrapper {
flex-wrap: wrap;
}
.flext-carousel-multirow-column .flext-carousel-wrapper {
flex-direction: column;
flex-wrap: wrap;
}
.flext-carousel-free-mode .flext-carousel-wrapper {
margin: 0 auto;
transition-timing-function: ease-out;
}
.flext-carousel-pointer-events {
touch-action: pan-y;
}
.flext-carousel-pointer-events.flext-carousel-vertical {
touch-action: pan-x;
}
.flext-slide {
box-sizing: border-box;
flex-shrink: 0;
height: 100%;
opacity: 0;
position: relative;
transition-property: transform, opacity;
width: 100%;
}
.flext-carousel-initialized .flext-slide {
opacity: 1;
}
.flext-slide-invisible-blank {
visibility: hidden;
}
.flext-carousel-autoheight,
.flext-carousel-autoheight .flext-slide {
height: auto;
}
.flext-carousel-autoheight .flext-carousel-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.flext-carousel-css-mode .flext-carousel-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.flext-carousel-css-mode .flext-carousel-wrapper::-webkit-scrollbar {
display: none;
}
.flext-carousel-css-mode .flext-carousel-wrapper > .flext-slide {
scroll-snap-align: start start;
}
.flext-carousel-horizontal.flext-carousel-css-mode > .flext-carousel-wrapper {
scroll-snap-type: x mandatory;
}
.flext-carousel-vertical.flext-carousel-css-mode > .flext-carousel-wrapper {
scroll-snap-type: y mandatory;
} .flext-button-next,
.flext-button-prev {
align-items: center;
background: #222;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
font-size: var(--flext-carousel-arrow-font-size);
height: var(--flext-carousel-arrow-height);
justify-content: center;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s;
width: var(--flext-carousel-arrow-height);
z-index: 10;
}
.flext-carousel-initialized .flext-button-prev,
.flext-carousel-initialized .flext-button-next {
opacity: 1;
}
.flext-button-prev.flext-button-disabled,
.flext-button-next.flext-button-disabled {
cursor: default;
opacity: 0.35;
pointer-events: initial;
}
.flext-button-next::after,
.flext-button-prev::after {
font-variant: initial;
line-height: 1;
letter-spacing: 0;
text-transform: none;
}
.flext-button-prev {
left: 10px;
right: auto;
}
.flext-button-prev::after {
content: "\e912" ;
font-family: flextension, sans-serif;
}
.flext-button-next {
left: auto;
right: 10px;
}
.flext-button-next::after {
content: "\e913" ;
font-family: flextension, sans-serif;
}
.flext-button-lock {
display: none;
} .flext-pagination {
align-items: center;
display: flex;
justify-content: center;
margin: var(--flext-carousel-pagination-height) auto 0 auto;
position: relative;
text-align: center;
transition: 0.3s opacity;
width: 20rem;
z-index: 10;
}
.flext-pagination.flext-pagination-hidden {
opacity: 0;
} .flext-carousel-horizontal .flext-pagination-bullets,
.flext-pagination-custom,
.flext-pagination-fraction {
width: 100%;
}
.flext-pagination-bullets-dynamic {
font-size: 0;
overflow: hidden;
}
.flext-pagination-bullets-dynamic .flext-pagination-bullet {
position: relative;
transform: scale(0.33);
}
.flext-pagination-bullets-dynamic .flext-pagination-bullet-active {
transform: scale(1);
}
.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-main {
transform: scale(1);
}
.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-prev {
transform: scale(0.66);
}
.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-next {
transform: scale(0.66);
}
.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.flext-pagination-bullet {
cursor: pointer;
display: inline-block;
height: 3rem;
line-height: 0;
position: relative;
width: 3rem;
}
button.flext-pagination-bullet {
border: none;
box-shadow: none;
appearance: none;
margin: 0;
padding: 0;
}
.flext-pagination-bullet::before {
background: var(--flext-carousel-pagination-color);
content: "";
display: inline-block;
height: 100%;
opacity: 0.2;
transition: opacity 0.25s ease-in-out;
vertical-align: top;
width: 100%;
}
.flext-pagination-bullet:hover::before {
opacity: 0.4;
}
.flext-pagination-bullet-active::before,
.flext-pagination-bullet-active:hover::before {
opacity: 1;
}
.flext-carousel-vertical .flext-pagination-bullets {
position: absolute;
right: 1rem;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.flext-carousel-vertical .flext-pagination-bullets .flext-pagination-bullet {
display: block;
height: 3rem;
padding: 0 0.2rem;
width: 0.5rem;
}
.flext-carousel-vertical .flext-pagination-bullets.flext-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.flext-carousel-vertical .flext-pagination-bullets.flext-pagination-bullets-dynamic .flext-pagination-bullet {
display: inline-block;
transition: 0.2s transform, 0.2s top;
}
.flext-carousel-horizontal .flext-pagination-bullets .flext-pagination-bullet {
padding: 1.4rem 0;
}
.flext-carousel-horizontal .flext-pagination-bullets.flext-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.flext-carousel-horizontal .flext-pagination-bullets.flext-pagination-bullets-dynamic .flext-pagination-bullet {
transition: 0.2s transform, 0.2s left;
} .flext-pagination-fraction .flext-pagination-current {
display: inline-block;
margin-right: 1.5rem;
}
.flext-pagination-fraction .flext-pagination-separator {
background-color: var(--flext-carousel-pagination-color);
display: inline-block;
height: 0.1rem;
vertical-align: middle;
width: 2rem;
}
.flext-pagination-fraction .flext-pagination-total {
display: inline-block;
margin-left: 1.5rem;
} .flext-pagination-progressbar .flext-progressbar {
display: inline-block;
position: relative;
width: 100%;
}
.flext-carousel-horizontal .flext-pagination-progressbar .flext-progressbar,
.flext-carousel-vertical .flext-pagination-progressbar.flext-pagination-progressbar-opposite .flext-progressbar {
height: 0.4rem;
}
.flext-carousel-horizontal .flext-pagination-progressbar.flext-pagination-progressbar-opposite .flext-progressbar,
.flext-carousel-vertical .flext-pagination-progressbar .flext-progressbar {
width: 0.4rem;
}
.flext-pagination-progressbar .flext-progressbar::before {
background: var(--flext-carousel-pagination-color);
bottom: 0;
content: "";
left: 0;
opacity: 0.25;
position: absolute;
right: 0;
top: 0;
}
.flext-pagination-progressbar .flext-pagination-current {
display: inline-block;
margin-right: 1rem;
}
.rtl .flext-pagination-progressbar .flext-pagination-current {
margin-left: 1rem;
margin-right: 0;
}
.flext-pagination-progressbar .flext-pagination-total {
display: inline-block;
margin-left: 1rem;
}
.rtl .flext-pagination-progressbar .flext-pagination-total {
margin-left: 0;
margin-right: 1rem;
}
.flext-pagination-progressbar .flext-progressbar-fill {
background: var(--flext-carousel-pagination-color);
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scale(0);
transform-origin: left top;
width: 100%;
}
.flext-pagination-lock {
display: none;
} .flext-carousel-pagination.flext-carousel-horizontal .flext-button-prev,
.flext-carousel-pagination.flext-carousel-horizontal .flext-button-next {
top: calc((100% - var(--flext-carousel-pagination-height) * 2) / 2); } .flext-carousel-fade .flext-slide {
pointer-events: none;
}
.flext-carousel-fade .flext-slide-active {
pointer-events: auto;
} .flext-carousel-3d,
.flext-carousel-3d.flext-carousel-css-mode .flext-carousel-wrapper {
perspective: 1200px;
}
.flext-carousel-3d .flext-carousel-wrapper,
.flext-carousel-3d .flext-slide {
transform-style: preserve-3d;
} .flext-carousel-creative .flext-slide {
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
@media (min-width: 1024px) {
:root {
--flext-carousel-arrow-height: 5rem;
--flext-carousel-arrow-font-size: 3rem;
}
}