javascript - 显示 2 张幻灯片时,光滑的轮播自适应高度不起作用
问题描述
我正在建立一个带有一些滑块的网站,并为此使用Slick。通常,关于幻灯片,当我一次显示 1 张幻灯片时,自适应高度有效,但当同时显示 2 张幻灯片时,它不起作用。这是在JSFiddle中复制的问题。
这是JavaScript:
var options = {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false,
dotsClass: 'slick-dots slick-dots-black',
adaptiveHeight: true,
};
$('.slider').slick(options);
我一直在谷歌搜索这个问题,似乎其他人也有类似的问题,但我找不到解决方案。
任何想法表示赞赏!
解决方案
是的,slick 似乎只允许adaptiveHeight
单个滑动轮播。
在它的文档中adaptiveHeight
说这个......
为单张幻灯片水平转盘启用自适应高度。
有趣的是,我从没想到会出现这种行为,我认为自适应高度在所有情况下都有效。但显然不是。
这有点 hacky,但可能会为您的网站提供一个解决方案,以在多幻灯片滑块上启用自适应高度。这基本上找到了当前显示的最高幻灯片,并为.slick-list
. 在这个元素上使用 css 过渡会产生光滑的adaptiveHeight
效果。
此外,我们还有一个.on('resize')
事件,它重新运行滑块高度检查,以防幻灯片内容是流动的并且幻灯片高度响应变化。
阅读我在脚本中的评论,看看发生了什么......
也可以在这里看到小提琴...... https://jsfiddle.net/joshmoto/1a5vwr3j/
// my slick slider options
var options = {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false,
dotsClass: 'slick-dots slick-dots-black',
adaptiveHeight: true,
};
// my slick slider as constant object
const mySlider = $('.slider').on('init', function(slick) {
// on init run our multi slide adaptive height function
multiSlideAdaptiveHeight(this);
}).on('beforeChange', function(slick, currentSlide, nextSlide) {
// on beforeChange run our multi slide adaptive height function
multiSlideAdaptiveHeight(this);
}).slick(options);
// our multi slide adaptive height function passing slider object
function multiSlideAdaptiveHeight(slider) {
// set our vars
let activeSlides = [];
let tallestSlide = 0;
// very short delay in order for us get the correct active slides
setTimeout(function() {
// loop through each active slide for our current slider
$('.slick-track .slick-active', slider).each(function(item) {
// add current active slide height to our active slides array
activeSlides[item] = $(this).outerHeight();
});
// for each of the active slides heights
activeSlides.forEach(function(item) {
// if current active slide height is greater than tallest slide height
if (item > tallestSlide) {
// override tallest slide height to current active slide height
tallestSlide = item;
}
});
// set the current slider slick list height to current active tallest slide height
$('.slick-list', slider).height(tallestSlide);
}, 10);
}
// when window is resized
$(window).on('resize', function() {
// run our multi slide adaptive height function incase current slider active slides change height responsively
multiSlideAdaptiveHeight(mySlider);
});
body {
background: skyblue;
margin: 0;
padding: 20px;
}
.slick-list {
transition: all .5s ease;
}
.aslide {
background: yellow;
}
<div class="slider">
<div class="aslide">1</div>
<div class="aslide">2<br/>2<br/>2</div>
<div class="aslide">3<br/>3<br/>3<br/>3<br/>3</div>
<div class="aslide">4<br/>4<br/>4</div>
<div class="aslide">5</div>
<div class="aslide">6<br/>6<br/>6</div>
<div class="aslide">7<br/>7<br/>7<br/>7<br/>7</div>
<div class="aslide">8<br/>8</div>
<div class="aslide">9<br/>9<br/>9<br/>9<br/>9<br/>9</div>
<div class="aslide">10<br/>10<br/>10</div>
<div class="aslide">11</div>
<div class="aslide">12<br/>12</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
推荐阅读
- python - 将嵌套字典转换为字符串
- firebase - 设置文档及其所有子集合的权限
- r - 在重新验证所有输入后如何使用去抖动仅重绘图形
- java - 为什么 Java 的 URLEncoder 不会像 Python 的 urllib.parse.urlencode 那样生成?
- python - Python多线程不是并行执行的
- java - Google Play 已删除我的应用,但我在 Manifest 中找不到违规行?
- r - 为 guide_colorbar 设置默认特征
- vue.js - 在 vuejs 组件中使用刀片 @can 指令
- sql - 将数据类型更改为浮点数并舍入为 2 位小数
- javascript - 使用 jQuery 选择所有至少有 2 个子元素的元素