@Norum

Как сделать так, чтобы стрелка навигации удлинялась в другую сторону при наведении?

Как сделать так, чтобы правая стрелка навигации удлинялась в другую сторону при наведении и при этом не сдвигала левую стрелку с места??
PS Чтобы перейти до этого слайдера, надо выбрать пункт Интернет магазин и нажать Узнать подробнее и далее Примеры работ

Сайт cn76553.tmweb.ru

Весь код jsfiddle.net/x4mabpqr/1/

6103c36e93c19851214330.jpeg
6103c37708df7603484243.jpeg
6103c37e28efc915540987.jpeg

<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%;
}
  • Вопрос задан
  • 20 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы