Question

我正在使用Slick作为其他团队的最终用户的附件。如果他们需要在页面上使用多个包装，我想通过将外部包装更改为（carousel-wrap-1，carousel-wrap-2….etc）来使其尽可能简单。问题： 1.是否有可能使JS函数像这样？（附带的是我的js代码，加上我对所有幻灯片的高度均等的修复。）要么 2.我仍然可以要求他们每次要添加新的轮播时都复制并粘贴，但是在“ prevArrow和nextArrow”内部，如何使其仅调用该父级？（正在考虑$（this）+ $（“。prev”））??

$(document).ready(function(){
$("[class*='carousel-wrap-'] .carousel").slick({
prevArrow: $(".prev"),
nextArrow: $(".next"),
accessibility: true,
autoplay: true,
autoplaySpeed: 7000,
dots: true,
infinite: true,
speed: 600,
fade: true,
cssEase: 'linear',
pauseOnHover: true,
pauseOnFocus: true,
});


});

$(document).ready(function() {
  var offsetHeight = $('.slick-list').outerHeight();
  $("[class*='carousel-wrap-'] .carousel .band").outerHeight(offsetHeight);
});

$( window ).resize(function() {
  $("[class*='carousel-wrap-'] .carousel .band").css("height", "100%")
  var offsetHeight = $('.slick-list').outerHeight();
  $("[class*='carousel-wrap-'] .carousel .band").outerHeight(offsetHeight);
});

<div class="carousel-wrap-1">
<div class="carousel-control">
      <div class="prev"></div><div class="next"></div>
      </div>
      
  <div class="carousel">
      <div class="band slide1"></div>
      <div class="band slide2"></div>
      <div class="band slide3"></div>
  </div>
</div>

Answer 1

我找到了解决方案，但不确定如何组合

$("[class*='carousel-wrap-'] .carousel").each(function() {
  $(this).slick({
  appendArrows: $(this).siblings('.carousel-control'),
  accessibility: true,
  autoplay: true,
  autoplaySpeed: 7000,
  dots: true,
  infinite: true,
  speed: 600,
  fade: true,
  cssEase: 'linear',
  pauseOnHover: true,
  pauseOnFocus: true,
  });
  
   });

等高。

Answer 2

可以将一个函数用于多个类。您只需传入要使用该函数的所有类名。像这样：

$('.celebrities, .sellers').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 6,
    slidesToScroll: 1
  }

它对我有用。我的课是

<块引用>

名人和卖家

光滑的多类相同功能-寻找最佳解决方案

2 个答案: