Задать вопрос
@bazliiii

Как сдвинуть pagination swiper slider?

Добрый день , кто знает как сдвинуть pagination в swiper slidere. Пробовал прописать absolute , но реакции ноль , вот код:

<div class="swiper doctor-slider">
            <div class="swiper-wrapper doctor-slider__wrapper">
              <div class="swiper-slide doctor-slider__slide">
                <img src="images/doctor--1.jpg" alt="img" class="doctor-slider__img">
                <h5 class="doctor-slider__item-title">Мінаєва Л.В.</h5>
                <p class="doctor-slider__text">Фахівець діагностики захворювань ротової порожнини та терапевтичної
                  стоматологічної допомоги</p>
              </div>
              <div class="swiper-slide doctor-slider__slide">
                <img src="images/doctor--2.jpg" alt="img" class="doctor-slider__img">
                <h5 class="doctor-slider__item-title">СУХОРУКОВА Н.В.</h5>
                <p class="doctor-slider__text">Фахівець з гігієни порожнини рота та профілактики захворювань пародонту</p>
              </div>
              <div class="swiper-slide doctor-slider__slide">
                <img src="images/doctor--3.jpg" alt="img" class="doctor-slider__img">
                <h5 class="doctor-slider__item-title">Мінаєва Л.В.</h5>
                <p class="doctor-slider__text">Фахівець діагностики захворювань ротової порожнини та терапевтичної стоматологічної допомоги</p>
              </div>
              <div class="swiper-slide doctor-slider__slide">
                <img src="images/doctor--2.jpg" alt="img" class="doctor-slider__img">
                <h5 class="doctor-slider__item-title">Мінаєва Л.В.</h5>
                <p class="doctor-slider__text">Фахівець з протезування зубів та протезування на імплантах</p>
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-prev1"></div>
            <div class="swiper-button-next swiper-button-next1"></div>

            <div class="swiper-pagination swiper-pagination1"></div>
          </div>

var Slider = new Swiper(".doctor-slider", {
    slidesPerView: 4,
    spaceBetween: 80,
    centeredSlides: true,
    pagination: {
        el: ".swiper-pagination",
        type: "progressbar",
      },
      navigation: {
        nextEl: ".swiper-button-next1",
        prevEl: ".swiper-button-prev1",
      },
  });

&__item-title{
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 20px;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 10px;
    }
    &__text{
        max-width: 290px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        color: #D9D9D9;
    }
    &__img {
        margin-bottom: 20px;
    }
    .swiper {
        width: 100%;
        height: 100%;
        &::before{
            display: none;
        }
      }
      .swiper-slide {
        background: transparent;
      }
      .swiper-slide img {
        display: block;
        width: 417px;
        height: 417px;
        object-fit: cover;
      }
      &__inner{
        position: relative;
        .swiper-pagination{
            position: absolute !important;
            bottom: 150px; left: 0;
          }
      }
  • Вопрос задан
  • 516 просмотров
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы