-
Notifications
You must be signed in to change notification settings - Fork 0
/
Day 15 - JavaScriptCarousel.js
156 lines (124 loc) · 3.58 KB
/
Day 15 - JavaScriptCarousel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
/*JavaScript Carousel
https://scrimba.com/scrim/coa834afa96b433095713d4b6
DESCRIPTION:
- Use JS to make it function
- Left & right arrows should work
- Bonus: use CSS transitions
*/
const previous = document.getElementById("previous")
const next = document.getElementById("next")
const img = document.getElementsByTagName("img")
let imageIndex = 0
function moveToIndex(index) {
let gallery = document.getElementById("gallery")
let imgWidth = gallery.getElementsByTagName("img")[0].width
let offset = window.getComputedStyle(gallery.getElementsByClassName("card")[0]).marginRight
offset = parseInt(offset.replace("px", ""))
let targetDisplacement = index * (-1 * (imgWidth + offset));
let transform = `transform: translateX(${targetDisplacement}px)`
document.getElementById('gallery').setAttribute('style', transform)
}
function imageCount() {
return gallery.getElementsByTagName("img").length;
}
function resetButtonState() {
previous.classList.remove("disabled")
next.classList.remove("disabled")
}
previous.onclick = function previousBtn() {
if (imageIndex == 0) {
return
}
imageIndex--
moveToIndex(imageIndex)
resetButtonState()
if (imageIndex == 0) {
previous.classList.add("disabled")
}
}
next.onclick = function nextBtn() {
if (imageIndex == imageCount() - 1) {
return
}
imageIndex++
moveToIndex(imageIndex)
resetButtonState()
if (imageIndex == imageCount() - 1) {
next.classList.add("disabled")
}
}
/*
Thanks to these fine individuals from Unsplash:
https://unsplash.com/photos/AmzKuEnr1VY
https://unsplash.com/photos/eDnJQL21amc
https://unsplash.com/photos/LXy2DOOxESQ
https://unsplash.com/photos/KBKHXjhVQVM
https://unsplash.com/photos/PxM8aeJbzvk
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
---------------------
CSS:
html, body {
margin: 0;
padding: 0;
height: 100vh;
font-family: 'Playfair Display';
display: grid;
justify-content: center;
}
img {
width: 200px;
}
.disabled {
opacity: .3;
}
.container {
display: grid;
grid-template-columns: 20% 200px 20%;
place-content: center;
}
.gallery-wrapper {
overflow: hidden;
width: 100%;
}
#previous, #next {
justify-self: center;
align-self: center;
cursor: pointer;
width: 35px;
}
#gallery {
transform-style: preserve-3d;
display: grid;
grid-template-columns: repeat(5, auto);
transform: translateX(0);
transition: all 0.5s ease-in-out;
}
.card {
margin-right: 20px;
align-self: center;
opacity: 100;
}
---------------------------
HTML:
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<img src="previous.svg" id="previous" class="disabled" alt="previous image" onclick="previousBtn()">
<div class="gallery-wrapper">
<div id="gallery">
<img class="card current" src="presents.jpg" alt="Christmas Cookies">
<img class="card" src="cookies.jpg" alt="Christmas Cookies">
<img class="card" src="santa.jpg" alt="Christmas Cookies">
<img class="card" src="candycane.jpg" alt="Christmas Cookies">
<img class="card" src="reindeer.jpg" alt="Christmas Cookies">
</div>
</div>
<img src="next.svg" id="next" alt="next image" onclick="nextBtn()">
</div>
<script src="index.pack.js"></script>
</body>
</html>
*/