Carrocel com Glider - Voltar

<div class="carousel">
    <article class="c-carousel c-carousel--responsive">
        <div class="c-carousel__slides js-carousel--responsive">
            <article class="c-carousel__slide">
                <img src="img/foto-01.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-02.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-03.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-04.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-051.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-06.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-07.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-08.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-09.jpg" alt="">
            </article>
            <article class="c-carousel__slide">
                <img src="img/foto-10.jpg" alt="">
            </article>
        </div>

        <button class="js-carousel--responsive-prev" aria-label="Anterior">
            <i class="fa-solid fa-angles-left"></i>
        </button>
        <button class="js-carousel--responsive-next" aria-label="Próximo">
            <i class="fa-solid fa-angles-right"></i>
        </button>
        
        <div class="js-carousel--responsive-dots" role="tablist"></div>

    </article>
        
</div>

.carousel{
    position: relative;
}
.js-carousel--responsive-prev,
.js-carousel--responsive-next{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
}
.js-carousel--responsive-prev:hover,
.js-carousel--responsive-next:hover{
    cursor: pointer;
}
.js-carousel--responsive-prev:active,
.js-carousel--responsive-next:active{
    border: none;
}
.js-carousel--responsive-prev:focus,
.js-carousel--responsive-next:focus{
    border: none;
}
.js-carousel--responsive-prev{
    position: absolute;
    top: 40%;
    left: -10px;
}
.js-carousel--responsive-next{
    position: absolute;
    top: 40%;
    right: 10px;
}
.glider-dot,.glider-next,.glider-prev{
    border:0;
    padding:0;
    user-select:none;
    outline:0
}
.glider-contain{
    width:100%
}
.glider{
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    -ms-overflow-style:none
}
.glider-track{
    width:100%;
    margin:0;
    padding:0;
    display:flex;
    z-index:1
}
.glider.drag{
    cursor:-webkit-grabbing;
    cursor:grabbing
}
.glider::-webkit-scrollbar{
    opacity:0;
    height:0
}
.glider-dots{
    user-select:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:0 auto;
    padding:0
}
.glider-dot{
    display:block;
    cursor:pointer;
    color:#ccc;
    border-radius:999px;
    background:#ccc;
    width:12px;
    height:12px;
    margin:7px
}
.glider-dot.active{
    background:#a89cc8
}