<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%)");
});
This Pen doesn't use any external CSS resources.