<div class="group">
<main class="carousel" role="main" aria-label="carousel">
<button type="button" id="backward" class="btn disabled" role="button" aria-label="backward">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<polyline points="15 18 9 12 15 6" />
</svg>
</button>
<section class="carousel-sub">
<!-- View 1 -->
<section class="img-wrapper" id="view1">
<span role="img" aria-label="HomePod, AirPods, or select Beats product">
<img src="https://user-images.githubusercontent.com/78242022/274978352-f0fc35e2-652b-428d-927f-09bf61805dbf.jpeg" alt="HomePod, AirPods, or select Beats product">
</span>
<span role="img" aria-label="HomePod - Midnight">
<img src="https://user-images.githubusercontent.com/78242022/274980258-9f84204f-197f-4e0b-8c0e-5a9511f1db53.jpeg" alt="HomePod - Midnight">
</span>
<span role="img" aria-label="HomePod mini - Yellow">
<img src="https://user-images.githubusercontent.com/78242022/274982370-6c49ff19-7f72-43f0-9592-1861a506fec2.jpeg" alt="HomePod mini - Yellow">
</span>
</section>
<!-- View 2 -->
<section class="img-wrapper" id="view2">
<span role="img" aria-label="AirPods Max - Silver">
<img src="https://user-images.githubusercontent.com/78242022/274973852-afb2d3d0-2748-4612-a07a-b0f583c9d9b7.jpeg" alt="AirPods Max - Silver">
</span>
<span role="img" aria-label="AirPods (3rd generation) with Lightning Charging Case">
<img src="https://user-images.githubusercontent.com/78242022/274973882-7cef7964-66fd-470f-8d5b-e8b3837ffcc9.jpeg" alt=" AirPods (3rd generation) with Lightning Charging Case">
</span>
<span role="img" aria-describedby="Beats Studio Buds + True Wireless Noise Cancelling Earphones in Transparent, with Beats logo, above convenient charging case.
TransparentBlack / GoldIvoryCosmic SilverCosmic Pink">
<img src="https://user-images.githubusercontent.com/78242022/274973892-a5bdc3c6-ea67-46e2-b8cc-57f9a4f068a2.jpeg" alt="Beats Studio Buds + True Wireless Noise Cancelling Earphones in Transparent, with Beats logo, above convenient charging case.
TransparentBlack / GoldIvoryCosmic SilverCosmic Pink">
</span>
</section>
<!-- view 3 -->
<section class="img-wrapper" id="view3">
<span role="img" aria-label="iPhone 15 Pro FineWoven Case with MagSafe - Taupe">
<img src="https://user-images.githubusercontent.com/78242022/274990709-1e3c4882-778f-49bd-9814-b940648ea4eb.jpeg" alt="iPhone 15 Pro FineWoven Case with MagSafe - Taupe">
</span>
<span role="img" aria-label="iPhone FineWoven Wallet with MagSafe - Black">
<img src="https://user-images.githubusercontent.com/78242022/274990706-ecafd3a0-4a95-4c50-a6f5-69386c548be2.jpeg" alt="iPhone FineWoven Wallet with MagSafe - Black">
</span>
<span role="img" aria-label="iPhone 15 FineWoven Case with MagSafe - Pacific Blue">
<img src="https://user-images.githubusercontent.com/78242022/274990700-6d29a925-9e2a-487f-96c9-7decc3f4fb37.jpeg" alt="iPhone 15 FineWoven Case with MagSafe - Pacific Blue">
</span>
</section>
</section>
<button type="button" id="forward" class="btn" role="button" aria-label="forward">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<polyline points="9 18 15 12 9 6" />
</svg>
</button>
</main>
<!-- Buttons -->
<div class="picker-wrapper">
<a href="#view1" class="picker-control active" role="link" aria-label="slide picker control"></a>
<a href="#view2" class="picker-control" role="link" aria-label="slide picker control"></a>
<a href="#view3" class="picker-control" role="link" aria-label="slide picker control"></a>
</div>
</div>
*, ::before, ::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-color: rgb(229 231 235);
--font: calibri;
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
body {
background-color: var(--bg-color);
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.carousel {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-sub {
width: 70%;
display: flex;
overflow-x: scroll;
scroll-behavior: smooth;
}
.img-wrapper {
transition: all 0.5s ease;
}
.carousel .img-wrapper {
display: flex;
gap: 20px;
padding: 10px;
flex: 0 0 100%;
}
.carousel .img-wrapper img {
width: 100%;
height: 100%;
aspect-ratio: 1 /1;
filter: grayscale(100%);
transition:transform 0.5s;
border-radius: 10px;
box-shadow: var(--shadow);
}
.carousel-sub::-webkit-scrollbar {
display: none;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
border:none;
width: 50px;
height: 50px;
background-color: rgba(0,0,0,.23);
border-radius: 100%;
cursor: pointer;
transition: background 0.5s ease;
}
.btn:hover {
background-color: rgba(0,0,0,.5);
}
svg{
display: block;
}
.btn svg {
stroke: #fff;
}
.carousel .img-wrapper img:hover {
filter: grayscale(0);
cursor: pointer;
transform: scale(1.1);
}
/* picker-wrapper */
.picker-wrapper {
display: flex;
justify-content: center;
gap: 1em;
}
/* Slide Picker Control */
.picker-control {
display: inline-block;
width: 20px;
height: 20px;
background-color: rgba(0,0,0,.23);
border-radius: 100%;
transition: all 0.5s ease;
}
.picker-control:hover {
background-color: rgba(0,0,0,.5);
}
.active {
background-color: rgba(0, 0, 0, 0.7);
}
.disabled {
transform: scale(0);
transition: transform 0.5s ease;
}
const carousel = document.querySelector(".carousel-sub"),
backwardBtn = document.querySelector("#backward"),
forwardBtn = document.querySelector("#forward");
const carouselViews = document.querySelectorAll('.img-wrapper')
const pickerControls = document.querySelectorAll('.picker-control');
backwardBtn.addEventListener("click", function(e){
const size = document.querySelector('.carousel-sub').clientWidth;
carousel.scrollLeft -= `${size}`;
let i = 0;
let arr = [...pickerControls];
let lastIndex = arr.length -1;
if(carousel.scrollLeft === 0) {
backwardBtn.classList.add('disabled');
forwardBtn.classList.remove('disabled')
arr[i].classList.add('active')
arr[1].classList.remove('active')
}
else if(carousel.scrollLeft >= 0){
arr[1].classList.add('active')
arr[lastIndex].classList.remove('active')
forwardBtn.classList.remove('disabled')
backwardBtn.classList.remove('disabled')
}
})
// The forward button for navigating backward
forwardBtn.addEventListener("click", function(e){
const size = document.querySelector('.carousel-sub').clientWidth;
carousel.scrollLeft += `${size}`;
let i = 0;
let arr = [...pickerControls];
let lastIndex = arr.length -1;
if(carousel.scrollLeft === 0){
arr[i].classList.remove('active')
arr[1].classList.add('active')
backwardBtn.classList.remove('disabled')
}
else if(carousel.scrollLeft >= 0){
arr[1].classList.remove('active')
arr[lastIndex].classList.add('active')
forwardBtn.classList.add('disabled')
}
})
// Carouel Element
carousel.addEventListener("wheel", function(){
e.preventDefault();
carousel.scrollLeft += e.deltaY;
carousel.style.scrollBehavior = "auto";
})
// Comeback here
// add active class to picker control
function eventHandler(index) {
carouselViews.forEach((view, i)=>{
pickerControls[i].classList.remove('active')
})
pickerControls[index].classList.add('active')
}
carouselViews.forEach((view, i)=>{
pickerControls[i].addEventListener('click', ()=>{
eventHandler(i)
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.