- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个带有一些 slider 的网站并使用 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
。
在docs在 adaptiveHeight
上它说的是......
Enables adaptive height for single slide horizontal carousels.
有趣的是,我从没想过 slick 会有这种行为,我假设自适应高度在所有情况下都有效。但显然不是。
这有点 hacky,但可能涵盖您网站的解决方案,以在多幻灯片 slider 上启用自适应高度。这实质上是找到当前显示的最高幻灯片并将高度添加到 .slick-list
。在这个元素上使用 css transition 会产生流畅的 adaptiveHeight
效果。
我们还有一个 .on('resize')
事件,它会重新运行 slider 高度检查,以防幻灯片内容流动并且幻灯片高度响应变化。
阅读我在脚本中的评论,看看发生了什么......
另请参阅此处的 fiddle ... 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>
关于javascript - 显示 2 张幻灯片时,光滑的旋转木马自适应高度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63153364/
我不知道如何创建这样的元素,以便点之间的距离始终适应屏幕尺寸。 这是我的代码的结果: .line-list { display: flex; justify-content: space-be
最终用户的 paypal 自适应支付流程有点奇怪。 而不是像 paypal express 流程那样工作: 用户完成结帐过程 用户前往 paypal 以授权付款 用户被重定向回网站以确认付款 通知从网
我在我们的游戏网站上添加了一个响应式 Google 广告,这是一个简单的基于静态 bootstrap 的网站: http://dealoround.com这将解决 https://mrcsabatot
简短的问题 使用 routes.resetConfig(newRouteArray) 切换路线的/或更好的方法有什么区别? 对比 在 resize 事件上重新加载 Angular 应用程序并根据屏幕宽
我在尝试仅使用纯 JS 制作自适应 slider 时遇到一些问题。 任务是: 在移动设备中, slider 仅显示文本信息或大幻灯片的一小部分 当宽度增加(通过媒体查询)时, slider 会变大并显
我刚刚创建了一个表单类类型,它有一个选择类型,其中 choice_list 必须根据登录的用户角色进行更改,因此表单类类型需要访问当前用户角色,然后根据它更改 choice_list。 有人能指出一种
我刚刚创建了一个表单类类型,它有一个选择类型,其中 choice_list 必须根据登录的用户角色进行更改,因此表单类类型需要访问当前用户角色,然后根据它更改 choice_list。 有人能指出一种
引入自适应 Autosar 的主要动机是什么? Information provided by Autosar consortium is "AP provides mainly high-perfo
我是 Collection View 和自动布局的新手,我在让单元格大小适应模拟器中的各种设备时遇到了问题。我正在使用流式布局,并在尺寸检查器中设置尺寸。我提供的图像显示了我需要单元格在所有设备上的外
我在使用自适应布局的网站上工作,这意味着网站会适应用户屏幕宽度。有三张图片说明了我的想法,图片显示了浏览器窗口从宽到窄调整大小的三个步骤。 宽屏紫色区域贴在页面左侧,绿色区域适合屏幕的其余部分。 中等
目前我在 flexbox 中有三列(目前在 Plunkr 中的情况)。 当屏幕变小时,我希望第二列位于其他两列之上(Plunkr 中的理想情况)。 我在 https://plnkr.co/edit/Z
我试图让 svg 根据屏幕尺寸显示不同的图像,因此较小的设备显示较小的图像。例如,如果我想要一个覆盖整个 svg 区域的背景图像,就像这样: #t
这是我们的 jQuery 代码: $(document).ready(function(){ $(window).on("load resize", function(){ i
我正在尝试使用 this gem 用于使用 paypal 自适应支付,它需要 development: environment: "sandbox" username: "sandbox_userna
首先,我对 paypal 自适应支付有点陌生,直到现在我只使用 REST api。 在实现自适应支付时,我无法理解应用程序的完整流程。 在 REST api 中,我将用户导航到他付款的 paypal
我有一个具有聊天功能的应用程序,其中 UITextview 用于输入消息。 UITextview 高度必须是动态的(如果用户输入消息,高度必须根据文本长度更改,直到特定高度)。 我怎样才能做到这一点?
我有一个表设置了一个自动递增的 ID。假设我有 ID 1、2、3、4 和 5。当我删除 ID 号 3 时,我希望 ID 4 降为 3,ID 5 降为 4。 这可能吗?这是怎么做到的? 最佳答案 我想你
我有一个幻灯片,其中包含许多不同纵横比的图片。我希望图像在幻灯片中居中。我该怎么做,或者更好的是,我如何自动调整 slider 的大小? 最佳答案 解决中心问题 .bx-wrapper img {
我有一个想要实现的特定布局,但我不知道如何让它在多种屏幕尺寸上稳健地工作。 关键思想是 TextViews 中的信息很重要,而 ImageView 是装饰性的。我希望根据用户屏幕尺寸(最大尺寸)调整
我在响应式网站 ( http://goo.gl/asEovC ) 上运行了来自 labnol.org 的代码: ad = document.getElementById('google-a
我是一名优秀的程序员,十分优秀!