<div class="carousel-wrapper-5311049">
<section id="carousel-5311049">
<svg class="icon-5311049 left-caret-5311049" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"/></svg>
<div class="card-5311049">
<img alt="placeholder" src="https://picsum.photos/250/270">
<h3>Haircut</h3>
<p>Includes a consultation, shampoo & condition, scalp massage, haircut, & blow-dry.</p>
</div>
<div class="card-5311049"><img alt="placeholder" src="https://picsum.photos/252/270"> <h3>Haircolor</h3> <p>Includes consultation, color, shampoo & condition, scalp massage, & blow-dry.</p></div>
<div class="card-5311049"><img alt="placeholder" src="https://picsum.photos/253/270"> <h3>Haircolor</h3> <p>Includes consultation, color, shampoo & condition, scalp massage, & blow-dry.</p></div>
<div class="card-5311049"><img alt="placeholder" src="https://picsum.photos/254/270"> <h3>Haircolor</h3> <p>Includes consultation, color, shampoo & condition, scalp massage, & blow-dry.</p></div>
<div class="card-5311049">
<img alt="placeholder" src="https://picsum.photos/249/270">
<h3>Styling</h3>
<p>Includes consultation, shampoo & condition, scalp massage, blow-dry & curling or flat iron.</p>
</div>
<svg class="icon-5311049 right-caret-5311049" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>
</section>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
section#carousel-5311049 {
background-color: white;
display: flex;
flex-wrap: nowrap;
padding-top: 72px;
padding-bottom: 72px;
overflow-x: scroll;
/* Scroll behavior starts with none and then javascript turns it smooth */
scroll-behavior: none;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
max-width: 700px;
margin: 0 auto;
}
/* Hide scrollbar for Chrome, Safari and Opera */
section#carousel-5311049::-webkit-scrollbar {
display: none;
}
.carousel-wrapper-5311049 {
position: relative;
}
div.card-5311049 {
max-width: 296px;
font-family: Inter;
text-align: center;
margin-left: 32px;
margin-right: 32px;
margin-bottom: 20px;
position: relative;
}
div.card-5311049 > img {
border-radius: 20px;
}
.icon-5311049 {
max-width: 25px;
transition-duration:0.2s;
}
.icon-5311049:hover {
max-width: 30px;
}
.left-caret-5311049, .right-caret-5311049 {
cursor: pointer;
transform: translateY(-30%);
transform: translateX(-30%);
}
.left-caret-5311049 {
position:absolute;
bottom: 0;
left: 35%;
}
.right-caret-5311049 {
position:absolute;
bottom: 0;
right: 35%;
}
const carousel = document.querySelector('#carousel-5311049');
const distanceToScroll = 300;
carousel.addEventListener("click", function(event){
if (event.target.classList.contains("left-caret-5311049") || event.target.parentNode.classList.contains("left-caret-5311049")){
console.log("left was clicked");
// Check if the scrollbar is at the leftmost position scroll to rightmost
if (carousel.scrollLeft === 0) {
carousel.scrollTo(carousel.scrollWidth, 0);
}
else {
carousel.scrollBy(-distanceToScroll, 0);
}
}
if (event.target.classList.contains("right-caret-5311049") || event.target.parentNode.classList.contains("right-caret-5311049")){
console.log("right was clicked");
// Check if the scrollbar is at the rightmost position then scroll to leftmost
if (carousel.scrollLeft + carousel.offsetWidth >= carousel.scrollWidth) {
carousel.scrollTo(0, 0);
}
else {
carousel.scrollBy(distanceToScroll, 0);
}
}
});
window.addEventListener('load', function () {
CarouselStartMiddle(carousel);
});
function CarouselStartMiddle(element) {
var elemWidth = element.scrollWidth;
var elemVisibleWidth = element.offsetWidth;
element.scrollLeft = (elemWidth - elemVisibleWidth) / 2;
// After its done loading, scroll carousel smoothly
element.style.scrollBehavior = 'smooth';
}