光滑的滑块同步 - 断点上的自定义箭头

Slick slider Syncing - custom arrow on breakpoints

所以我有这个多滑块，我使用灵活的滑块同步来使这个滑块工作。一切都很好，除非我想在移动屏幕（768 及以下）上使用 different/my 自己的按钮作为下一个箭头。就显示正确的按钮而言，我的 UI 设置正确。但是我的设置无法将我的自定义按钮识别为移动设备上的光滑箭头。

普通屏幕

移动屏幕（按钮不能用作箭头） 

**here is my code**


$(document).ready(function () {

  $(".home-nav-slider-bg").slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     arrows: false,
     fade: true,
     asNavFor: '.home-nav-slider-slider',
  });


  $(".home-nav-slider-slider").slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     centerPadding: '30px',
     asNavFor: '.home-nav-slider-bg',
     centerMode: false,
     focusOnSelect: true,
     speed: 500,
     arrows: true,
     //fade: true,
     responsive: [
        {
           breakpoint: 768,
           settings: {
              nextArrow: $('.home-nav-slider-media-control button.right slick-next').get().map(function (v) { return v.outerHTML }).join(),
              prevArrow: $('.home-nav-slider-media-control button.left slick-prev').get().map(function (v) { return v.outerHTML }).join()
           }
        }


     ]
  });

  $(window).resize(function () {
     $('.home-nav-slider-slider')[0].slick.refresh();
  });
});

jQuery(window).on('load', function () {
  function getImage() {
     jQuery(".home-nav-slider-image-holder").each(function () {
        var imgSrc = $(this).find("img").attr("src");
        $(this).css('background-image', 'url(' + imgSrc + ')');
     });
  }
  getImage();
});




var $status = $('.home-nav-slider-slideCount');
var $slickElement = $('.home-nav-slider-slickElement');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  var i = (currentSlide ? currentSlide : 0) + 1;
  $status.text(i + '/' + slick.slideCount);
});

$('.home-nav-slider-slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {

  console.log(event);
  console.log(slick);
  console.log(currentSlide);
  console.log(nextSlide);

});

