使用 slick js 在第三张幻灯片上显示弹出模式

Question

你好，我有一个问题，我有一个关于 slick.js 的问题。我有一个功能，我有一个滑块。如果您想查看更多内容，将出现注册模式。

我做了如下代码。有没有可能，我希望滑块正常运行到第二张幻灯片，当第三张幻灯片出现模态寄存器时？

并且当用户想要转到幻灯片 3 时，它将继续定向到模态寄存器，以便用户无法到达第四张幻灯片。这可能吗？

谁能帮帮我？我不知道如何

我的JS

      var $slider = $('.slider-banner');
      var $progressBar = $('.progress');
      var $status = $('.pagingInfo');
      var $progressBarLabel = $( '.slider__label' );

    $slider.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
      //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
      if(!slick.$dots){
        return;
      }
      
      var i = (currentSlide ? currentSlide : 0) + 1;
      $status.text((i-1) + '-' + (i) + '/' + slick.slideCount);
    });

      //   Progress Bar
      $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
        var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
        
        $progressBar
          .css('background-size', calc + '% 100%')
          .attr('aria-valuenow', calc );
        
        $progressBarLabel.text( calc + '% completed' );
      });

    $('.slider-banner').slick({
        // arrows: false,
        dots: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
        nextArrow: "<button class='arrowBannerRight' data-toggle='modal' data-target='#exampleModal'><i class='fas fa-chevron-right'></i></button>",
    });

我的CSS

    #bannerHome{
        height: 100vh ;
        background-color: #c6c6c6;
    }

    #bannerHome #homeBanner {
        height: 100vh ;
        padding: 0;
        position:relative;
    }

    #bannerHome #homeBanner .slider-banner {
        height: 100%;
        width: 100%;
    }

    #bannerHome #homeBanner .slider-banner .item {
        height: 100vh ;
        margin: 0 5px;
    }

    #bannerHome #homeBanner .slider-banner .item .content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        height: 100%;
        padding: 0 10%;
    }

    #bannerHome #homeBanner .slider-banner .item .content .second-layer .title{
         width:55%;
    }

    #bannerHome #homeBanner .slider-banner .item .content .second-layer h1{
         color: #fff;
         font-size: 25px;
         line-height: 25px;
    }

    .arrowBannerLeft{
        position: absolute;
        background: transparent;
        border: none;
        top: 50%;
        left: 2%;
        transform: translate(-2%, -50%);
        z-index: 1;
    }

    .arrowBannerLeft:focus{
        outline: none;
        box-shadow: none;
    }

    .arrowBannerRight{
        position: absolute;
        background: transparent;
        border: none;
        top: 50%;
        right: 2%;
        transform: translate(-2%, -50%);
        z-index: 1;
    }

    .arrowBannerRight:focus{
        outline: none;
        box-shadow: none;
    }

    .pagingInfo{
      position:absolute;
      bottom: 7%;
      left:50%;   
      transform:translate(-50%,-50%);
    }

    .progress {
      position:absolute;
      bottom: 5%;
      left:50%;   
      transform:translate(-50%,-50%);
      display: block;
      width: 100%;
      height: 5px;
      border-radius: 5px;
      overflow: hidden;
      
      background-color: #f5f5f5;
      background-image: linear-gradient(to right, #ED951E ,#ED951E);
      background-repeat: no-repeat;
      background-size: 0 100%;
      
      transition: background-size .4s ease-in-out;
    }

    ul.slick-dots {  
      display: none;          
    }

我的HTML


    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

    <section id="bannerHome">
       <div class="container-fluid">
          <div class="row">
              <div class="col-12" id="homeBanner">
                 <div class="slider-banner">
                    <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                   <div class="item">
                        <div class="content">
                            <div class="second-layer">
                                <div class="title">
                                     <h1>
                                           Lorem ipsum dolor sit amet.
                                     </h1>
                                </div>
                            </div>
                         </div>
                     </div>
                  </div>
                
                 <!--      Number Indicator        -->
                <span class="pagingInfo"></span>
                 <!--      Progress Indicator        -->
                <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                  <span class="slider__label sr-only"></span>
                </div>
               </div>
             </div>
    </section>

      <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

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

Answer 1

如果幻灯片索引大于 2，则需要调用模态 window 并将滑块转回没有动画的第二张幻灯片。

var $slider = $('.slider-banner');
var $progressBar = $('.progress');
var $status = $('.pagingInfo');
var $progressBarLabel = $('.slider__label');

$slider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
  //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
  if (!slick.$dots) {
    return;
  }

  var i = (currentSlide ? currentSlide : 0) + 1;
  $status.text((i - 1) + '-' + (i) + '/' + slick.slideCount);
});

//   Progress Bar
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;

  $progressBar
    .css('background-size', calc + '% 100%')
    .attr('aria-valuenow', calc);

  $progressBarLabel.text(calc + '% completed');
});

//slide limiter
$slider.on('afterChange',function(e,slick,currentSlide){
  if(currentSlide >= 2){
    $('#exampleModal').modal('show');    
    setTimeout(function(){
      $slider.slick('slickGoTo',1,true)
    },1)    
  }
})

$('.slider-banner').slick({
  dots: true,
  slidesToShow: 2,
  slidesToScroll: 1,
  prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
  nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});

#bannerHome {
  height: 100vh;
  background-color: #c6c6c6;
}

#bannerHome #homeBanner {
  height: 100vh;
  padding: 0;
  position: relative;
}

#bannerHome #homeBanner .slider-banner {
  height: 100%;
  width: 100%;
}

#bannerHome #homeBanner .slider-banner .item {
  height: 100vh;
  margin: 0 5px;
}

#bannerHome #homeBanner .slider-banner .item .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: 100%;
  padding: 0 10%;
}

#bannerHome #homeBanner .slider-banner .item .content .second-layer .title {
  width: 55%;
}

#bannerHome #homeBanner .slider-banner .item .content .second-layer h1 {
  color: #fff;
  font-size: 25px;
  line-height: 25px;
}

.arrowBannerLeft {
  position: absolute;
  background: transparent;
  border: none;
  top: 50%;
  left: 2%;
  transform: translate(-2%, -50%);
  z-index: 1;
}

.arrowBannerLeft:focus {
  outline: none;
  box-shadow: none;
}

.arrowBannerRight {
  position: absolute;
  background: transparent;
  border: none;
  top: 50%;
  right: 2%;
  transform: translate(-2%, -50%);
  z-index: 1;
}

.arrowBannerRight:focus {
  outline: none;
  box-shadow: none;
}

.pagingInfo {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.progress {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, #ED951E, #ED951E);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .4s ease-in-out;
}

ul.slick-dots {
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />


<section id="bannerHome">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12" id="homeBanner">
        <div class="slider-banner">
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 1.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 2.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 3.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 4.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 5.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 6.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 7.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 8.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 9.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 10.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 11.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 12.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 13.
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content">
              <div class="second-layer">
                <div class="title">
                  <h1>
                    Lorem ipsum dolor sit amet 14.
                  </h1>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--      Number Indicator        -->
        <span class="pagingInfo"></span>
        <!--      Progress Indicator        -->
        <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
          <span class="slider__label sr-only"></span>
        </div>
      </div>
    </div>
</section>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

使用 slick js 在第三张幻灯片上显示弹出模式

Showing a popup modal when on the 3rd slide with slick js

javascript

jquery

bootstrap-modal

slick.js