var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
autoHeight: true, //enable auto height
direction: 'horizontal',
loop: false,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="about-text">
<div class="h2">
<span class="shadow">Обо мне</span>
<h2>Обо мне</h2>
</div>
<p>Я , Анна Николаева, психофизиолог, мастер Рейки, окончила полный курс " Древо жизни", " Дизайн человека", "Матрица человека", полный курс финансового обучения Х. Экера "Мышление миллионера". Высшее юридическое и медицинское образование (психоанализ).</p>
</div>
</div>
<div class="swiper-slide">
<div class="about-text">
<div class="h2">
<span class="shadow">Обо мне</span>
<h2>Обо мне</h2>
</div>
<p>Я , Анна Николаева, психофизиолог, мастер Рейки, окончила полный курс " Древо жизни", " Дизайн человека", "Матрица человека", полный курс финансового обучения Х. Экера "Мышление миллионера". Высшее юридическое и медицинское образование (психоанализ). Высшее юридическое и медицинское образование (психоанализ)</p>
</div>
</div>
<div class="swiper-slide">
<div class="about-text">
<div class="h2">
<span class="shadow">Обо мне</span>
<h2>Обо мне</h2>
</div>
<p>Я , Анна Николаева, психофизиолог, мастер Рейки, окончила полный курс " Древо жизни", " Дизайн человека", "Матрица человека", полный курс финансового обучения Х. Экера "Мышление миллионера". Высшее юридическое и медицинское образование (психоанализ). Высшее юридическое и медицинское образование (психоанализ)</p>
</div>
</div>
</div>
<div class="swiper-button-prev">
<span></span>
</div>
<div class="swiper-button-next">
<span></span>
</div>
<div class="swiper-pagination"></div>
</div>
mySwiper.on("transitionStart", function() {
$(".swiper-button-next span").text(
$('[data-swiper-slide-index="' + (mySwiper.realIndex + 1) + '"] .h2 h2').text()
);
});
mySwiper.on("transitionStart", function() {
$(".swiper-button-prev span").text(
$('[data-swiper-slide-index="' + (mySwiper.realIndex - 1) + '"] .h2 h2').text()
);
});
mySwiper.on("transitionStart", function() {
$(".swiper-button-next span").text(
$('[data-swiper-slide-index="' + (mySwiper.realIndex + 1) + '"] .h2 h2').first().text()
);
});
mySwiper.on("transitionStart", function() {
$(".swiper-button-prev span").text(
$('[data-swiper-slide-index="' + (mySwiper.realIndex - 1) + '"] .h2 h2').first().text()
);
});
.swiper-pagination-bullet::after
content: ''
position: absolute
left: 180%
top: 50%
transform: translateX(-50%)
display: block
width: 150%
height: 1px
background-color: #C9E1D1
z-index: -1
.swiper-pagination-bullet
&:last-child
&::after
display: none