h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
.home-nav-slider-main .home-nav-slider-title h1 {
  color: #fff;
  font-weight: normal;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .57);
  line-height: 110%;
}
.home-nav-slider-main .home-nav-slider-media-control button {
  z-index: 1;
  border-radius: 0;
}
.home-nav-slider-main .home-nav-slider-slider {
  color: #fff;
}
.home-nav-slider-main .home-nav-slider-slider .slick-prev, .home-nav-slider-main .home-nav-slider-slider .slick-next {
  border: 1px solid #eee;
  height: 2.1rem;
  width: 40px;
  z-index: 1;
  top: -1rem !important;
}
.home-nav-slider-main .home-nav-slider-slider .slick-list {
  padding-top: 1rem;
}
.home-nav-slider-main .home-nav-slider-slider .slick-list:before {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 0;
}
.home-nav-slider-main .slick-prev:before, .home-nav-slider-main .slick-next:before {
  font-family: 'Ionicons';
}
.home-nav-slider-main .slick-next:before {
  content: '\f3d6';
}
.home-nav-slider-main .slick-prev:before {
  content: '\f3d5';
}
.home-nav-slider-main .home-nav-slider-image-holder {
  background-size: cover;
  background-position: center;
}
.home-nav-slider-main .home-nav-slider-image-holder img {
  opacity: 0;
  visibility: hidden;
}
.home-nav-slider-main .home-nav-slider-bg {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.home-nav-slider-main .home-nav-slider-bg div {
  height: 100%;
}
.home-nav-slider-main .home-nav-slider-bg .slick-slide {
  margin: 0px;
}
.home-nav-slider-main .home-nav-slider-bg img {
  height: 100vh;
  width: auto;
}
.home-nav-slider-main .home-nav-slider-wrap {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.home-nav-slider-main .home-nav-slider-slideCount {
  position: relative;
  left: 6rem;
  top: -10px;
  color: #fff;
}
.home-nav-slider-main .slick-slide {
  margin: 0px 3px;
}
.home-nav-slider-main .home-slider-gradient-wrap {
  overflow: hidden;
}
.home-nav-slider-main .home-slider-gradient-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
 /* background-color: #000;
  */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#b3000000', GradientType=0);
}
.home-nav-slider-main .home-slider-gradient-wrap .container .row {
  height: 100vh;
}
@media (min-width: 992px) {
  .home-nav-slider-main .slick-next {
    left: 2.18rem;
 }
  .home-nav-slider-main .slick-prev {
    left: 0px;
 }
}
@media (max-width: 992px) {
  .home-nav-slider-main .home-nav-slider-slider {
    position: relative;
    top: 0px;
 }
  .home-nav-slider-main .slick-prev {
    left: 0px;
 }
  .home-nav-slider-main .slick-next {
    left: 40px;
 }
}
@media (max-width: 767px) {
  .home-nav-slider-main .home-nav-slider-slider-text {
    display: block !important;
    text-align: left;
 }
  .home-nav-slider-main .home-nav-slider-slider-text p {
    text-align: left !important;
 }
  .home-nav-slider-main .home-nav-slider-slider-text p br {
    display: none;
 }
  .home-nav-slider-main .slider-home h1 {
    text-align: left;
 }
}
@media (max-width: 1024px) {
  .home-nav-slider-main .home-slider-gradient-wrap .container .row {
    height: auto;
 }
  .home-nav-slider-main .home-nav-slider-wrap {
    height: auto;
 }
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick 2-in-1-new</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
   <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
   <link href="https://fonts.googleapis.com/css?family=Teko:400,500,600,700" rel="stylesheet">
   <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

   <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <div class="home-nav-slider-main">
      <section class="home-nav-slider-wrap  mb-0 pt-11">
         <div class="home-slider-gradient-wrap">
            <div class="home-nav-slider-bg">

               <div class="home-nav-slider-image-holder">
                  <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
               </div>
               <div class="home-nav-slider-image-holder">
                  <img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1" alt="">
               </div>



            </div>
            <div class="container">
               <div class="row">
                  <div class=" col-lg-12 align-self-center">
                     <div class="home-nav-slider-title">
                        <h1> Hello<br>Slider</h1>
                     </div>
                  </div>
                  <div class="col-lg-12 align-self-center d-none d-lg-block ">
                     <span class="home-nav-slider-slideCount"></span>

                     <div class="home-nav-slider-slider home-nav-slider-slickElement ">

                        <div>
                           <div
                              class="d-flex align-items-center justify-content-between home-nav-slider-slider-text mb-3">
                              <div class="pr-5">
                                 <h6>
                                    hello
                                 </h6>
                              </div>
                              <div class="pr-5">
                                 <p>
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, officiis
                                    blanditiis suscipit rerum mollitia natus ipsam. Rerum id eligendi reiciendis dolorum
                                    excepturi, quidem incidunt. Accusantium tenetur incidunt ratione laudantium aut.

                                 </p>
                              </div>
                              <div>
                                 <a href="#">
                                    <button class="btn btn-primary">
                                       click this
                                    </button>
                                 </a>
                              </div>
                           </div>
                        </div>

                        <div>
                           <div
                              class="d-flex align-items-center justify-content-between home-nav-slider-slider-text mb-3">
                              <div class="pr-5">
                                 <h6>
                                    hello
                                 </h6>
                              </div>
                              <div class="pr-5">
                                 <p>
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, officiis
                                    blanditiis suscipit rerum mollitia natus ipsam. Rerum id eligendi reiciendis dolorum
                                    excepturi, quidem incidunt. Accusantium tenetur incidunt ratione laudantium aut.

                                 </p>
                              </div>
                              <div>
                                 <a href="#">
                                    <button class="btn btn-primary">
                                       click this
                                    </button>
                                 </a>
                              </div>
                           </div>
                        </div>


                     </div>
                  </div>

               </div>

            </div>
            <!-- small screen slide control -->
            <div class="d-flex justify-content-end d-lg-none home-nav-slider-media-control">
               <button class="btn btn-primary left "><i class="ion-ios-arrow-thin-left" aria-hidden="true"></i></button>
               <button class="btn btn-primary right "><i class="ion-ios-arrow-thin-right"
                     aria-hidden="true"></i></button>

            </div>



         </div>
      </section>
   </div>


   <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
   <script src="js/extra-jquery.js"></script>
</body>

</html>

这部分代码不正确：

settings: {
    nextArrow: $('.home-nav-slider-media-control button.right slick-next').get().map(function (v) { return v.outerHTML }).join(),
    prevArrow: $('.home-nav-slider-media-control button.left slick-prev').get().map(function (v) { return v.outerHTML }).join()
}

  1. 您在HTML中没有这些组合：
    .home-nav-slider-media-control button.right slick-next
    .home-nav-slider-media-control button.left slick-prev

  2. 你不应该复制按钮的 HTML 代码，你应该指向它们。

正确代码：

settings: {
    nextArrow: $('.home-nav-slider-media-control button.right'),
    prevArrow: $('.home-nav-slider-media-control button.left')
}

这是工作jsfiddle

更多补充：

这个光滑的滑块模块似乎有很多错误，并且在调整到较小的屏幕尺寸时会杀死自定义控制按钮。它也不会生成断点事件。

我添加了一些额外的代码并更新了 jsfiddle 以确保您的测试页在多次 window 调整大小后继续工作。

它可以优化，但至少它现在完全可以正常工作。

谢谢谢尔盖·努德诺夫

通过 sergey 将下一个、上一个箭头 jquery 更改为正确的代码似乎可以立即为我的自定义按钮提供控制权。这是主要问题。

但是就像 surgey 建议的那样，滑块在调整屏幕大小时似乎有问题。我稍微修改了 sergeys 代码，因为我的自定义按钮在某些屏幕尺寸上消失了，这个修改似乎修复了 最大调用堆栈大小超出错误 我在屏幕上来回时遇到的问题尺寸，屏幕尺寸检查导致了这个错误，但不确定为什么这个小改动修复了它，如果有人能指出修复它的原因，请告诉我。 alos 将所有断点更改为 992 ，似乎效果更好。无论如何谢谢外科医生。

换幻灯片前小屏外挂代码 

$('.home-nav-slider-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
 var width = $(window).width();
  if(width <= 768 && !$('.home-nav-slider-media-control button.right').length)
  {
  $("#small-control").html(`
<div class="d-flex justify-content-end d-lg-none home-nav-slider-media-control">
                 <button class="btn btn-primary left "><i class="ion-ios-arrow-thin-left" aria-hidden="true"></i></button>
                 <button class="btn btn-primary right "><i class="ion-ios-arrow-thin-right"
                       aria-hidden="true"></i></button>
  `);
    $('.home-nav-slider-slider').slick('slickSetOption',
     "responsive", [
        {
           breakpoint: 768,
           settings: {
              nextArrow: $('.home-nav-slider-media-control button.right'),
              prevArrow: $('.home-nav-slider-media-control button.left')
           }
        }
      ], true
   );
  }

});

修改为

$('.home-nav-slider-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
   var width = $(window).width();
   if (width <= 992 && !$('.home-nav-slider-media-control button.right').length) {
      $(".home-nav-slider-media-control").html('<button class="btn btn-primary left slick-arrow" style=""><i class="ion-ios-arrow-thin-left" aria-hidden="true"></i></button><button class="btn btn-primary right slick-arrow" style=""><i class="ion-ios-arrow-thin-right" aria-hidden="true"></i></button>');
      $('.home-nav-slider-slider').slick('slickSetOption',
         "responsive", [
            {
               breakpoint: 992,
               settings: {
                  nextArrow: $('.home-nav-slider-media-control button.right'),
                  prevArrow: $('.home-nav-slider-media-control button.left')
               }
            }
         ], true
      );
   }

});