Как соединить буллиты пагинации линией?

Question

[Эдуард Баженов]

Как в плагине swiper соединить визуально линией буллиты пагинации?

Answer 1

[Eugene Chefranov]

На after или before для обертки пагинации повесить линию на абсолюте с z-index: -1
А лучше предоставьте код в песочнице

Comments

[Эдуард Баженов]

<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-autoheight swiper-container-android">
						<div class="swiper-wrapper" style="height: 533px; transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
							<div class="swiper-slide swiper-slide-active" style="width: 653px;">
								<div class="about-text">
									<div class="h2">
										<span class="shadow">Обо мне</span>
										<h2>Обо мне</h2>
									</div>
									<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. </p>
								</div>
							</div>
							<div class="swiper-slide swiper-slide-next" style="width: 653px;">
								<div class="about-text">
									<div class="h2">
										<span class="shadow">Обо мне</span>
										<h2>Мои работы</h2>
									</div>
									<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст..</p>
								</div>
							</div>
						</div>
						<div class="swiper-button-prev swiper-button-disabled" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true"></div>
    					<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div>
    					<div class="swiper-pagination swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span></div>
					<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>

[Эдуард Баженов]

Там второй мой вопрос тоже из этого куска кода про заголовки в навигации

[Eugene Chefranov]

Эдуард Баженов, визуально не вижу, но как-то так

.swiper-pagination {position:relative}
.swiper-pagination:before {content: ''; position: absolute; top: 50%; left: 0, transform: translateY(-50%); display: block; width: 100%; height: 1px; background-color: red}

[Эдуард Баженов]

Eugene Chefranov,

Этот блок растянут на ширину родителя, а буллиты центрированы

[Eugene Chefranov]

Эдуард Баженов,

.swiper-pagination {position:relative}
.swiper-pagination:before {content: ''; position: absolute; left: 50%; top: 0, transform: translateX(-50%); display: block; width: 100%; height: 1px; background-color: red}

[Эдуард Баженов]

Eugene Chefranov,

поменял только top: 16px, я могу подогнать размер линии под точки, но что если их количество меняется?

[Эдуард Баженов]

Eugene Chefranov, получилось вот так:

.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

[Эдуард Баженов]

Eugene Chefranov, спасибо за помощь!
Подскажите по поводу другого вопроса: как вывести заголовки предыдущего и следующего блоков около стрелок навигации, соответственно влево и вправо. Код тот же, что в первом комментарии

[Eugene Chefranov]

Эдуард Баженов, у свайпера есть событие transitionStart по котору вам необходимо найти следующий/предыдущий слайд по индексу, взять оттуда нужный текст и вывести в текущем слайде, что-то типа того

mySwiper.on("transitionStart", function() {
    // вставляем текст в нужный див
    $(".the-next span").text(
      $('[data-swiper-slide-index="' + (mySwiper.realIndex + 1) + '"] .h2 h2').text()
    );
   $(".the-prev span").text(
      $('[data-swiper-slide-index="' + (mySwiper.realIndex - 1) + '"] .h2 h2').text()
    );
  });

[Eugene Chefranov]

Эдуард Баженов, у кнопки не text() а val()

[Эдуард Баженов]

Eugene Chefranov, почему в кнопки не выводит? span есть в html

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()
    );
  });

[Eugene Chefranov]

Эдуард Баженов, .first() удалите

[Эдуард Баженов]

Eugene Chefranov, пробовал, ничего не меняется

[Eugene Chefranov]

Эдуард Баженов, значит структура у вас другая, мой пример работает (правда, только при перелистывании, надо допилить)

[Эдуард Баженов]

Eugene Chefranov, никак не могу понять, уже и в about-text вставлял дивы, как у вас. Похоже дело в .h2 h2, но что ещё можно указать? Сломал голову

<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()
      );
    });

[Eugene Chefranov]

Эдуард Баженов, а как вы свайпер инициализируете?

[Эдуард Баженов]

Eugene Chefranov,

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',
	  }
    });

[Eugene Chefranov]

Эдуард Баженов, У меня ваш пример работает с моим кодом, кроме первого слайда. Смотрели следующие слайды?

[Эдуард Баженов]

Eugene Chefranov, да, смотрел

[Эдуард Баженов]

Eugene Chefranov, может глянете через team viewer? а то я не знаю уже как быть ;(