Задать вопрос

fixeri

Ответы пользователя по тегу Slick

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

    @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>
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать слайдер с фильтрацией?

    @fixeri 
    <!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <h1>хеллоу</h1>
  <div>
    <ul class="filter">
      <li class="active" data-filter="*">Все</li>
      <li data-filter="animals">Животные</li>
      <li data-filter="fish">Рыбы</li>
      <li data-filter="insects">Насекомые</li>
    </ul>
  </div>

  <div class="slider">
    <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/BEEB/production/_108557884_gettyimages-486237421.jpg" alt="Image" class="item animals slider-image">
    <img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1706,w_3036,x_0,y_241/f_auto,q_auto,w_1100/v1554752078/shape/mentalfloss/istock-483749258.jpg" alt="Image" class="item insects slider-image">
    <img src="https://www.dw.com/image/47554840_303.jpg" alt="" class="item insects slider-image">
    <img src="https://images.unsplash.com/photo-1522720833375-9c27ffb02a5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="" class="item fish slider-image">
    <img src="https://cdn.mos.cms.futurecdn.net/RY2EpSo74hvYXyAVpTN2Gg-320-80.jpg" alt="" class="item fish slider-image">
    <img src="https://i.ytimg.com/vi/G569uHzxRD4/maxresdefault.jpg" alt="" class="item animals slider-image">
    <img src="https://i.ytimg.com/vi/ZXblC3wc7tM/maxresdefault.jpg" alt="" class="item animals slider-image">
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>
  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

  <script type="text/javascript">

    $(document).ready(function() {
        $('.filter li').click(function () {
          if( !$(this).hasClass("active") ) {
            $(this).parent().find('.active').removeClass('active');
            $(this).addClass('active');
            let selector = $(this).attr("data-filter");

            $(".slick-track").isotope({
              itemSelector: ".item",
              filter: (selector === "*") ? "*" : "." + selector
            });
          }
        });



        $('.slider').slick({
          slidesToShow: 3,
          slidesToScroll: 1
        });
      });

    </script>
</body>
</html>
    Ответ написан
    Комментировать
    Комментировать