平滑的滑块效果
平滑的滑块效果
提问于 2018-06-09 22:52:00
我使用的是Slick Slider jquery插件。http://kenwheeler.github.io/slick/
我正在尝试创造这样的效果：https://www.gillesetboissier.com/index.php?preload=1
要做到这一点。我正在尝试保持当前幻灯片的位置，以便将translate3d设置为0px。但是这个滑块被挡住了。
function slick_init() {
$('.splash-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
vertical: true,
verticalSwiping: true
});
$('.splash-slider').on('beforeChange', function(event, currentSlide) {
currentSlide.css('transform', 'translate3d(0px, 0px, 0px)');
});
}请问这种方法有什么问题？
回答 1
Stack Overflow用户
发布于 2018-06-10 00:25:57
问题在于，您试图从传递给Slick beforeChange事件的参数转换元素css，而实际上，currentSlide参数(在您的实现中)是对slick实例的引用。您尝试使用的参数(对当前幻灯片的引用-第三个参数-)是当前幻灯片的索引，而不是对幻灯片本身的引用。
beforeChange事件有3个参数：
引用当前幻灯片中的
slick：instancecurrentSlide：，在幻灯片之前animationnextSlide：下一个活动幻灯片之后的幻灯片动画
要通过索引获取幻灯片，您可以使用以下代码片段：
slider.find('[data-slick-index="'+slideIndex+'"]');其中slider是Slick滑块的实例，slideIndex是您尝试选择的幻灯片的索引。
因此，将这一点应用于您的代码，您可以执行以下操作：
$('.splash-slider').on('beforeChange', function(event, slick, currentSlide) {
$('.splash-slider').find('[data-slick-index="'+currentSlide+'"]').css('transform', 'translate3d(0px, 0px, 0px)');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50775508
复制相关文章
相似问题