javascript - 尝试将按钮附加到当前幻灯片以在 slick.js 中在它们之间导航

Question

这是我的问题。

我正在使用 slick 在我的网站上创建幻灯片。它非常整洁，基本上您可以通过公平的自定义创建许多不同的幻灯片。

唯一的问题是我想让我的按钮在当前幻灯片内的幻灯片之间导航，而不是在主环绕幻灯片内，以创造更好的用户体验并使导航响应，所以当你调整视口大小时，按钮将坚持中心图像（或当前图像，这是相同的，因为它们具有相同的类）。

这是我的代码：

$(function() {
  $('.slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    nextArrow: '<button class="slick-n"><</button>',
    prevArrow: '<button class="slick-p">></button>',
    appendArrows: ('.slider').next()
  });
});

.slider {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.slick-slide {
  margin: 0px 5px;
  transition: all ease-in-out .3s;
  opacity: .2;
  img {
    max-width: 100%;
    width: 100%;
  }
}

.slick-n {
  position: absolute;
  left: 0;
  top: 48%;
  z-index: 2;
}
.slick-p {
  position: absolute;
  right: 0;
  top: 48%;
  z-index: 2;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  position: relative;
  opacity: 1;
}

.variable .slick-slide {
  width: 300px;
}

<div class="slider">
		<div><img src="img/main-carousel.jpg"></div>
		<div class="variable"><img src="img/carousel2.jpg"></div>
		<div class="variable"><img src="img/main-carousel.jpg"></div>
</div>

我正在使用 scss 而不是 css 和 jquery。

首先要注意的是，这种方法不起作用，因为它会将我的按钮附加到右侧的 div 中，但由于某种原因，箭头仅在第二张幻灯片中起作用。

我之前尝试做一些不同的事情，我创建了一个函数并在幻灯片对象中回调，但它也不起作用：

$(function() {
  $('.slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    nextArrow: '<button class="slick-n"><</button>',
    prevArrow: '<button class="slick-p">></button>',
    appendArrows: myfunction()
  });
  function myfunction() {
    $('.slick-current').addClass('.other-class')
  }
});

但由于某种原因，它不会让我访问该元素。我尝试了许多其他方法，但基本上，我永远无法访问元素 .slick-current 或 .slick-center，脚本总是默默地失败。

有没有人有同样的问题？

标签： javascriptjquerycssslick.js