Как установить позицию для последнего элемента в swiper?

Как настроить позиционирование последнего слайда таким образом, чтобы его высота равнялась 100vh, как у остальных слайдов, и чтобы перелистывание начиналось только после того, как последний слайд займет всю высоту окна при скролле наверх?
  • 20 августа 2024 г. 15:23
Ответы на вопрос 2
Для этого можно использовать параметр "slidesPerView" в настройках swiper, чтобы показывать только один слайд на экране, и параметр "spaceBetween" для создания отступа между слайдами. 

Пример кода для установки такой позиции для последнего элемента в swiper:

```html
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="height: 100vh;">Slide 1</div>
    <div class="swiper-slide" style="height: 100vh;">Slide 2</div>
    <div class="swiper-slide" style="height: 100vh;">Slide 3</div>
  </div>
</div>

<script>
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 20,
    direction: 'vertical',
    mousewheel: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
</script>
```

В этом примере высота каждого слайда установлена на 100vh, а параметр slidesPerView равен 1, чтобы показывать только один слайд на экране. Перелистывание будет начинаться только после прокрутки всего последнего слайда в окне на высоту 100vh. 

Таким образом, вы можете настроить позиционирование последнего слайда в swiper так, чтобы его высота равнялась 100vh и чтобы перелистывание начиналось после полной прокрутки последнего слайда.
Самое просто попробуй установить его высоту через CSS. 
.last_slide {}

Попробуй контролировать через js и блокировать, пока последний слайд не окажется на своем месте.
найди положение getBoundingClientRect()
Можешь попробовать проверить по нижнему краю слайда. Проверяй, если последний слайд не виден полностью и идет скролл наверх, то блокируй. Иначе True.
Похожие вопросы