Code:
<main class="main">
<div class="container">
<div class="scroll">
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" loading="lazy" class="responsive" alt="Images">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" loading="lazy" class="responsive" alt="Images">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" loading="lazy" class="responsive" alt="Images">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" loading="lazy" class="responsive" alt="Images">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" loading="lazy" class="responsive" alt="Images">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" loading="lazy" class="responsive" alt="Images">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" loading="lazy" class="responsive" alt="Images">
</div>
</div>
</div>
</div>
</div>
</main>
Css:
$color-white: #ffffff;
$color-light: #f1f5f8;
$color-black: #252a32;
$color-blue: #148cb8;
$color-red: #d32f2f;
$box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
html {
font-size: 100%;
font-size-adjust: 100%;
box-sizing: border-box;
scroll-behavior: smooth;
}
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: inherit;
list-style: none;
list-style-type: none;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: $color-black;
background: $color-white;
}
a,
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
cursor: pointer;
border: none;
outline: none;
background: none;
text-decoration: none;
}
img,
video {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}
.container {
max-width: 80rem;
width: 100%;
height: auto;
padding: 0 2rem;
margin: 0 auto;
}
.text {
font-family: inherit;
font-weight: 700;
line-height: inherit;
text-rendering: optimizeLegibility;
&-title {
font-size: 1.25rem;
color: $color-red;
}
}
.paragraph {
font-family: inherit;
font-size: 1rem;
font-weight: normal;
line-height: inherit;
margin: 0.25rem 0;
color: $color-black;
text-transform: unset;
text-rendering: optimizeLegibility;
}
.truncate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-width: 100%;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
}
// Main
.main {
.scroll {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
height: auto;
padding: 1rem 0;
margin: 2.5rem 0;
cursor: default;
overflow: scroll hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0px 1.25rem;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
&.active {
cursor: grab;
cursor: -webkit-grab;
}
.card {
width: 16rem;
height: auto;
flex: 0 0 auto;
margin: 0 0.75rem;
border: none;
outline: none;
border-radius: 0.25rem;
color: $color-black;
background: $color-white;
box-shadow: $box-shadow;
&-image {
position: relative;
display: block;
width: 100%;
height: auto;
padding-top: 110%;
img.responsive {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
&-inner {
width: 100%;
height: auto;
padding: 1rem;
}
}
}
}
Javascript:
const scroll = document.querySelector(".scroll");
var isDown = false;
var scrollX;
var scrollLeft;
// Mouse Up Function
scroll.addEventListener("mouseup", () => {
isDown = false;
scroll.classList.remove("active");
});
// Mouse Leave Function
scroll.addEventListener("mouseleave", () => {
isDown = false;
scroll.classList.remove("active");
});
// Mouse Down Function
scroll.addEventListener("mousedown", (e) => {
e.preventDefault();
isDown = true;
scroll.classList.add("active");
scrollX = e.pageX - scroll.offsetLeft;
scrollLeft = scroll.scrollLeft;
});
// Mouse Move Function
scroll.addEventListener("mousemove", (e) => {
if (!isDown) return;
e.preventDefault();
var element = e.pageX - scroll.offsetLeft;
var scrolling = (element - scrollX) * 2;
scroll.scrollLeft = scrollLeft - scrolling;
});
0 Comments