Как сделать так, чтобы правая стрелка навигации удлинялась в другую сторону при наведении и при этом не сдвигала левую стрелку с места??
PS Чтобы перейти до этого слайдера, надо выбрать пункт Интернет магазин и нажать Узнать подробнее и далее Примеры работ
Сайт
cn76553.tmweb.ru
Весь код jsfiddle.net/x4mabpqr/1/
<div class="swiper-slide services-third-slider">
<div class="services-bg">
<div class="wrapper">
<div class="content">
<div class="title">Примеры работ</div>
<div class="swiper-object">
<div class="swiper-container example-gal">
<div class=" swiper-wrapper">
<div class="swiper-slide">
<img src="img/example.jpg" alt="example">
</div>
<div class="swiper-slide">
<img src="img/example.jpg" alt="example">
</div>
<div class="swiper-slide">
<img src="img/example.jpg" alt="example">
</div>
<div class="swiper-slide">
<img src="img/example.jpg" alt="example">
</div>
</div>
</div>
<div class="arrows-block">
<div class="swiper-button-prev-custom"></div>
<div class="swiper-button-next-custom">
</div>
</div>
</div>
<div class="footer-block">
<a href="#" class="back">
<svg width="56" height="8" viewBox="0 0 56 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.646446 4.35355C0.451183 4.15829 0.451183 3.84171 0.646446 3.64645L3.82843 0.464466C4.02369 0.269204 4.34027 0.269204 4.53553 0.464466C4.7308 0.659728 4.7308 0.976311 4.53553 1.17157L1.70711 4L4.53553 6.82843C4.7308 7.02369 4.7308 7.34027 4.53553 7.53553C4.34027 7.7308 4.02369 7.7308 3.82843 7.53553L0.646446 4.35355ZM56 4.5H1V3.5H56V4.5Z" fill="white" />
</svg>
<span>Вернуться назад</span>
</a>
</div>
</div>
</div>
</div>
</div>
.services-third-slider .arrows-block {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 33px;
right: 50%;
}
.swiper-button-prev-custom,
.swiper-button-next-custom {
font-size: 20px;
cursor: pointer;
color: #fff;
}
.swiper-button-prev-custom {
position: relative;
width: 60px;
height: 6px;
transition: width 0.3s ease-in;
right: -3px;
}
.swiper-button-prev-custom::before {
position: absolute;
content: '<';
left: 0px;
top: -10px;
}
.swiper-button-prev-custom::after {
position: absolute;
content: '';
border-bottom: 1px solid;
top: 0;
left: 0;
width: 100%;
}
.swiper-button-prev-custom:hover, .swiper-button-next-custom:hover {
width: 120px;
}
.swiper-button-next-custom {
position: relative;
width: 60px;
height: 6px;
left: 110px;
transition: width 0.3s ease-in;
}
.swiper-button-next-custom::before {
position: absolute;
content: '>';
right: -1px;
top: -10px;
}
.swiper-button-next-custom::after {
position: absolute;
content: '';
border-bottom: 1px solid;
top: 0;
left: 0;
width: 100%;
}