0

Работая с библиотекой Swiper.js столкнулся с проблемой, что нужно менять цвет при нажатии, но svg не меняет цвет

jsfiddle

const swiper = new Swiper('.swiper', {
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
        delay: 15000,
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
    simulateTouch: false,
});
const navColor = document.querySelector(".swiper-button-prev svg")
navColor.addEventListener("click", function() {
    this.classList.add("active");
  });
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
* {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}
body {
    background-color: #1F1F22;
    font-family: 'Montserrat', sans-serif;
}
img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
svg:hover {
    color: #D5A033;
}
.swiper {
    position: relative;
    width: 100%;
    height: auto;
}
.swiper-text {
    position: absolute;
    z-index: 2222;
}
.swiper-text h1 {
    margin: 200px 0px 0px 175px;
    text-transform: uppercase;
    color: #D9B271;
    font-size: 48px;
    line-height: 58.51px;
    letter-spacing: 10px;
    font-weight: 500;
}
.active {
    color: #D5A033;
}
.swiper-text p {
    color: white;
    font-size: 16px;
    line-height: 19.5px;
    font-weight: 400;
    margin: 30px 0px 0px 175px;
}
.swiper-button-prev, .swiper-button-next {
    margin: 0px 80px;
}
.swiper-button-next::after, .swiper-button-prev::after {
    content: "";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="css/main.css">
    <title>Slider</title>
</head>
<body>
    <div class="swiper">
        <div class="swiper-text">
            <h1>Тренажерный<br>зал</h1>
            <p>В нашем клубе есть все для кроссфита</p>
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
        </div>
        </div>
        <div class="swiper-button-prev">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.3333 10.3467L9.66662 15.9973M9.66662 15.9973L15.3333 21.6478M9.66662 15.9973L22.6666 15.9973" stroke="white" stroke-width="2"/>
                <ellipse cx="16" cy="15.9971" rx="15" ry="14.9573" transform="rotate(-180 16 15.9971)" stroke="white" stroke-width="2"/>
            </svg>  
        </div>
        <div class="swiper-button-next">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.6666 21.6475L22.3333 15.997M22.3333 15.997L16.6666 10.3465M22.3333 15.997L9.33325 15.997" stroke="white" stroke-width="2"/>
                <ellipse cx="16" cy="15.9971" rx="15" ry="14.9573" stroke="white" stroke-width="2"/>
            </svg>  
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

2
  • Если речь идет о ваших эллипсах, то по селекторам .swiper-button-prev:active svg, .swiper-button-next:active svg { fill: red; }
    – xydope
    14 апр 2022 в 11:30
  • .swiper-button-prev, .swiper-button-next {color: red} 14 апр 2022 в 11:30

1 ответ 1

2

Пример

const swiper = new Swiper('.swiper', {
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
        delay: 15000,
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
    simulateTouch: false,
});
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

* {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}

body {
    background-color: #1F1F22;
    font-family: 'Montserrat', sans-serif;
}

img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

svg:hover {
    color: #D5A033;
}

.swiper {
    position: relative;
    width: 100%;
    height: auto;
}

.swiper-text {
    position: absolute;
    z-index: 2222;
}

.swiper-text h1 {
    margin: 200px 0px 0px 175px;
    text-transform: uppercase;
    color: #D9B271;
    font-size: 48px;
    line-height: 58.51px;
    letter-spacing: 10px;
    font-weight: 500;
}

.swiper-text p {
    color: white;
    font-size: 16px;
    line-height: 19.5px;
    font-weight: 400;
    margin: 30px 0px 0px 175px;
}
.swiper-button-prev, 
.swiper-button-next {
    margin: 0px 80px;
}

.swiper-button-next::after, 
.swiper-button-prev::after {
    content: "";
}

.swiper-button-prev:hover, 
.swiper-button-next:hover,
.swiper-button-prev:focus, 
.swiper-button-next:focus{
    color: #D5A033!important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="css/main.css">
    <title>Slider</title>
</head>
<body>
    <div class="swiper">
        <div class="swiper-text">
            <h1>Тренажерный<br>зал</h1>
            <p>В нашем клубе есть все для кроссфита</p>
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
            <div class="swiper-slide">
                <img src="https://psv4.userapi.com/c235031/u524861121/docs/d34/ffdee0a224ec/strong-man-training-gym_3_1.png?extra=Pe_bJb7ma7Vmw2NHVcAvWvKvd3uIV5BoBrNrW5IU3vM5oOR5CY2FdPoDBoewzVaDqt5fjtQNuyBbUfI8W75dT0jy3lZiTZOvlnd4Z_hwUWXwd1UUX2Oo26EE0vbacd-Ow-06_noaFaNDic4NF8nFUQk">
            </div>
        </div>
        </div>
        <div class="swiper-button-prev">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.3333 10.3467L9.66662 15.9973M9.66662 15.9973L15.3333 21.6478M9.66662 15.9973L22.6666 15.9973" stroke="white" stroke-width="2"/>
                <ellipse cx="16" cy="15.9971" rx="15" ry="14.9573" transform="rotate(-180 16 15.9971)" stroke="white" stroke-width="2"/>
            </svg>  
        </div>
        <div class="swiper-button-next">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.6666 21.6475L22.3333 15.997M22.3333 15.997L16.6666 10.3465M22.3333 15.997L9.33325 15.997" stroke="white" stroke-width="2"/>
                <ellipse cx="16" cy="15.9971" rx="15" ry="14.9573" stroke="white" stroke-width="2"/>
            </svg>  
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.