<div class="blog__categoies__wrapper">
                                <div class="navi__block">
                                    <svg class="navi_prev" enable-background="new 0 0 15 26" viewBox="0 0 15 26" width="15px"><polygon fill="#999" points="2.019,0.58 -0.035,2.634 10.646,13.316 -0.035,23.997 2.019,26.052 14.755,13.316 "></polygon>
                                </svg>
                                    <svg class="navi_next" enable-background="new 0 0 15 26" viewBox="0 0 15 26" width="15px"><polygon fill="#999" points="2.019,0.58 -0.035,2.634 10.646,13.316 -0.035,23.997 2.019,26.052 14.755,13.316 "></polygon>
                                </svg>
                                </div>

                                <div class="blog__categories">
                                    <div class="blog__category_item active">Все</div>
                                    <div class="blog__category_item">Велосипеды</div>
                                    <div class="blog__category_item">Тренажеры</div>
                                    <div class="blog__category_item">Одежда</div>
                                    <div class="blog__category_item">Обувь</div>
                                    <div class="blog__category_item">Спортивное питание</div>
                                    <div class="blog__category_item">Теннис</div>
                                    <div class="blog__category_item">Плавание</div>
                                    <div class="blog__category_item">Одежда</div>
                                    <div class="blog__category_item">Обувь</div>
                                    <div class="blog__category_item">Спортивное питание</div>
                                    <div class="blog__category_item">Велосипеды</div>
                                    <div class="blog__category_item">Тренажеры</div>
                                    <div class="blog__category_item">Одежда</div>
                                    <div class="blog__category_item">Обувь</div>
                                </div>
                            </div>
    .blog__categoies__wrapper {
            position: relative;
            margin-left: 30px;
            overflow: hidden;
      width: 400px;
            .navi__block {
                position: absolute;
                right: 0;
                z-index: 20;
                background: #fff;
            }
            .navi_prev {
                transform: rotate(180deg);
                width: 14px;
                height: 14px;
                margin-right: 10px;
                cursor: pointer;
                &:hover {
                    polygon {
                        fill: #e01f2e
                    }
                }
            }
            .navi_next {
                width: 14px;
                height: 14px;
                cursor: pointer;
                &:hover {
                    polygon {
                        fill: #e01f2e
                    }
                }
            }
            &::after {
                content: "";
                display: block;
                background: url(../img/relate_light.png) no-repeat right top;
                height: 100%;
                width: 109px;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 10;
            }
            .blog__categories {
                display: flex;
                width: 200%;
                transition: .5s;
                .blog__category_item {
                    margin-right: 30px;
                    color: #e01f2e;
                    cursor: pointer;
                    &:hover {
                        color: #000;
                    }
                    &.active {
                        color: #000;
                        font-weight: 600;
                    }
                }
            }
        }
View Compiled
$('.navi_prev').click(function() {
    console.log('click');
    $('.blog__categories').css("transform", "translateX(5%)");
});
$('.navi_next').click(function() {
    console.log('click');
    $('.blog__categories').css("transform", "translateX(-5%)");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js