How to add a scroll button to bottom of Carousel

To add a scroll button to bottom of Carousel, like this

You can do these
#1. First, find Carousel Section ID.
In my example, it is:

section[data-section-id="660bdc1764321203a92b387e"]

#2. Use this code to Page Header Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $('<div class="down-arrow"></div>').insertAfter('section[data-section-id="660bdc1764321203a92b387e"] .user-items-list-carousel__slides');
$('.down-arrow').on('click', function() {
    $('html, body').animate({
        scrollTop: $('.user-items-list-carousel__slides').next().offset().top
    }, 500); 
});
</script>
<style>
  .down-arrow {
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.down-arrow::before {
    content: '\e009';
    font-family: 'squarespace-ui-font';
    font-size: 20px;
    color: white;
}

</style>

#3. To change arrow color/circle background, change these code