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

【问题标题】：Slick multiple class same function - looking for best solution光滑的多个类相同的功能 - 寻找最佳解决方案
【发布时间】：2019-06-25 17:54:58
【问题描述】：

我将 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>

【问题讨论】：

标签： javascript slick.js

【解决方案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,
  });
  
   });

等高在一起。

【讨论】：

【解决方案2】：

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

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

它对我有用。我的课是

名人和卖家

【讨论】：