БЛОГ НА HUSL


Как получить последний видимый слайд swiper

Автор вопроса: Евгения

У последнего элемента в видимых слайдах нужно убрать border-right Как это сделать?

document.querySelectorAll('.swiper-common').forEach(el => {
    let swiper = new Swiper(el, {
    slidesPerView: 4,
    loop: true,
    pagination: {
      el: el.querySelector('.common-pagination'),
      clickable: true,
      renderBullet: function (index, className) {
          return '<span class="' + className + '">' + "0" + (index + 1) + "</span>";
      },
    },
     navigation: {
        nextEl: el.querySelector('.common-next'),
        prevEl: el.querySelector('.common-prev')
     }
});
});
.swiper {
    overflow-x: clip !important;
    overflow: visible;
    position: relative;
}

.common-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 0 !important;
}

.common-pagination .swiper-pagination-bullet {
    font-size: 14px;
    line-height: 100%;
    font-family: "Onest-Regular";
    background-color: transparent;
    opacity: 1;
    height: 14px;
    position: relative;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
}

.common-pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 33px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 54px;
    border-bottom: 1px solid #fff;
    opacity: 0;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
}

.common-pagination .swiper-pagination-bullet-active {
    padding-right: 82px;
    background-color: transparent;
    position: relative;
}

.common-pagination .swiper-pagination-bullet-active::after {
    opacity: 1;
}

.common-pagination .swiper-pagination-bullet-active:last-child {
    padding-right: 0;
    padding-left: 82px;
}

.common-pagination .swiper-pagination-bullet:last-child::after {
    left: auto;
    right: 19px;
}

.pre-trial_pagination .swiper-pagination-bullet {
    color: #18918a;
}

.pre-trial_pagination .swiper-pagination-bullet-active {
    color: #fff;
}

.arrows__container {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    right: 0;
}

.common-prev,
.common-next {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    min-height: 50px;
    min-width: 50px;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
    z-index: 10;
    cursor: pointer;
}

.common-arrow {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    min-width: 24px;
    min-height: 24px;
}

.light {
    background: #18918a;
}

.pre-trial .pre-trial_pagination {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -50px !important;
}

.pre-trial .arrows__container {
    top: -115px;
}

@media (hover: hover) {
    .common-prev:hover,
  .common-next:hover {
        background: #00786a;
    }
}
.pre-trial {
    background: #173b43;
    padding-top: 80px;
}

.pre-trial__top-titel {
    padding-top: 8px;
    display: block;
}

.pre-trial__top-text {
    padding-top: 24px;
    max-width: 485px;
}

.pre-trial__bottom {
    padding-bottom: 86px;
}

.pre-trial__swiper {
    margin-top: 64px;
    border-top: 1px solid #18918a;
    border-bottom: 1px solid #18918a;
}

.pre-trial__slide {
    padding: 36px 16px 24px 24px;
    border-right: 1px solid #18918a;
    -webkit-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    min-height: 420px;
}

.pre-trial__slide-top {
    gap: 8px;
}

.pre-trial__slide-two {
    max-width: 292px;
    padding: 24px 0 44px;
}

.pre-trial__slide-flex {
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #18918a;
    width: 100%;
}

.pre-trial__slide-flex_two {
    padding-top: 12px;
}

.pre-trial__slide-conainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
    padding-top: 24px;
}

.pre-trial__slide-conainer_column {
    gap: 12px;
}

.pre-trial__slide-conainer_column-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 284px;
}

.pre-trial__slide-conainer_btn {
    min-width: 32px;
    width: 32px;
    height: 32px;
}

.pre-trial__slide-conainer_column,
.pre-trial__slide-top,
.pre-trial__slide-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (hover: hover) {
    .pre-trial__slide:hover {
        background: #18918a;
    }
}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
    <section class="pre-trial">
        <div class="container">
            <div class="pre-trial__top">
                <p class="text-or-24-16 color-white">
                    Адвокаты бюро «Деловой фарватер» решают
                </p>
                <h2 class="pre-trial__top-titel text-om-white-42-36-26">
                    90% дел в досудебном порядке
                </h2>
                <p class="pre-trial__top-text text-or-16 color-white">
                    Из них 98% заканчиваются минимальными последствиями или отказом в возбуждении уголовного дела.
                </p>
            </div>
            <div class="pre-trial__bottom">
                <div class="swiper pre-trial__swiper swiper-common">
                    <div class="swiper-wrapper pre-trial__wrapper">
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        на 96 000 000 р.
                                    </p>
                                </div>
                                <p class="pre-trial__slide-two text-or-16-14 color-white">
                                    А также устранен риск привлечения к уголовной ответственности
                                </p>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство пластиковых изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        на 206 000 000 р.
                                    </p>
                                </div>
                                <p class="pre-trial__slide-two text-or-16-14 color-white">
                                    Клиенты не помещены в СИЗО, находятся на свободе
                                </p>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Промышленность
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    315 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    109 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        101 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа кондитерских изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        106 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа строительных материалов
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    118 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    12 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        101 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа кондитерских изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="pre-trial_pagination common-pagination"></div>
                    
                    <div class="arrows__container">
                        <div class="pre-trial-prev common-prev light">
                            <img class="common-arrow" src="assets/img/arrow-left.png" alt="arrow">
                        </div>
                        <div class="pre-trial-next common-next light">
                            <img class="common-arrow" src="assets/img/arrow-right.png" alt="arrow">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


Источник

Ответы (1 шт):

Автор решения: De.Minov

Ждём-с пока в CSS завезут новые псевдоселекторы, а пока колхозим JSом.

