Vertical Slick slider full screen. How can I make the footer show after the slide?

M

Maxim2019-12-07 02:18:38

Slider

Maxim, 2019-12-07 02:18:38

Good afternoon.
Please help with the implementation of a vertical slick slider on the whole screen, after which (or inside of which) there is a footer (say) 300 px high. The main goals are each slide to full screen, mouse scrolling so that the footer is displayed correctly (not full screen as it is now if I stuff it in main / or not shown at all when it is outside the slider).
Maybe someone knows how else to make a certain block become display: none when the footer is active?
Advise which slider to use if you think that the slick is not very good.
Thanks to everyone who doesn't pass by!
My code.
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');
  }
});

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

F

fixeri, 2019-12-07
@Rainspistols

Something like this

<!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>