Skip to content

Commit cbe3f65

Browse files
Sulagna-Dutta-RoySulagna-Dutta-Roy
authored
Merge pull request #221 from suryakaushik/feat-220-imageSlider
added image slideshow using css
2 parents 9fe4581 + 312d448 commit cbe3f65

File tree

1 file changed

+188
-0
lines changed

1 file changed

+188
-0
lines changed

‎ImageSlider/index.html

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<style>
7+
* {
8+
box-sizing: border-box
9+
}
10+
11+
body {
12+
font-family: Verdana, sans-serif;
13+
margin: 0
14+
}
15+
16+
.mySlides {
17+
display: none
18+
}
19+
20+
img {
21+
vertical-align: middle;
22+
}
23+
24+
/* Slideshow container */
25+
.slideshow-container {
26+
max-width: 1000px;
27+
position: relative;
28+
margin: auto;
29+
}
30+
31+
/* Next & previous buttons */
32+
.prev,
33+
.next {
34+
cursor: pointer;
35+
position: absolute;
36+
top: 50%;
37+
width: auto;
38+
padding: 16px;
39+
margin-top: -22px;
40+
color: white;
41+
font-weight: bold;
42+
font-size: 18px;
43+
transition: 0.6s ease;
44+
border-radius: 0 3px 3px 0;
45+
user-select: none;
46+
}
47+
48+
/* Position the "next button" to the right */
49+
.next {
50+
right: 0;
51+
border-radius: 3px 0 0 3px;
52+
}
53+
54+
/* On hover, add a black background color with a little bit see-through */
55+
.prev:hover,
56+
.next:hover {
57+
background-color: rgba(0, 0, 0, 0.8);
58+
}
59+
60+
/* Caption text */
61+
.text {
62+
color: #f2f2f2;
63+
font-size: 15px;
64+
padding: 8px 12px;
65+
position: absolute;
66+
bottom: 8px;
67+
width: 100%;
68+
text-align: center;
69+
}
70+
71+
/* Number text (1/3 etc) */
72+
.numbertext {
73+
color: #f2f2f2;
74+
font-size: 12px;
75+
padding: 8px 12px;
76+
position: absolute;
77+
top: 0;
78+
}
79+
80+
/* The dots/bullets/indicators */
81+
.dot {
82+
cursor: pointer;
83+
height: 15px;
84+
width: 15px;
85+
margin: 0 2px;
86+
background-color: #bbb;
87+
border-radius: 50%;
88+
display: inline-block;
89+
transition: background-color 0.6s ease;
90+
}
91+
92+
.active,
93+
.dot:hover {
94+
background-color: #717171;
95+
}
96+
97+
/* Fading animation */
98+
.fade {
99+
animation-name: fade;
100+
animation-duration: 1.5s;
101+
}
102+
103+
@keyframes fade {
104+
from {
105+
opacity: .4
106+
}
107+
108+
to {
109+
opacity: 1
110+
}
111+
}
112+
113+
/* On smaller screens, decrease text size */
114+
@media only screen and (max-width: 300px) {
115+
116+
.prev,
117+
.next,
118+
.text {
119+
font-size: 11px
120+
}
121+
}
122+
</style>
123+
</head>
124+
125+
<body>
126+
127+
<div class="slideshow-container">
128+
129+
<div class="mySlides fade">
130+
<div class="numbertext">1 / 3</div>
131+
<img src="ihttps://i.ibb.co/58Mq6Mb/slide1.jpg" style="width:100%">
132+
<div class="text">Pic1</div>
133+
</div>
134+
<div class="mySlides fade">
135+
<div class="numbertext">2 / 3</div>
136+
<img src="https://i.ibb.co/8gwwd4Q/slide2.jpg" style="width:100%">
137+
<div class="text">Pic2</div>
138+
</div>
139+
<div class="mySlides fade">
140+
<div class="numbertext">3 / 3</div>
141+
<img src="https://i.ibb.co/8r7WYJh/slide3.jpg" style="width:100%">
142+
<div class="text">Caption Three</div>
143+
</div>
144+
145+
<a class="prev" onclick="plusSlides(-1)">❮</a>
146+
<a class="next" onclick="plusSlides(1)">❯</a>
147+
148+
</div>
149+
<br>
150+
151+
<div style="text-align:center">
152+
<span class="dot" onclick="currentSlide(1)"></span>
153+
<span class="dot" onclick="currentSlide(2)"></span>
154+
<span class="dot" onclick="currentSlide(3)"></span>
155+
</div>
156+
157+
<script>
158+
let slideIndex = 1;
159+
showSlides(slideIndex);
160+
161+
function plusSlides(n) {
162+
showSlides(slideIndex += n);
163+
}
164+
165+
function currentSlide(n) {
166+
showSlides(slideIndex = n);
167+
}
168+
169+
function showSlides(n) {
170+
let i;
171+
let slides = document.getElementsByClassName("mySlides");
172+
let dots = document.getElementsByClassName("dot");
173+
if (n > slides.length) { slideIndex = 1 }
174+
if (n < 1) { slideIndex = slides.length }
175+
for (i = 0; i < slides.length; i++) {
176+
slides[i].style.display = "none";
177+
}
178+
for (i = 0; i < dots.length; i++) {
179+
dots[i].className = dots[i].className.replace(" active", "");
180+
}
181+
slides[slideIndex - 1].style.display = "block";
182+
dots[slideIndex - 1].className += " active";
183+
}
184+
</script>
185+
186+
</body>
187+
188+
</html>

0 commit comments

Comments
 (0)