Подключаем параметр watchSlidesProgress, который будет добавлять класс .swiper-slide-visible для тех слайдов, которые сейчас в пределах границы .swiper.
И за счёт ивентов свайпера, будем определять последний слайд и вешать ему класс .swiper-slide-visible--last и вот уже его стилизуем как хочется.

// Вставьте эти функции в начале кода
const removeLastVisibleSlide = (swiper) => {
  const lastVisible = swiper.slidesEl.querySelector('.swiper-slide-visible--last');
  if (lastVisible) lastVisible.classList.remove('swiper-slide-visible--last');
}

const identifyLastVisibleSlide = (swiper) => {
  const visibles = swiper.slidesEl.querySelectorAll('.swiper-slide-visible');
  visibles[visibles.length - 1].classList.add('swiper-slide-visible--last');
}

new Swiper('.swiper', {
  slidesPerView: 4,
  spaceBetween: 10,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // подключите нижеуказанные параметры к свайперу
  watchSlidesProgress: true,
  on: {
    setTransition: removeLastVisibleSlide,
    slideChange: removeLastVisibleSlide,
    transitionEnd: identifyLastVisibleSlide,
    init: identifyLastVisibleSlide
  },
});
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.swiper {
  display: block;
  width: 500px;
  height: 200px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #f2f2f2;
}

/* Используйте этот класс для стилизации последнего элемента */
.swiper-slide-visible--last {
  background-color: red;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
    <div class="swiper-slide">4</div>
    <div class="swiper-slide">5</div>
    <div class="swiper-slide">6</div>
    <div class="swiper-slide">7</div>
    <div class="swiper-slide">8</div>
    <div class="swiper-slide">9</div>
    <div class="swiper-slide">10</div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

P.s.

Во время анимации класс .swiper-slide-visible--last удаляется, иначе, я думаю, визуал будет корявый и только когда анимация закончена - добавляем класс обратно.

P.s.s

Надо уже спать идти..
Вариант выше пойдёт для каких-то более "тяжёлых" задач.
В случае с задачей автора есть более простое решение.

Суть в чём, допустим у каждого слайда есть border-right: 2px solid red, и в границах .swiper'а у последнего слайда border-right лишний, т.е. нужно как-то спрятать эти border-right-width.

Как вариант, сделать slidesPerView: 'auto', а "размерность" слайдов задавать через CSS:

.swiper-slide {
  width: calc((100% + 2px) / 4);
}

Разберём:

  • 100% - в данном случае это будет ширина именно .swiper.
  • + 2px - это border-right-width.
  • / 4 - это количество слайдов, т.е. slidesPerView.

new Swiper('.swiper', {
  slidesPerView: 'auto',
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.swiper {
  display: block;
  width: 500px;
  height: 200px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc((100% + 2px) / 4);
  background-color: #f2f2f2;
  border-right: 2px solid red;
  box-sizing: border-box;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
    <div class="swiper-slide">4</div>
    <div class="swiper-slide">5</div>
    <div class="swiper-slide">6</div>
    <div class="swiper-slide">7</div>
    <div class="swiper-slide">8</div>
    <div class="swiper-slide">9</div>
    <div class="swiper-slide">10</div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Если будет spaceBetween, то к выражение будет таким:

width: calc((100% + 2px - 10px * 3) / 4);
  • - 10px * 3 - это spaceBetween * (slidesPerView - 1).

Спасибо, подошел первый вариант Но теперь есть проблема в том что когда слайд переключается видно border-right в момент смены слайдов Это никак не пофиксить?

Скорее всего вы скопировали полностью мой пример, а нужно было по примеру доработать ваш JS :)

// Вставьте эти функции в начале кода
const removeLastVisibleSlide = (swiper) => {
  const lastVisible = swiper.slidesEl.querySelector('.swiper-slide-visible--last');
  if (lastVisible) lastVisible.classList.remove('swiper-slide-visible--last');
}

const identifyLastVisibleSlide = (swiper) => {
  const visibles = swiper.slidesEl.querySelectorAll('.swiper-slide-visible');
  visibles[visibles.length - 1].classList.add('swiper-slide-visible--last');
}

document.querySelectorAll('.swiper-common').forEach(el => {
  let swiper = new Swiper(el, {
    slidesPerView: 4,
    loop: true,
    pagination: {
      el: el.querySelector('.common-pagination'),
      clickable: true,
      renderBullet: function (index, className) {
        return '<span class="' + className + '">' + "0" + (index + 1) + "</span>";
      },
    },
    navigation: {
      nextEl: el.querySelector('.common-next'),
      prevEl: el.querySelector('.common-prev')
    },
    // подключите нижеуказанные параметры к свайперу
    watchSlidesProgress: true,
    on: {
      setTransition: removeLastVisibleSlide,
      slideChange: removeLastVisibleSlide,
      transitionEnd: identifyLastVisibleSlide,
      init: identifyLastVisibleSlide
    },
  });
});

И возможно ли как-то сделать первый вариант на несколько слайдеров? Т.к сейчас работает только у первого слайдера

Я написал об этом:

Во время анимации класс .swiper-slide-visible--last удаляется, иначе, я думаю, визуал будет корявый и только когда анимация закончена - добавляем класс обратно.

Чтобы работало по вашей логике, нужно изменить ивенты:

// подключите нижеуказанные параметры к свайперу
watchSlidesProgress: true,
on: {
  transitionEnd: (swiper) => {
    removeLastVisibleSlide(swiper);
    identifyLastVisibleSlide(swiper);
  },
  init: identifyLastVisibleSlide
},
→ Ссылка

licensed under cc by-sa 3.0 with attribution.