在开始向下一张幻灯片过渡之前，请延迟该幻灯片幻灯片

Question

我要在当前的幻灯片.closed中添加一个beforeChange类，但也尝试在幻灯片过渡1秒钟之前延迟幻灯片。

添加.closed类时，它将当前幻灯片的高度设置为0px !important。我正在使用transition: height 1s ease-in-out CSS来降低高度到0px的高度。幻灯片的高度固定，因此动画效果很好。

但是我正在努力将幻灯片延迟1秒beforeChange。光滑的幻灯片会立即转换，而.closed css转换（1秒）会丢失。

在光滑的过渡开始切换到下一张幻灯片之前，谁能帮助我将幻灯片延迟1秒。

请参阅jsfiddle：https://jsfiddle.net/joshmoto/Lcaung0w/

这是下面的代码，我需要帮助...

$('#page-slider').slick({
  draggable: false,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  speed: 0,
  customPaging: function(slider, i) {
    var page_number = $(slider.$slides[i]).data('page');
    return '<button>.' + page_number + '</button>';
  },
  appendDots: $('.page-dots')

}).on('beforeChange', function(event, slick, currentSlide) {

  // add .closed class
  $('#page-slider .slick-slide[data-slick-index="' + currentSlide + '"] .card').addClass('closed');

  // delay by 1 seconds before changing to next slide (not working)
  setTimeout(function() {
    // got nothing but time
  }, 1000);

}).on('afterChange', function(event, slick, currentSlide) {

  // remove .closed class
  $('#page-slider .slick-slide[data-slick-index="' + currentSlide + '"] .card').removeClass('closed');

});

---

请参阅下面的完整实时演示，所有代码...（使用小提琴和sass一样）

// page slider
$('#page-slider').slick({
  draggable: false,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  speed: 0,
  customPaging: function(slider, i) {
    var page_number = $(slider.$slides[i]).data('page');
    return '<button>.' + page_number + '</button>';
  },
  appendDots: $('.page-dots')

}).on('beforeChange', function(event, slick, currentSlide) {

  // add closed class
  $('#page-slider .slick-slide[data-slick-index="' + currentSlide + '"] .card').addClass('closed');
  
  // delay by 1 seconds before changing to next slide (not working)
  setTimeout(function() {
    // got nothing but time
  }, 1000);

}).on('afterChange', function(event, slick, currentSlide) {

  // remove closed class
  $('#page-slider .slick-slide[data-slick-index="' + currentSlide + '"] .card').removeClass('closed');

});

// this sets a height in pixels for each .card element
function page_heights() {
  $('#page-slider .card').each(function() {
    var h = $('.card-wrapper', this).outerHeight();
    $(this).css('height', h);
  });
}

// run page heights
page_heights();

// resize functions
$(window).resize(function() {

  // run page heights when resized
  page_heights();

});

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css";
@import "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css";
@import "https://fonts.googleapis.com/css?family=Inconsolata";

HTML,
BODY {
  height: 600px; /* demo only */
  min-height: 600px; /* demo only */
  position: relative;
}

BODY {
  font-family: 'Inconsolata', monospace;
  font-size: .8em;
  background: #000;
  color: #404040;
}

BODY :not(INPUT) {
  user-select: none;
}

HEADER {
  position: absolute;
  width: 100%;
}

NAV {
  height: 78px;
}

NAV .navbar-toggler {
  padding: 23px 1rem;
  background: transparent;
  border-radius: 0;
  width: 60px;
}

NAV .navbar-toggler .icon-bar {
  height: 2px;
  display: block;
  background: #fff;
  transition: width .1s ease-in-out;
}

NAV .navbar-toggler .icon-bar:first-child {
  width: 30px;
  margin-bottom: 10px;
}

NAV .navbar-toggler .icon-bar:last-child {
  width: 20px;
}

NAV .navbar-toggler:hover .icon-bar:first-child {
  width: 20px;
}

NAV .navbar-toggler:hover .icon-bar:last-child {
  width: 30px;
}

