Skip to content

Commit 1dbd0f1

Browse files
author
guldus98
committed
html, css and js
1 parent 3bb73ef commit 1dbd0f1

File tree

3 files changed

+309
-0
lines changed

3 files changed

+309
-0
lines changed

‎Image Slider/Image Slider.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');
2+
body, html {
3+
padding: 0;
4+
margin: 0;
5+
background: #ececec;
6+
display: flex;
7+
height: 100vh;
8+
justify-content: center;
9+
align-items: center;
10+
}
11+
.picContainer {
12+
position: relative;
13+
width: 650px;
14+
height: 400px;
15+
border: 5px solid #262626;
16+
background: black;
17+
border-radius: 10px;
18+
box-shadow: 0px 50px 100px #262626;
19+
}
20+
img {
21+
width: 650px;
22+
height: 400px;
23+
transition: 1s;
24+
}
25+
.img {
26+
width: 650px;
27+
height: 400px;
28+
position: absolute;
29+
z-index: 0;
30+
transition: 1s;
31+
}
32+
.right {
33+
position: absolute;
34+
height: 100%;
35+
width: 60px;
36+
z-index: 99;
37+
cursor: pointer;
38+
color: #fff;
39+
transition: 1s;
40+
right:0;
41+
top:0;
42+
}
43+
.right:hover{
44+
background: rgba(0, 0, 0, 0.25)
45+
}
46+
.right:before{
47+
font-family: "Font Awesome 5 Free";
48+
font-weight: 900;
49+
content: "\f105";
50+
font-size: 50px;
51+
position: absolute;
52+
right: 0;
53+
top: 50%;
54+
transform: translateY(-50%) scale(0.75);
55+
margin-right: 10px;
56+
transition: .5s;
57+
}
58+
.right:hover:before{
59+
transform: translateY(-50%) scale(1);
60+
}
61+
.left {
62+
position: relative;
63+
height: 100%;
64+
width: 60px;
65+
z-index: 99;
66+
cursor: pointer;
67+
color: #fff;
68+
transition: 1s;
69+
}
70+
.left:hover{
71+
background: rgba(0, 0, 0, 0.25)
72+
}
73+
.left:before{
74+
font-family: "Font Awesome 5 Free";
75+
font-weight: 900;
76+
content: "\f104";
77+
font-size: 50px;
78+
position: absolute;
79+
left: 0;
80+
top: 50%;
81+
transform: translateY(-50%) scale(0.75);
82+
margin-left: 10px;
83+
transition: .5s;
84+
}
85+
.left:hover:before{
86+
transform: translateY(-50%) scale(1);
87+
}
88+
input{
89+
position: absolute;
90+
top: 0;
91+
left: -200px;
92+
}
93+
h2 {
94+
position: absolute;
95+
color: rgba(0, 0, 0, 0.75);
96+
top: -160px;
97+
left: 55%;
98+
transform: translateX(-50%);
99+
font-family: 'Fira Sans', sans-serif;
100+
font-size: 36px;
101+
width: 70%;
102+
}
103+
.dot{
104+
position: absolute;
105+
bottom: 10px;
106+
left: 50%;
107+
transform: translateX(-50%);
108+
width: 10px;
109+
height: 10px;
110+
z-index: 99;
111+
background: #333;
112+
border-radius: 50%;
113+
cursor: pointer;
114+
transition: .5s;
115+
box-shadow: 0px 0px 5px #fff;
116+
}
117+
.dot.a1{margin-left:-30px}
118+
.dot.a2{margin-left:-10px}
119+
.dot.a3{margin-left:10px}
120+
.dot.a4{margin-left:30px}
121+
.dot.a1:hover{background:#fff}
122+
.dot.a2:hover{background:#fff}
123+
.dot.a3:hover{background:#fff}
124+
.dot.a4:hover{background:#fff}
125+
126+
#info {
127+
position: absolute;
128+
top: -65px;
129+
left: 50%;
130+
transform: translateX(-50%);
131+
font-family: 'Fira Sans', sans-serif;
132+
font-size: 25px;
133+
color: rgba(0, 0, 0, 0.75);
134+
}

‎Image Slider/Image Slider.html

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>page</title>
7+
<link rel="stylesheet" type="text/css" href="Image Slider.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10+
</head>
11+
<body>
12+
13+
14+
15+
<div class="picContainer">
16+
<h2>JavaScript Image Slider</h2>
17+
<div id="info"></div>
18+
<div id="image1" class="img">
19+
<img src="https://netresim.com/bilesenler/dosya/dosyalar/image/galeriler/28.01.2017/bresim/Nehir-Ve-Doga-Manzarasi-HD-Wallpapers.jpg" />
20+
</div>
21+
<div id="image2" class="img">
22+
<img src="http://3.bp.blogspot.com/-M4taDE-t9c8/U6bQ-7Y-AfI/AAAAAAAACdM/-n9kmDQI7Lk/s1600/doga-hd-wallpaper-hd-resim.jpg" />
23+
</div>
24+
<div id="image3" class="img">
25+
<img src="http://1.bp.blogspot.com/-eTaD7Gdgy8c/UrA6fTbCBiI/AAAAAAAACOE/SDiPTpBGH3c/s1600/doga-balon-wallpaper-1980x1200.jpg" />
26+
</div>
27+
<div id="image4" class="img">
28+
<img src="https://cdn.wallpapersafari.com/7/90/uK6U2o.jpg" />
29+
</div>
30+
<div class="left" onclick="left()"></div>
31+
<div class="right" onclick="right()"></div>
32+
<div class="dots">
33+
<div class="dot a1"></div>
34+
<div class="dot a2"></div>
35+
<div class="dot a3"></div>
36+
<div class="dot a4"></div>
37+
</div>
38+
</div>
39+
40+
<script>
41+
42+
let i = 0;
43+
44+
let box1 = document.getElementById("image1");
45+
let box2 = document.getElementById("image2");
46+
let box3 = document.getElementById("image3");
47+
let box4 = document.getElementById("image4");
48+
let a1 = document.querySelector(".a1");
49+
let a2 = document.querySelector(".a2");
50+
let a3 = document.querySelector(".a3");
51+
let a4 = document.querySelector(".a4");
52+
let info = document.getElementById("info");
53+
54+
a1.onclick = function () {
55+
box1.style.opacity = 1;
56+
box2.style.opacity = 0;
57+
box3.style.opacity = 0;
58+
box4.style.opacity = 0;
59+
info.innerHTML = "Image 1"
60+
i = 0;
61+
}
62+
63+
a2.onclick = function () {
64+
box1.style.opacity = 0;
65+
box2.style.opacity = 1;
66+
box3.style.opacity = 0;
67+
box4.style.opacity = 0;
68+
info.innerHTML = "Image 2"
69+
i = 1;
70+
}
71+
72+
a3.onclick = function () {
73+
box1.style.opacity = 0;
74+
box2.style.opacity = 0;
75+
box3.style.opacity = 1;
76+
box4.style.opacity = 0;
77+
info.innerHTML = "Image 3"
78+
i = 2;
79+
}
80+
81+
a4.onclick = function () {
82+
box1.style.opacity = 0;
83+
box2.style.opacity = 0;
84+
box3.style.opacity = 0;
85+
box4.style.opacity = 1;
86+
info.innerHTML = "Image 4"
87+
i = 3;
88+
}
89+
90+
document.addEventListener("keydown", (e) => {
91+
if (e.keyCode == 37) {
92+
right();
93+
}
94+
});
95+
96+
document.addEventListener("keydown", (e) => {
97+
if (e.keyCode == 39 ) {
98+
right();
99+
}
100+
});
101+
102+
function right() {
103+
if (i == 0) {
104+
box1.style.opacity = 1;
105+
box2.style.opacity = 0;
106+
box3.style.opacity = 0;
107+
box4.style.opacity = 0;
108+
info.innerHTML = "Image 1"
109+
i++
110+
}
111+
else if (i == 1) {
112+
box1.style.opacity = 0;
113+
box2.style.opacity = 1;
114+
box3.style.opacity = 0;
115+
box4.style.opacity = 0;
116+
info.innerHTML = "Image 2"
117+
i++
118+
}
119+
else if (i == 2) {
120+
box1.style.opacity = 0;
121+
box2.style.opacity = 0;
122+
box3.style.opacity = 1;
123+
box4.style.opacity = 0;
124+
info.innerHTML = "Image 3"
125+
i++
126+
}
127+
else if (i == 3) {
128+
box1.style.opacity = 0;
129+
box2.style.opacity = 0;
130+
box3.style.opacity = 0;
131+
box4.style.opacity = 1;
132+
info.innerHTML = "Image 4"
133+
i = 0;
134+
}
135+
}
136+
137+
function left() {
138+
if (i == 0) {
139+
box1.style.opacity = 0;
140+
box2.style.opacity = 0;
141+
box3.style.opacity = 0;
142+
box4.style.opacity = 1;
143+
info.innerHTML = "Image 1"
144+
i++
145+
}
146+
else if (i == 1) {
147+
box1.style.opacity = 0;
148+
box2.style.opacity = 0;
149+
box3.style.opacity = 1;
150+
box4.style.opacity = 0;
151+
info.innerHTML = "Image 2"
152+
i++
153+
}
154+
else if (i == 2) {
155+
box1.style.opacity = 0;
156+
box2.style.opacity = 1;
157+
box3.style.opacity = 0;
158+
box4.style.opacity = 0;
159+
info.innerHTML = "Image 3"
160+
i++
161+
}
162+
else if (i == 3) {
163+
box1.style.opacity = 1;
164+
box2.style.opacity = 0;
165+
box3.style.opacity = 0;
166+
box4.style.opacity = 0;
167+
info.innerHTML = "Image 4"
168+
i = 0;
169+
}
170+
}
171+
172+
</script>
173+
174+
</body>
175+
</html>

‎Image Slider/slider css.png

819 KB
Loading

0 commit comments

Comments
 (0)