Swiper paginations bulllets label (Изменить положение текста label)
Подскажите как взаимодействовать с массивом labels. А именно стилизовать текст. На скрине видно что текст находится под буллетами, а мне нужно переместить его и установить НАД буллетами. Скрин прилагаю. 
let slider = new Swiper('.screen__slider', {
// Свои классы
wrapperClass: "screen__slider-wrapper",
slideClass: "screen__slide",
// Навигация
// Буллеты, текущее положение, прогрессбар
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'bullets',
clickable: true,
renderBullet: function (index, className) {
let labels = ['Chill Adventure', 'Spooky Times', 'Desert Madness', 'Out in the wild'];
return '<div class="' + className + '">' + (labels[index]) + '</div>';
},
},
// Количество слайдов для показа
slidesPerView: 'auto',
spaceBetween: 20,
autoplay: {
delay: 3000,
},
// Управление клавиатурой
keyboard: {
// Включить\выключить
enabled: true,
// Включить\выключить
// только когда слайдер
// в пределах вьюпорта
onlyInViewport: true,
// Включить\выключить
// управление клавишами
// pageUp, pageDown
pageUpDown: true,
},
// Скорость
speed: 1800,
// Обновить свайпер
// при изменении элементов слайдера
observer: true,
// Обновить свайпер
// при изменении родительских
// элементов слайдера
observeParents: true,
// Обновить свайпер
// при изменении дочерних
// элементов слайда
observeSlideChildren: true,
on: {
slideChange: function () {// Событие карусели
console.log();
},
},
});// -------------SLIDER
.screen__content._lights .swiper-wrapper {
display: flex;
padding: 50px 0;
}
.screen__content._lights .swiper {
position: relative;
padding: 100px 0 0 0;
}
.swiper-pagination {
position: absolute;
top: 90px;
left: 0;
}
.swiper-pagination > .swiper-pagination-bullets {
display: flex;
border-bottom: 2px solid #41EAD4;
}
.swiper-pagination > .swiper-pagination-bullet {
width: 25%;
height: 2px;
background: #41EAD4;
opacity: 0.3;
border-radius: 13px;
margin: 0 !important;
font-family: 'Larsseit';
font-weight: 700;
font-size: 18px;
line-height: 110%;
text-align: center;
color: #41EAD4;
}
.swiper-pagination > .swiper-pagination-bullet-active {
background: #41EAD4;
width: 25%;
height: 2px;
opacity: 1;
color: #41EAD4;
}
.swiper-button-prev {
position: absolute;
top: 50%;
left: 50px;
}
.swiper-button-next {
position: absolute;
top: 50%;
right: 50px;
} <!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="style.css">
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<title>Night Trips</title>
</head>
<body>
<div class="page__screen screen">
<div class="screen__content _lights">
<div class="container">
<div class="screen__slider swiper" data-swiper-parallax-opacity="0" data-swiper-parallax="-100%" data-swiper-parallax-duration="900">
<div class="screen__slider-wrapper swiper-wrapper">
<div class="screen__slide slide swiper-slide">
<div class="slide__img">
<div class="slide__abs-img decor">
<img src="img/icons/dots.svg" alt="">
</div>
<div class="slide__descr">
<span class="slide__descr-light-blue">01.</span> <br>
GRAND DUNES<br>
LANDSCAPE
</div>
<img src="img/slide__img.png" alt="">
</div>
<div class="slide__text-box">
<h3 class="slide__title">
Chill Adventure
</h3>
<div class="slide__text">
<p class="slide__paragraph">Ornare vivamus molestie pellentesque nunc. Sed sapien erat ultrices curabitur. Erat id fringilla arcu condimentum fames.</p>
<p class="slide__paragraph">Aliquet dictum aliquet faucibus cursus turpis. Suspendisse cum rutrum sit ut sociis. Pellentesque neque orci adipiscing pharetra lacus, dignissim pharetra ipsum blandit. Feugiat quis quam consectetur lectus id quis tortor vel, mattis.</p>
</div>
<button class="slide__button btn">
SEE OUR LATEST OFFER
</button>
</div>
<div class="slide__socials socials">
<div class="socials__title">SHARE IT:</div>
<div class="socials__icons">
<div class="socials__icon">
<img src="img/icons/instagram.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/facebook.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/twitter.svg" alt="">
</div>
</div>
</div>
</div>
<div class="screen__slide slide swiper-slide">
<div class="slide__img">
<div class="slide__abs-img decor">
<img src="img/icons/dots.svg" alt="">
</div>
<div class="slide__descr">
<span class="slide__descr-light-blue">01.</span> <br>
GRAND DUNES<br>
LANDSCAPE
</div>
<img src="img/slide__img.png" alt="">
</div>
<div class="slide__text-box">
<h3 class="slide__title">
Chill Adventure
</h3>
<div class="slide__text">
<p class="slide__paragraph">Ornare vivamus molestie pellentesque nunc. Sed sapien erat ultrices curabitur. Erat id fringilla arcu condimentum fames.</p>
<p class="slide__paragraph">Aliquet dictum aliquet faucibus cursus turpis. Suspendisse cum rutrum sit ut sociis. Pellentesque neque orci adipiscing pharetra lacus, dignissim pharetra ipsum blandit. Feugiat quis quam consectetur lectus id quis tortor vel, mattis.</p>
</div>
<button class="slide__button btn">
SEE OUR LATEST OFFER
</button>
</div>
<div class="slide__socials socials">
<div class="socials__title">SHARE IT:</div>
<div class="socials__icons">
<div class="socials__icon">
<img src="img/icons/instagram.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/facebook.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/twitter.svg" alt="">
</div>
</div>
</div>
</div>
<div class="screen__slide slide swiper-slide">
<div class="slide__img">
<div class="slide__abs-img decor">
<img src="img/icons/dots.svg" alt="">
</div>
<div class="slide__descr">
<span class="slide__descr-light-blue">01.</span> <br>
GRAND DUNES<br>
LANDSCAPE
</div>
<img src="img/slide__img.png" alt="">
</div>
<div class="slide__text-box">
<h3 class="slide__title">
Chill Adventure
</h3>
<div class="slide__text">
<p class="slide__paragraph">Ornare vivamus molestie pellentesque nunc. Sed sapien erat ultrices curabitur. Erat id fringilla arcu condimentum fames.</p>
<p class="slide__paragraph">Aliquet dictum aliquet faucibus cursus turpis. Suspendisse cum rutrum sit ut sociis. Pellentesque neque orci adipiscing pharetra lacus, dignissim pharetra ipsum blandit. Feugiat quis quam consectetur lectus id quis tortor vel, mattis.</p>
</div>
<button class="slide__button btn">
SEE OUR LATEST OFFER
</button>
</div>
<div class="slide__socials socials">
<div class="socials__title">SHARE IT:</div>
<div class="socials__icons">
<div class="socials__icon">
<img src="img/icons/instagram.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/facebook.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/twitter.svg" alt="">
</div>
</div>
</div>
</div>
<div class="screen__slide slide swiper-slide">
<div class="slide__img">
<div class="slide__abs-img decor">
<img src="img/icons/dots.svg" alt="">
</div>
<div class="slide__descr">
<span class="slide__descr-light-blue">01.</span> <br>
GRAND DUNES<br>
LANDSCAPE
</div>
<img src="img/slide__img.png" alt="">
</div>
<div class="slide__text-box">
<h3 class="slide__title">
Chill Adventure
</h3>
<div class="slide__text">
<p class="slide__paragraph">Ornare vivamus molestie pellentesque nunc. Sed sapien erat ultrices curabitur. Erat id fringilla arcu condimentum fames.</p>
<p class="slide__paragraph">Aliquet dictum aliquet faucibus cursus turpis. Suspendisse cum rutrum sit ut sociis. Pellentesque neque orci adipiscing pharetra lacus, dignissim pharetra ipsum blandit. Feugiat quis quam consectetur lectus id quis tortor vel, mattis.</p>
</div>
<button class="slide__button btn">
SEE OUR LATEST OFFER
</button>
</div>
<div class="slide__socials socials">
<div class="socials__title">SHARE IT:</div>
<div class="socials__icons">
<div class="socials__icon">
<img src="img/icons/instagram.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/facebook.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/twitter.svg" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination">
<div class="swiper-pagination-bullets">
<span tabindex="0" role="button" aria-label="Go to slide 2" class="swiper-pagination-bullet">Chill Adventure</span>
<li class="swiper-pagination-bullet">Spooky Times</li>
<li class="swiper-pagination-bullet">Desert Madness</li>
<li class="swiper-pagination-bullet">Out in the wild</li>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html> Ответы (1 шт):
Автор решения: Crus
→ Ссылка
изменил классы .swiper-pagination > .swiper-pagination-bullet и .swiper-pagination > .swiper-pagination-bullet-active
let slider = new Swiper('.screen__slider', {
// Свои классы
wrapperClass: "screen__slider-wrapper",
slideClass: "screen__slide",
// Навигация
// Буллеты, текущее положение, прогрессбар
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'bullets',
clickable: true,
renderBullet: function (index, className) {
let labels = ['Chill Adventure', 'Spooky Times', 'Desert Madness', 'Out in the wild'];
return '<div class="' + className + '">' + (labels[index]) + '</div>';
},
},
// Количество слайдов для показа
slidesPerView: 'auto',
spaceBetween: 20,
autoplay: {
delay: 3000,
},
// Управление клавиатурой
keyboard: {
// Включить\выключить
enabled: true,
// Включить\выключить
// только когда слайдер
// в пределах вьюпорта
onlyInViewport: true,
// Включить\выключить
// управление клавишами
// pageUp, pageDown
pageUpDown: true,
},
// Скорость
speed: 1800,
// Обновить свайпер
// при изменении элементов слайдера
observer: true,
// Обновить свайпер
// при изменении родительских
// элементов слайдера
observeParents: true,
// Обновить свайпер
// при изменении дочерних
// элементов слайда
observeSlideChildren: true,
on: {
slideChange: function () {// Событие карусели
console.log();
},
},
});// -------------SLIDER
.screen__content._lights .swiper-wrapper {
display: flex;
padding: 50px 0;
}
.screen__content._lights .swiper {
position: relative;
padding: 100px 0 0 0;
}
.swiper-pagination {
position: absolute;
top: 90px;
left: 0;
}
.swiper-pagination > .swiper-pagination-bullets {
display: flex;
border-bottom: 2px solid #41EAD4;
}
.swiper-pagination > .swiper-pagination-bullet {
width: 25%;
height: auto;
background: transparent;
opacity: 0.3;
border-radius: 13px;
margin: 0 !important;
font-family: 'Larsseit';
font-weight: 700;
font-size: 18px;
line-height: 110%;
text-align: center;
color: #41EAD4;
border-bottom: 2px solid #41EAD4;
border-radius: 0;
}
.swiper-pagination > .swiper-pagination-bullet-active {
background: transparent;
width: 25%;
height: auto;
opacity: 1;
color: #41EAD4;
}
.swiper-button-prev {
position: absolute;
top: 50%;
left: 50px;
}
.swiper-button-next {
position: absolute;
top: 50%;
right: 50px;
}<!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="style.css">
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<title>Night Trips</title>
</head>
<body>
<div class="page__screen screen">
<div class="screen__content _lights">
<div class="container">
<div class="screen__slider swiper" data-swiper-parallax-opacity="0" data-swiper-parallax="-100%" data-swiper-parallax-duration="900">
<div class="screen__slider-wrapper swiper-wrapper">
<div class="screen__slide slide swiper-slide">
<div class="slide__img">
<div class="slide__abs-img decor">
<img src="img/icons/dots.svg" alt="">
</div>
<div class="slide__descr">
<span class="slide__descr-light-blue">01.</span> <br>
GRAND DUNES<br>
LANDSCAPE
</div>
<img src="img/slide__img.png" alt="">
</div>
<div class="slide__text-box">
<h3 class="slide__title">
Chill Adventure
</h3>
<div class="slide__text">
<p class="slide__paragraph">Ornare vivamus molestie pellentesque nunc. Sed sapien erat ultrices curabitur. Erat id fringilla arcu condimentum fames.</p>
<p class="slide__paragraph">Aliquet dictum aliquet faucibus cursus turpis. Suspendisse cum rutrum sit ut sociis. Pellentesque neque orci adipiscing pharetra lacus, dignissim pharetra ipsum blandit. Feugiat quis quam consectetur lectus id quis tortor vel, mattis.</p>
</div>
<button class="slide__button btn">
SEE OUR LATEST OFFER
</button>
</div>
<div class="slide__socials socials">
<div class="socials__title">SHARE IT:</div>
<div class="socials__icons">
<div class="socials__icon">
<img src="img/icons/instagram.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/facebook.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/twitter.svg" alt="">
</div>
</div>
</div>
</div>
<div class="screen__slide slide swiper-slide">
<div class="slide__img">
<div class="slide__abs-img decor">
<img src="img/icons/dots.svg" alt="">
</div>
<div class="slide__descr">
<span class="slide__descr-light-blue">01.</span> <br>
GRAND DUNES<br>
LANDSCAPE
</div>
<img src="img/slide__img.png" alt="">
</div>
<div class="slide__text-box">
<h3 class="slide__title">
Chill Adventure
</h3>
<div class="slide__text">
<p class="slide__paragraph">Ornare vivamus molestie pellentesque nunc. Sed sapien erat ultrices curabitur. Erat id fringilla arcu condimentum fames.</p>
<p class="slide__paragraph">Aliquet dictum aliquet faucibus cursus turpis. Suspendisse cum rutrum sit ut sociis. Pellentesque neque orci adipiscing pharetra lacus, dignissim pharetra ipsum blandit. Feugiat quis quam consectetur lectus id quis tortor vel, mattis.</p>
</div>
<button class="slide__button btn">
SEE OUR LATEST OFFER
</button>
</div>
<div class="slide__socials socials">
<div class="socials__title">SHARE IT:</div>
<div class="socials__icons">
<div class="socials__icon">
<img src="img/icons/instagram.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/facebook.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/twitter.svg" alt="">
</div>
</div>
</div>
</div>
<div class="screen__slide slide swiper-slide">
<div class="slide__img">
<div class="slide__abs-img decor">
<img src="img/icons/dots.svg" alt="">
</div>
<div class="slide__descr">
<span class="slide__descr-light-blue">01.</span> <br>
GRAND DUNES<br>
LANDSCAPE
</div>
<img src="img/slide__img.png" alt="">
</div>
<div class="slide__text-box">
<h3 class="slide__title">
Chill Adventure
</h3>
<div class="slide__text">
<p class="slide__paragraph">Ornare vivamus molestie pellentesque nunc. Sed sapien erat ultrices curabitur. Erat id fringilla arcu condimentum fames.</p>
<p class="slide__paragraph">Aliquet dictum aliquet faucibus cursus turpis. Suspendisse cum rutrum sit ut sociis. Pellentesque neque orci adipiscing pharetra lacus, dignissim pharetra ipsum blandit. Feugiat quis quam consectetur lectus id quis tortor vel, mattis.</p>
</div>
<button class="slide__button btn">
SEE OUR LATEST OFFER
</button>
</div>
<div class="slide__socials socials">
<div class="socials__title">SHARE IT:</div>
<div class="socials__icons">
<div class="socials__icon">
<img src="img/icons/instagram.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/facebook.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/twitter.svg" alt="">
</div>
</div>
</div>
</div>
<div class="screen__slide slide swiper-slide">
<div class="slide__img">
<div class="slide__abs-img decor">
<img src="img/icons/dots.svg" alt="">
</div>
<div class="slide__descr">
<span class="slide__descr-light-blue">01.</span> <br>
GRAND DUNES<br>
LANDSCAPE
</div>
<img src="img/slide__img.png" alt="">
</div>
<div class="slide__text-box">
<h3 class="slide__title">
Chill Adventure
</h3>
<div class="slide__text">
<p class="slide__paragraph">Ornare vivamus molestie pellentesque nunc. Sed sapien erat ultrices curabitur. Erat id fringilla arcu condimentum fames.</p>
<p class="slide__paragraph">Aliquet dictum aliquet faucibus cursus turpis. Suspendisse cum rutrum sit ut sociis. Pellentesque neque orci adipiscing pharetra lacus, dignissim pharetra ipsum blandit. Feugiat quis quam consectetur lectus id quis tortor vel, mattis.</p>
</div>
<button class="slide__button btn">
SEE OUR LATEST OFFER
</button>
</div>
<div class="slide__socials socials">
<div class="socials__title">SHARE IT:</div>
<div class="socials__icons">
<div class="socials__icon">
<img src="img/icons/instagram.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/facebook.svg" alt="">
</div>
<div class="socials__icon">
<img src="img/icons/twitter.svg" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination">
<div class="swiper-pagination-bullets">
<span tabindex="0" role="button" aria-label="Go to slide 2" class="swiper-pagination-bullet">Chill Adventure</span>
<li class="swiper-pagination-bullet">Spooky Times</li>
<li class="swiper-pagination-bullet">Desert Madness</li>
<li class="swiper-pagination-bullet">Out in the wild</li>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>