NAV .navbar-toggler:focus {
  outline: 0;
}

NAV .navbar-brand {
  font-size: 0.9rem;
}

HEADER NAV .navbar-nav {
  display: block;
}

HEADER NAV .navbar-nav .nav-item {
  display: block;
  float: left;
  clear: left;
}

HEADER NAV .navbar-nav .nav-item .nav-link,
HEADER NAV .navbar-nav .nav-item .navbar-brand {
  float: left;
}

NAV .nav-link,
NAV .navbar-brand {
  color: #fff;
}

NAV .nav-link .fas,
NAV .navbar-brand .fas,
NAV .nav-link .fab,
NAV .navbar-brand .fab {
  font-size: 1rem;
  position: relative;
  bottom: -1px;
}

MAIN {
  height: 100%;
  padding: 78px 0;
}

MAIN .container {
  height: 100%;
}

MAIN .container>.row {
  height: 100%;
}

FOOTER {
  position: absolute;
  width: 100%;
  bottom: 0;
}

#page-slider {
  height: 100%;
}

#page-slider .page-dots {
  position: relative;
}

#page-slider .page-dots UL {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

#page-slider .page-dots UL LI {
  flex: 0 0 25%;
  max-width: 25%;
}

#page-slider .slick-list {
  height: 100%;
}

#page-slider .slick-list .slick-track {
  height: 100%;
}

#page-slider .slick-slide {
  height: 100%;
}

#page-slider .slick-slide>DIV {
  height: 100%;
}

#page-slider .slide {
  height: 100%;
}

#page-slider .slide HEADER {
  position: relative;
}

#page-slider .slide MAIN {
  padding: 0;
  overflow: hidden;
}

#page-slider .slide MAIN .card {
  transition: height 1s ease-in-out;
  background: none;
  overflow: hidden;
  border-right: none;
  border-left: none;
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
}

#page-slider .slide MAIN .card .card-wrapper {
  padding: 15px;
  height: auto;
}

#page-slider .slide MAIN .card.closed {
  height: 0 !important;
}

#page-slider .slide FOOTER {
  position: relative;
  bottom: initial;
}

#page-slider .slide FOOTER .page-dots {
  position: relative;
}

