Skip to content

Commit d51be56

Browse files
aayush105aayush105
authored
Merge pull request you-dont-need#760 from Shamli-Singh-Yadav/updating-carousel-1.html
Updating carousel 1.html
2 parents 43c1e48 + 8041450 commit d51be56

File tree

4 files changed

+167
-174
lines changed

4 files changed

+167
-174
lines changed

‎misc/carousel-1.html‎

Lines changed: 167 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,175 +1,168 @@
1-
<!DOCTYPE html>
2-
<html class="no-js" lang="">
3-
<head>
4-
<meta http-equiv="x-ua-compatible" content="IE=edge">
5-
<meta charset="utf-8">
6-
<title>Carousel Demo</title>
7-
<meta name="description" content="Despite all that Javascript is capable of, it is frequently employed. Here are some things you can accomplish without Javascript. Using HTML and CSS, which are surprisingly impressive on their own.">
8-
<meta name="viewport" content="width=device-width, initial-scale=1">
9-
<style type="text/css">
10-
11-
/* CSS styles for the carousel */
12-
html, body {
13-
margin: 0px;
14-
padding: 0px;
15-
background-color: #774936;
16-
}
17-
18-
.carousel {
19-
position: relative;
20-
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
21-
margin-top: 26px;
22-
}
23-
24-
.carousel-inner {
25-
position: relative;
26-
overflow: hidden;
27-
width: 100%;
28-
}
29-
30-
.carousel-open:checked + .carousel-item {
31-
position: static;
32-
opacity: 100;
33-
}
34-
35-
.carousel-item {
36-
position: absolute;
37-
opacity: 0;
38-
-webkit-transition: opacity 0.6s ease-out;
39-
transition: opacity 0.6s ease-out;
40-
}
41-
42-
.carousel-item img {
43-
display: block;
44-
height: auto;
45-
max-width: 100%;
46-
}
47-
48-
.carousel-control {
49-
background: #F4EEEA;
50-
border-radius: 50%;
51-
color: #fff;
52-
cursor: pointer;
53-
display: none;
54-
font-size: 40px;
55-
height: 40px;
56-
line-height: 35px;
57-
position: absolute;
58-
top: 50%;
59-
-webkit-transform: translate(0, -50%);
60-
cursor: pointer;
61-
-ms-transform: translate(0, -50%);
62-
transform: translate(0, -50%);
63-
text-align: center;
64-
width: 40px;
65-
z-index: 10;
66-
}
67-
68-
.carousel-control.prev {
69-
left: 2%;
70-
}
71-
72-
.carousel-control.next {
73-
right: 2%;
74-
}
75-
76-
.carousel-control:hover {
77-
background: rgba(0, 0, 0, 0.8);
78-
color: #aaaaaa;
79-
}
80-
81-
#carousel-1:checked ~ .control-1,
82-
#carousel-2:checked ~ .control-2,
83-
#carousel-3:checked ~ .control-3 {
84-
display: block;
85-
}
86-
87-
.carousel-indicators {
88-
list-style: none;
89-
margin: 0;
90-
padding: 0;
91-
position: absolute;
92-
bottom: 2%;
93-
left: 0;
94-
right: 0;
95-
text-align: center;
96-
z-index: 10;
97-
}
98-
99-
.carousel-indicators li {
100-
display: inline-block;
101-
margin: 0 5px;
102-
}
103-
104-
.carousel-bullet {
105-
color: #fff;
106-
cursor: pointer;
107-
display: block;
108-
font-size: 55px;
109-
}
110-
111-
.carousel-bullet:hover {
112-
color: #333;
113-
}
114-
115-
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
116-
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
117-
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
118-
color: #333;
119-
}
120-
121-
#title {
122-
width: 100%;
123-
position: absolute;
124-
padding: 0px;
125-
margin: 0px auto;
126-
text-align: center;
127-
font-size: 27px;
128-
color: rgba(255, 255, 255, 1);
129-
font-family: 'Open Sans', sans-serif;
130-
z-index: 9999;
131-
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
132-
}
133-
</style>
134-
135-
</head>
136-
<body>
137-
<!--[if lt IE 8]>
138-
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
139-
<![endif]-->
140-
141-
<div class="carousel">
142-
<div class="carousel-inner">
143-
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
144-
<div class="carousel-item">
145-
<img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
146-
</div>
147-
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
148-
<div class="carousel-item">
149-
<img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
150-
</div>
151-
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
152-
<div class="carousel-item">
153-
<img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
154-
</div>
155-
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
156-
<label for="carousel-2" class="carousel-control next control-1">›</label>
157-
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
158-
<label for="carousel-3" class="carousel-control next control-2">›</label>
159-
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
160-
<label for="carousel-1" class="carousel-control next control-3">›</label>
161-
<ol class="carousel-indicators">
162-
<li>
163-
<label for="carousel-1" class="carousel-bullet">•</label>
164-
</li>
165-
<li>
166-
<label for="carousel-2" class="carousel-bullet">•</label>
167-
</li>
168-
<li>
169-
<label for="carousel-3" class="carousel-bullet">•</label>
170-
</li>
171-
</ol>
172-
</div>
173-
</div>
174-
</body>
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>Image Carousel</title>
7+
<style>
8+
:root {
9+
--control-bg: rgba(255,255,255,0.8);
10+
--control-fg: #333;
11+
--active-color: #ff9800;
12+
}
13+
body {
14+
margin: 0;
15+
background: #222;
16+
font-family: sans-serif;
17+
display: flex;
18+
justify-content: center;
19+
padding: 40px 0;
20+
}
21+
22+
.carousel {
23+
position: relative;
24+
width: 90%;
25+
max-width: 1000px;
26+
overflow: hidden;
27+
border-radius: 12px;
28+
box-shadow: 0 6px 20px rgba(0,0,0,0.6);
29+
}
30+
31+
/* hide radios */
32+
.carousel input {
33+
display: none;
34+
}
35+
36+
/* slides */
37+
.carousel-item {
38+
position: absolute;
39+
inset: 0;
40+
opacity: 0;
41+
transition: opacity .6s ease;
42+
}
43+
.carousel-item img {
44+
width: 100%;
45+
height: auto;
46+
display: block;
47+
}
48+
49+
/* visible slide */
50+
.carousel input:checked + .carousel-item {
51+
position: relative;
52+
opacity: 1;
53+
z-index: 1;
54+
}
55+
56+
/* controls */
57+
.control {
58+
position: absolute;
59+
top: 50%;
60+
transform: translateY(-50%);
61+
width: 44px;
62+
height: 44px;
63+
border-radius: 50%;
64+
background: var(--control-bg);
65+
color: var(--control-fg);
66+
font-size: 28px;
67+
line-height: 44px;
68+
text-align: center;
69+
cursor: pointer;
70+
user-select: none;
71+
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
72+
display: none;
73+
z-index: 2;
74+
}
75+
.control:hover {
76+
background: var(--control-fg);
77+
color: #fff;
78+
}
79+
.control.prev { left: 12px; }
80+
.control.next { right: 12px; }
81+
82+
/* show only relevant controls */
83+
#s1:checked ~ .control-1,
84+
#s2:checked ~ .control-2,
85+
#s3:checked ~ .control-3 {
86+
display: block;
87+
}
88+
89+
/* indicators */
90+
.indicators {
91+
position: absolute;
92+
bottom: 14px;
93+
left: 0;
94+
right: 0;
95+
text-align: center;
96+
z-index: 3;
97+
}
98+
.indicators label {
99+
display: inline-block;
100+
width: 14px;
101+
height: 14px;
102+
margin: 0 6px;
103+
border-radius: 50%;
104+
background: rgba(255,255,255,0.6);
105+
cursor: pointer;
106+
transition: transform .3s, background .3s;
107+
}
108+
.indicators label:hover {
109+
transform: scale(1.2);
110+
}
111+
112+
/* active indicator */
113+
#s1:checked ~ .indicators label[for="s1"],
114+
#s2:checked ~ .indicators label[for="s2"],
115+
#s3:checked ~ .indicators label[for="s3"] {
116+
background: var(--active-color);
117+
transform: scale(1.3);
118+
}
119+
120+
.carousel-item img {
121+
width: 100%;
122+
height: 500px;
123+
object-fit: cover;
124+
display: block;
125+
}
126+
127+
</style>
128+
</head>
129+
<body>
130+
<div class="carousel">
131+
132+
<!-- Slide 1 -->
133+
<input type="radio" id="s1" name="slider" checked>
134+
<div class="carousel-item">
135+
<img src="pics/1.jpg" alt="Image 1">
136+
</div>
137+
138+
<!-- Slide 2 -->
139+
<input type="radio" id="s2" name="slider">
140+
<div class="carousel-item">
141+
<img src="pics/2.jpg" alt="Image 2">
142+
</div>
143+
144+
<!-- Slide 3 -->
145+
<input type="radio" id="s3" name="slider">
146+
<div class="carousel-item">
147+
<img src="pics/3.jpg" alt="Image 3">
148+
</div>
149+
150+
<!-- Controls -->
151+
<label for="s3" class="control prev control-1">‹</label>
152+
<label for="s2" class="control next control-1">›</label>
153+
154+
<label for="s1" class="control prev control-2">‹</label>
155+
<label for="s3" class="control next control-2">›</label>
156+
157+
<label for="s2" class="control prev control-3">‹</label>
158+
<label for="s1" class="control next control-3">›</label>
159+
160+
<!-- Indicators -->
161+
<div class="indicators">
162+
<label for="s1"></label>
163+
<label for="s2"></label>
164+
<label for="s3"></label>
165+
</div>
166+
</div>
167+
</body>
175168
</html>

‎misc/pics/1.jpg‎

7.41 KB
Loading

‎misc/pics/2.jpg‎

7.68 KB
Loading

‎misc/pics/3.jpg‎

7.61 KB
Loading

0 commit comments

Comments
 (0)