Skip to content

Commit 47e6bd6

Browse files
zvizvizvizvi
committed
ImageSlider component
1 parent ff07c0a commit 47e6bd6

4 files changed

Lines changed: 263 additions & 1 deletion

File tree

‎dist/cssonly.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/image-slider/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Cssonly Image slider</title>
6+
<meta charset="UTF-8" />
7+
<link rel="stylesheet" href="./style.scss">
8+
</head>
9+
10+
<body>
11+
<link type="text/css" rel="stylesheet" href="/dist/cssonly.css" />
12+
13+
<div id="app" style="text-align: center;">
14+
<div class="cssonly-slider">
15+
<input type="radio" checked name="cssonly-slider" id="slide-1" />
16+
<input type="radio" name="cssonly-slider" id="slide-2" />
17+
<input type="radio" name="cssonly-slider" id="slide-3" />
18+
<input type="radio" name="cssonly-slider" id="slide-4" />
19+
<div class="slides-wrapper">
20+
<div class="slides">
21+
<div class="slide">
22+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Nature-View.jpg/640px-Nature-View.jpg" alt="" srcset="">
23+
</div>
24+
<div class="slide">
25+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Part_of_the_view_on_Qinling_mountains.jpg/640px-Part_of_the_view_on_Qinling_mountains.jpg" alt="" srcset="">
26+
</div>
27+
<div class="slide">
28+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Krabi_beach_view_-_panoramio.jpg/640px-Krabi_beach_view_-_panoramio.jpg" alt="" srcset="">
29+
</div>
30+
<div class="slide">
31+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Eilat_night_hotels_2016.jpg/640px-Eilat_night_hotels_2016.jpg" alt="" srcset="">
32+
</div>
33+
</div>
34+
</div>
35+
<!-- Optional slider arrows -->
36+
<div class="prev-arrows">
37+
<label class="prev-arrow" for="slide-1"></label>
38+
<label class="prev-arrow" for="slide-2"></label>
39+
<label class="prev-arrow" for="slide-3"></label>
40+
<label class="prev-arrow" for="slide-4"></label>
41+
</div>
42+
<div class="next-arrows">
43+
<label class="next-arrow" for="slide-1"></label>
44+
<label class="next-arrow" for="slide-2"></label>
45+
<label class="next-arrow" for="slide-3"></label>
46+
<label class="next-arrow" for="slide-4"></label>
47+
</div>
48+
<!-- end -->
49+
50+
<!-- Optional slider tracks -->
51+
<div class="tracks">
52+
<label for="slide-1"></label>
53+
<label for="slide-2"></label>
54+
<label for="slide-3"></label>
55+
<label for="slide-4"></label>
56+
</div>
57+
<!-- end -->
58+
</div>
59+
</div>
60+
</div>
61+
</body>
62+
63+
</html>