.page-side-dots {
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

.page-side-dots UL {
  padding: 0;
  list-style: none;
}

.page-side-dots UL LI {
  float: left;
  clear: both;
}

<header>
  <nav class="navbar">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand mr-auto" href="#">master of none</a>

    <a class="nav-link text-muted" href="#">hire me</a>

    <a class="nav-link" href="#">07970232432</a>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Hello</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Interests</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Resume</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Stuff</a>
        </li>
      </ul>
    </div>

  </nav>
</header>

<main>

  <div id="page-slider">

    <div class="slide" data-page="01">
      <div class="container">
        <div class="row align-items-center">
          <div class="col">
            <header>
              Time wasted here 00:03
            </header>
            <main>
              <div class="card">
                <div class="card-wrapper">

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend sed velit a luctus. Nunc luctus odio quis viverra sagittis. Mauris sit amet odio ut augue tristique viverra. Maecenas porttitor ex ac ex interdum venenatis. Ut erat lectus, pretium eget mi a, pellentesque ullamcorper neque. Aliquam vel varius nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras volutpat metus odio, ac luctus massa convallis pulvinar. Nam bibendum, leo eu semper interdum, nulla arcu mattis odio, gravida cursus arcu risus eu nisi. Duis at bibendum arcu, nec iaculis orci. Ut aliquet lectus at nulla consequat, sit amet malesuada nisi tincidunt.</p>

                </div>
              </div>
            </main>
            <footer>
              <div class="page-dots">

              </div>
            </footer>
          </div>
        </div>

      </div>
    </div>


    <div class="slide" data-page="02">
      <div class="container">
        <div class="row align-items-center">
          <div class="col">
            <header>
              Time wasted here 00:03
            </header>
            <main>
              <div class="card closed">
                <div class="card-wrapper">

                  <p>Phasellus congue lectus ex, quis commodo justo scelerisque in. Sed vel arcu tristique, porttitor metus non, dapibus velit. Aenean rutrum varius ex, eget vulputate lorem egestas nec. Maecenas in tincidunt risus convallis. Vivamus cursus nulla a molestie pharetra. Nam id lobortis ante. Donec dapibus blandit dui, a suscipit ipsum tristique non. Vivamus nisi eros, tristique quis condimentum et, bibendum lacinia massa. Fusce non venenatis dui, sit amet tincidunt nisl. Nulla sed tellus pellentesque, lacinia orci ut, tincidunt felis. Sed at vehicula lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam quis vestibulum quam. Vestibulum rutrum sodales nulla at imperdiet. Quisque est ipsum, venenatis sit amet orci eu, sollicitudin dictum lectus.</p>

                </div>
              </div>
            </main>
            <footer>
              <div class="page-dots">

              </div>
            </footer>
          </div>
        </div>

      </div>
    </div>

    <div class="slide" data-page="03">
      <div class="container">
        <div class="row align-items-center">
          <div class="col">
            <header>
              Time wasted here 00:03
            </header>
            <main>
              <div class="card closed">
                <div class="card-wrapper">

                  <p>Duis finibus orci vel ipsum suscipit, volutpat hendrerit quam molestie. Sed non mollis lacus. In elit quam, accumsan eget lectus at, varius aliquet mauris. Sed massa leo, vulputate ac bibendum vel, hendrerit a nunc. Mauris eget odio eros. Quisque ultrices velit sit amet tempor tempor. Praesent sed suscipit lacus. Nullam mattis justo quis ante gravida facilisis. Integer a tempus turpis, convallis consequat nisl. Donec interdum, quam at placerat vulputate, elit magna venenatis sapien, ut condimentum nibh velit id tortor. Donec ac efficitur sem. Proin venenatis congue vehicula. Sed vitae ornare neque, a ultrices massa.</p>

                </div>
              </div>
            </main>
            <footer>
              <div class="page-dots">

              </div>
            </footer>
          </div>
        </div>

      </div>
    </div>

    <div class="slide" data-page="04">
      <div class="container">
        <div class="row align-items-center">
          <div class="col">
            <header>
              Time wasted here 00:03
            </header>
            <main>
              <div class="card closed">
                <div class="card-wrapper">

                  <p>Nulla tincidunt consequat nisl, sit amet euismod felis. Curabitur orci urna, facilisis quis nibh at, tristique facilisis eros. In sollicitudin enim non faucibus malesuada. Pellentesque eget sodales augue. Integer laoreet, felis ut mattis auctor, neque enim fermentum ante, nec sodales massa est ac leo. Nullam vestibulum, nibh eu consequat hendrerit, ligula nunc varius dui, at lobortis metus mauris quis leo. Aliquam iaculis dui et dictum maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur in faucibus orci. Integer nec egestas felis. Aliquam dignissim nisl nec metus tempor dictum. Phasellus mollis quam nulla, ac aliquam ipsum consectetur et.</p>

                </div>
              </div>
            </main>
            <footer>
              <footer>
                <div class="page-dots">

                </div>
              </footer>
            </footer>
          </div>
        </div>

      </div>
    </div>

  </div>

  <div class="page-dots page-side-dots"></div>
</main>

<footer>
  <nav class="navbar">

    <a class="nav-link" href="#">
      <i class="fab fa-stack-overflow"></i>
    </a>

    <a class="nav-link mr-auto" href="#">
      <i class="fab fa-instagram"></i>
    </a> made by me <a class="nav-link pl-2" href="#">wtf?</a>

  </nav>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

---

我在Ken Wheeler's Github存储库中为其光滑项目添加了相同的问题。

我希望它已经存在一个功能：-）

https://github.com/kenwheeler/slick/issues/3574

我正在测试他的“您将需要的最后一个轮播” 语句！