Rainspistols
@Rainspistols

Вертикальный Slick slider на весь экран. Как сделать чтобы после слайда показывался футер?

Добрый день.
Прошу помочь с реализацией вертикального slick слайдера на весь экран, после которого(или внутри которого) есть футер высотой(скажем) 300 px. Главные цели - каждый слайд на весь экран, прокрутка mouse scroll, чтобы отображался футер корректно(не на весь экран как он есть сейчас, если я запихиваю его в main/или вообще не показывался когда он снаружи слайдера).
Может кто знает как еще сделать чтобы при активном футере определенный блок становился display: none?
Посоветуйте какой использовать слайдер, если считаете что слик не очень.
Спасибо каждому кто не пройдет мимо!

Мой код.
html
main<slick-slider>
  section
  section
  section
footer

css
main { w100%+h100vh}
js
const slider = $('.swiper__snap');
slider.slick({
  vertical: true,
  arrows: false,
  verticalSwiping: true,
  slidesToScroll: 1,
  slidesToShow: 1,
  infinite: false,
  adaptiveHeight: true,
});

slider.on('wheel', function(e) {
  e.preventDefault();
  console.log(e.originalEvent.deltaY);

  if (e.originalEvent.deltaY < 0) {
    $(this).slick('slickPrev');
  } else {
    $(this).slick('slickNext');
  }
});
  • Вопрос задан
  • 1823 просмотра
Решения вопроса 1
@fixeri
Как-то так
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <style type="text/css">
    .slide { height: 100vh; background: red; border-top: 1px solid blue; }
    .footer { height: 300px; background: orange; }
    #btn { position: fixed; top:0; z-index: 3; left:50%; 
          transform: translateX(-50%); width: 50px; height: 50px;  }
  </style>
</head>
<body>
  <button style="display: block;" id="btn">X</button>
  <div class="row">
    <div class="slide"> 1 slide </div>
    <div class="slide"> 2 slide </div>
    <div class="slide"> 3 slide </div>
    <div class="slide"> 4 slide </div>
    <div class="slide"> 5 slide </div>
    <div class="slide footer"> footer </div>
  </div>
  <script type="text/javascript">

"use strict";

    let page = {
      pageYOffset: 0
    };

    let coordsElements = Array.from(document.querySelectorAll(".slide"), (item) => item.getBoundingClientRect());
    let elementsLength = coordsElements.length;
    let height = coordsElements[0].height;
    let btn = document.getElementById("btn");
    window.addEventListener("scroll", () => {
      let Y = window.pageYOffset;
      if (page.pageYOffset > window.pageYOffset) {
        page.pageYOffset = window.pageYOffset;

        for (let i = elementsLength; i >= 1; i--) {
          if (Y < height * i && Y > height * (i-1)) {
            if (btn.style.display !== "block") btn.style.display = "block";
            return window.scrollTo({ top: height * (i-1), behavior: "auto" });
          }
        }
      } else {
        page.pageYOffset = window.pageYOffset;

        for (let i = 1; i <= elementsLength; i++) {

            if (Y > height * (i-1) && height * i > Y) {
              if (Y > height * (elementsLength - 2) && btn.style.display !== "none") {
                btn.style.display = "none";
              }
              return window.scrollTo({ top: height * i, behavior: "auto" });
            }
        }
      }
    });

</script>
</body>
</html>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы