Carosello Personalizzato

1️⃣ Contenitore Carosello -> inserisci ID "carousel" e inserisci nel CSS Personalizzato
selector {
    overflow-x: scroll;
    scroll-behavior: smooth;
}

selector::-webkit-scrollbar {
    width: 10px!important;
    height: 5px!important;
}

selector::-webkit-scrollbar-track {
    background-color: #004D51;
    border-radius: 50px;
}

selector::-webkit-scrollbar-thumb {
    background-color: #003235;
    border-radius: 50px;
    background-position: center;
}

selector::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

2️⃣ In un Widget HTML inserisci questo codice:
<script>
       const scrollContainer = document.querySelector("#carousel");

        scrollContainer.addEventListener("wheel", (evt) => {
            evt.preventDefault();
            scrollContainer.scrollLeft += evt.deltaY;
        });

const rightButton = document.querySelector("#slideRight");
const leftButton = document.querySelector("#slideLeft");

jQuery('#slideRight').click(function() {
            scrollContainer.scrollLeft += 550;
            console.log('right');
});
jQuery('#slideLeft').click(function() {
            scrollContainer.scrollLeft += -550;
            console.log('left');
});
</script>