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>
Condividi l'articolo:
Ti possono interessare anche...