Skip to content

Commit 35626dd

Browse files
solygambassolygambas
committed
add image comparison slider
1 parent 1292ec9 commit 35626dd

File tree

4 files changed

+104
-1
lines changed

4 files changed

+104
-1
lines changed

‎56-image comparison slider/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!-- Awesome Vanilla Javascript Image Slider! by Simo Edwin - Dev Ed (2021)
2+
see: https://www.youtube.com/watch?v=ee8y1IV6pOI -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Image Comparison Slider</title>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="img-container-after">
15+
<img
16+
src="https://images.unsplash.com/photo-1605405748429-cc26b762fa16?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1336&q=80"
17+
alt=""
18+
class="after"
19+
/>
20+
</div>
21+
<div class="img-container-before">
22+
<img
23+
src="https://images.unsplash.com/photo-1605405747924-2709f6783d0a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1336&q=80"
24+
alt=""
25+
class="before"
26+
/>
27+
</div>
28+
<div class="slider"></div>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎56-image comparison slider/script.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const container = document.querySelector(".container");
2+
const slider = document.querySelector(".slider");
3+
const before = document.querySelector(".img-container-before");
4+
const after = document.querySelector(".img-container-after");
5+
6+
const dragSlider = (e) => {
7+
let x = e.layerX;
8+
let size = container.offsetWidth;
9+
before.style.width = x + "px";
10+
slider.style.left = x + "px";
11+
if (x < 30) {
12+
before.style.width = 0;
13+
slider.style.left = 0;
14+
}
15+
if (x + 30 > size) {
16+
before.style.width = size + "px";
17+
slider.style.left = size + "px";
18+
}
19+
};
20+
21+
container.addEventListener("mousemove", dragSlider);

‎56-image comparison slider/style.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
height: 100vh;
12+
overflow: hidden;
13+
}
14+
15+
.container {
16+
position: relative;
17+
width: 60vw;
18+
height: 80vh;
19+
}
20+
21+
.img-container-before,
22+
.img-container-after {
23+
position: absolute;
24+
width: 60vw;
25+
height: 80vh;
26+
}
27+
28+
.img-container-before {
29+
width: 30vw;
30+
overflow: hidden;
31+
}
32+
33+
img {
34+
width: 60vw;
35+
height: 80vh;
36+
object-fit: cover;
37+
}
38+
39+
.slider {
40+
width: 0.5rem;
41+
background: white;
42+
height: 100%;
43+
position: absolute;
44+
top: 0;
45+
left: 50%;
46+
transform: translateX(-50%);
47+
z-index: 10;
48+
pointer-events: none;
49+
}

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
| 52 | [Portfolio with CSS Grid](https://github.com/solygambas/html-css-fifty-projects/tree/master/52-portfolio%20grid) | [Live Demo](https://codepen.io/solygambas/full/MWbKzzO) |
6161
| 53 | [Touch Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/53-touch%20slider) | [Live Demo](https://codepen.io/solygambas/full/QWGEyLK) |
6262
| 54 | [CSS Loaders](https://github.com/solygambas/html-css-fifty-projects/tree/master/54-css%20loaders) | [Live Demo](https://codepen.io/solygambas/full/QWGdgaZ) |
63-
| 55 | [Glass Dashboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/55-glass%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/oNYpQMo) |
63+
| 55 | [Glass Dashboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/55-glass%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/oNYpQMo) |
64+
| 56 | [Image Comparison Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/56-image%20comparison%20slider) | [Live Demo](https://codepen.io/solygambas/full/RwoMLYW) |
6465

6566
Based on [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/) by Brad Traversy (2020).

0 commit comments

Comments
 (0)