‎src/image-slider/style.scss‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
.cssonly-slider {
2+
--width: 500px;
3+
--height: 300px;
4+
position: relative;
5+
width: var(--width);
6+
height: var(--height);
7+
margin: auto;
8+
9+
input[type=radio] {
10+
display: none;
11+
}
12+
13+
.slides-wrapper {
14+
height: 100%;
15+
width: 100%;
16+
overflow: hidden;
17+
}
18+
19+
.slides {
20+
display: inline-flex;
21+
flex-wrap: nowrap;
22+
min-width: 100%;
23+
height: 100%;
24+
transition: transform 0.3s ease-in-out;
25+
// animation: cssonlySlider 8s linear infinite;
26+
// animation-timing-function: steps(4, jump-none);
27+
// animation-play-state: paused;
28+
}
29+
30+
.slide {
31+
width: var(--width);
32+
user-select: none;
33+
34+
img {
35+
width: 100%;
36+
height: 100%;
37+
object-fit: cover;
38+
background-size: cover;
39+
background-position: center;
40+
background-repeat: no-repeat;
41+
transition: all 1s ease;
42+
overflow: hidden;
43+
}
44+
}
45+
46+
.prev-arrows,
47+
.next-arrows {
48+
label {
49+
&::before {
50+
color: #aaa;
51+
font-size: 30px;
52+
position: absolute;
53+
top: 50%;
54+
margin-top: -10px;
55+
height: 20px;
56+
width: 20px;
57+
text-align: center;
58+
line-height: 15px;
59+
z-index: 1;
60+
cursor: pointer;
61+
}
62+
63+
&:hover::before {
64+
color: #888;
65+
}
66+
}
67+
}
68+
69+
.prev-arrows label::before {
70+
content: "❮";
71+
left: -30px;
72+
}
73+
74+
.next-arrows label {
75+
&::before {
76+
content: "❯";
77+
right: -30px;
78+
}
79+
80+
&:first-of-type {
81+
&::before {
82+
z-index: 2;
83+
}
84+
}
85+
}
86+
87+
input:checked {
88+
~ .slides-wrapper .slides {
89+
transform: translateX(calc(var(--width) * (1 - var(--selected-slide))));
90+
}
91+
}
92+
93+
@for $i from 1 through 20 {
94+
input:nth-of-type(#{$i}) {
95+
~ * {
96+
--slides-number: #{$i};
97+
}
98+
99+
&:checked {
100+
~ .slides-wrapper {
101+
--selected-slide: #{$i};
102+
}
103+
104+
~ .prev-arrows {
105+
label:nth-of-type(#{$i - 1})::before {
106+
z-index: 2;
107+
}
108+
}
109+
110+
~ .next-arrows {
111+
label:nth-of-type(#{$i + 1})::before {
112+
z-index: 2;
113+
}
114+
}
115+
116+
~ .tracks label:nth-of-type(#{$i}) {
117+
&::after {
118+
transform: translate(-50%, -50%) scale(1, 1);
119+
opacity: 1;
120+
}
121+
}
122+
}
123+
}
124+
}
125+
126+
.tracks {
127+
position: absolute;
128+
bottom: 8px;
129+
left: 0;
130+
width: 100%;
131+
height: 20px;
132+
display: flex;
133+
align-items: center;
134+
justify-content: center;
135+
z-index: 1;
136+
opacity: 0.9;
137+
138+
label {
139+
position: relative;
140+
display: inline-block;
141+
width: 12px;
142+
height: 12px;
143+
border-radius: 50%;
144+
border: 2px solid #fff;
145+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
146+
margin-right: 6px;
147+
cursor: pointer;
148+
transition: opacity 0.2s;
149+
150+
&:last-child {
151+
margin-right: 0;
152+
}
153+
154+
&:hover {
155+
opacity: 0.8;
156+
}
157+
158+
&::after {
159+
content: "";
160+
position: absolute;
161+
top: 50%;
162+
left: 50%;
163+
transform: translate(-50%, -50%) scale(0, 0);
164+
width: 75%;
165+
height: 75%;
166+
border-radius: 50%;
167+
background-color: #fff;
168+
opacity: 0;
169+
transition: transform 0.3s;
170+
}
171+
// width: 8px;
172+
// height: 8px;
173+
// border: solid 1px #fff;
174+
// border-radius: 50%;
175+
// margin: 0 2px;
176+
// cursor: pointer;
177+
// box-shadow: 0 0 1px #aaa;
178+
}
179+
}
180+
}
181+
182+
@keyframes cssonlySlider {
183+
0% {
184+
transform: translateX(0);
185+
}
186+
187+
25% {
188+
transform: translateX(calc(var(--width) * -1));
189+
}
190+
191+
50% {
192+
transform: translateX(calc(var(--width) * -2));
193+
}
194+
195+
75% {
196+
transform: translateX(calc(var(--width) * -3));
197+
}
198+
}

‎src/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// @import './collapse/style.scss';
33
@import './dropdown/style.scss';
44
@import './image-comparison/style.scss';
5+
@import './image-slider/style.scss';
56
@import './modal/style.scss';
67
// @import './popover/style.scss';
78
@import './rating/style.scss';

0 commit comments

Comments
 (0)