Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1c747d0

Browse files
carousel working perfectly!
1 parent 73253c9 commit 1c747d0

File tree

5 files changed

+69
-9
lines changed

5 files changed

+69
-9
lines changed

‎index.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,11 @@ <h5>Bugtracker</h5>
4040
<br>
4141
The owner alone can edit and delete his/her projects and tickets. There's also a search functionality where the user can filter tickets according to their title.</p>
4242
<div class="flex carousel projects-width desktop-dn">
43-
<img src="https://placekitten.com/400/300" loading="lazy" class="projects-width">
44-
<img src="https://placekitten.com/300/400" loading="lazy" class="projects-width">
45-
<img src="https://placekitten.com/400/400" loading="lazy" class="projects-width">
43+
<div class="flex slides">
44+
<img src="https://placekitten.com/400/300" loading="lazy" class="projects-width slide">
45+
<img src="https://placekitten.com/300/400" loading="lazy" class="projects-width slide">
46+
<img src="https://placekitten.com/400/400" loading="lazy" class="projects-width slide">
47+
</div>
4648
</div>
4749
<div class="projects-links">
4850
<a href="" target="_blank">Live website</a>
@@ -57,9 +59,11 @@ <h5>Bugtracker</h5>
5759
</div>
5860
</div>
5961
<div class="flex carousel projects-width mobile-dn">
60-
<img src="https://placekitten.com/400/300" loading="lazy" class="projects-width">
61-
<img src="https://placekitten.com/300/400" loading="lazy" class="projects-width">
62-
<img src="https://placekitten.com/400/400" loading="lazy" class="projects-width">
62+
<div class="flex slides">
63+
<img src="https://placekitten.com/400/300" loading="lazy" class="projects-width slide">
64+
<img src="https://placekitten.com/300/400" loading="lazy" class="projects-width slide">
65+
<img src="https://placekitten.com/400/400" loading="lazy" class="projects-width slide">
66+
</div>
6367
</div>
6468
</div>
6569
<div class="flex flex-justcont-sb projects-each">
@@ -87,7 +91,7 @@ <h5>Blog</h5>
8791
<div class="flex flex-justcont-sb projects-each">
8892
<div class="flex flex-dir-col projects-width">
8993
<h5>Portfolio</h5>
90-
<p>This is the portfolio you're seeing right now. I've included it because I've done it from scratch and so I could explain my choices. I decided to host it on GitHub, so I won't need to pay for it, and I opted for not using any type of JavaScript framework because they're definitely overused.</p>
94+
<p>This project is the website you're seeing right now.</p>
9195
<img src="https://placekitten.com/500/350" loading="lazy" class="projects-width desktop-dn">
9296
<div class="projects-links">
9397
<a href="" target="_blank">Live website</a>

‎script.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
const preferredTheme = window.matchMedia("(prefers-color-scheme: dark)");
22
const body = document.querySelector("#body");
33
const button = document.querySelector("#theme");
4+
const carouselAll = document.querySelectorAll(".carousel");
5+
6+
let isClicking = false;
7+
let initialX;
8+
let scrollLeft;
49

510
if (!localStorage.getItem("theme")){
611
setTheme(preferredTheme ? "dark" : "light");
@@ -26,3 +31,42 @@ function changeTheme(){
2631
}
2732
}
2833

34+
carouselAll.forEach((carousel) => {
35+
carousel.addEventListener("mousedown", (e) => {
36+
isClicking = true;
37+
scrollLeft = carousel.scrollLeft;
38+
initialX = e.clientX;
39+
40+
console.log(initialX);
41+
42+
carousel.style.cursor = "grabbing";
43+
document.body.style.userSelect = "none";
44+
});
45+
46+
carousel.addEventListener("mouseup", () => {
47+
isClicking = false;
48+
49+
carousel.style.cursor = "grab";
50+
document.body.style.userSelect = "auto";
51+
});
52+
53+
carousel.addEventListener("mouseout", () => {
54+
isClicking = false;
55+
56+
carousel.style.cursor = "grab";
57+
document.body.style.userSelect = "auto";
58+
});
59+
60+
carousel.addEventListener("mousemove", (e) => {
61+
if (isClicking == false){
62+
return;
63+
}
64+
65+
let x = e.clientX - initialX;
66+
67+
console.log(scrollLeft - x);
68+
69+
carousel.scrollLeft = scrollLeft - x;
70+
});
71+
});
72+

‎scss/pages/_home.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,9 +137,16 @@
137137

138138
.carousel{
139139
overflow: scroll;
140+
scrollbar-width: none;
140141
scroll-snap-type: x mandatory;
142+
cursor: grab;
143+
}
144+
145+
.slides{
141146

142147
img{
148+
cursor: pointer;
149+
pointer-events: none;
143150
margin: 0 24px 0 24px;
144151
scroll-snap-align: center;
145152
}

‎style.css‎

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /