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

时间：2019-03-01 16:12:34

标签： javascript jquery css slick.js slick-slider

所以我有这个多功能滑块，在这里我使用光滑的滑块同步来使该滑块起作用。除了当我想使用其他/我自己的按钮作为移动屏幕上的下一个上一个箭头（768及以下）时，其他所有操作都很好。就显示正确的按钮而言，我的UI设置正确无误。但是我的设置无法将我的自定义按钮识别为移动设备上的圆滑箭头。

常规屏幕 enter image description here

移动屏幕（按钮不能用作箭头） enter image description here 

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

2 个答案:

答案 0 :(得分：1)

此代码部分不正确： 

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

要添加的更多内容：

这个光滑的滑块模块似乎有很多bug，并且当将其调整为较小的屏幕尺寸时，它们会杀死自定义控制按钮。而且它不会生成断点事件。

我添加了一些其他代码并更新了jsfiddle，以确保您的测试页在多次调整窗口大小后仍能正常工作。

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

答案 1 :(得分：0)

感谢谢尔盖·努德诺夫

通过sergey将下一个上一个箭头jquery更改为正确的代码，似乎可以立即使我的自定义按钮得到控制。那是主要问题。

但是，就像外科手术建议的那样，滑块在调整屏幕大小时似乎有问题。我修改了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
      );
   }

});

相关问题
最新问题