-
Notifications
You must be signed in to change notification settings - Fork 0
/
slider.css
33 lines (28 loc) · 1.56 KB
/
slider.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.slider-wrapper {
overflow: hidden; position: relative; /* do not add padding */
min-height: 10em; /* provide height or aspect-ratio if fade transition */
}
.slides-tape {display: flex; width: 100%; height: 100%; align-items: center; isolation: isolate; /* do not add padding */}
.animated {transition: all var(--animation-duration) ease-in-out; /* The animated class is applied by JS to the slides tape */}
.slide {flex: 0 0 100%; height: 100%; transition: inherit; /* you can add padding */}
.fade-transition .slide {position: absolute; width: 100%;}
.fade-transition .slide:not(:first-child){opacity: 0;}
.slider-button {
position: absolute; top: 50%; transform: translateY(-50%); /* Position */
cursor: pointer; font-size: 4rem; padding: 0 .25em; color: white; text-shadow: 0 0 5px #0007
}
.slider-button.previous {left: 0}
.slider-button.previous::before {content:"\2039"}
.slider-button.next {right: 0}
.slider-button.next::before {content: "\203A"}
.slide-dot-line {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; /* Position */
gap: .5em; padding: .5em; line-height: 1em; color: white; text-shadow: 0 0 5px #0007;
}
.slide-dot-line > div {cursor: pointer; transition-duration: var(--animation-duration);}
.slide-dot-line > div::before {content: "\25cb";} /* white circle */
.slide-dot-line > div.active::before {content: "\25cf";} /* black circle */
.slide-number-wrapper {
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
padding: .5em; line-height: 1em; color: white; text-shadow: 0 0 5px #0007; font-size: 1.5em;
}