RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1591495
Accepted
Майя
Майя
Asked:2024-08-21 23:12:09 +0000 UTC2024-08-21 23:12:09 +0000 UTC 2024-08-21 23:12:09 +0000 UTC

如何获取最后一个可见的滑动幻灯片

  • 772

您需要删除可见幻灯片中最后一个元素的右边框,如何执行此操作?

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> 

javascript
  • 1 1 个回答
  • 28 Views

1 个回答

  • Voted
  1. Best Answer
    De.Minov
    2024-08-22T06:36:30Z2024-08-22T06:36:30Z

    我们正在等待新的伪选择器被引入 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>

    聚苯乙烯

    在动画过程中,该类.swiper-slide-visible--last被删除,否则,我认为视觉上会很笨拙,只有当动画完成时,我们才将类添加回来。

    嘘

    我应该已经去睡觉了。
    上面的选项适用于一些更“繁重”的任务。
    对于作者的问题,有一个更简单的解决方案。

    关键是,假设每张幻灯片都有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)。

    谢谢,第一个选项有效,但是现在有一个问题:当幻灯片切换时,右边框在切换幻灯片时可见,有没有办法解决这个问题?

    很可能你完全复制了我的示例,但是你需要根据示例修改你的 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
    },
    
    • 1

相关问题

  • 第二个 Instagram 按钮的 CSS 属性

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5