<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)
            })
        })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.