html - 如何增加 Flickity 滑块的高度?
问题描述
我正在使用Flickity。我有 groupCell 真的。现在的问题是,我无法增加图像的高度或滑块的高度。另外,我必须在移动设备中显示 1 个滑块。
你能帮帮我吗?
$('.slideset').flickity({
// options
cellAlign: 'left',
wrapAround: true,
contain: true,
//groupCells:'%',
groupCells: true,
prevNextButtons: true
});
.carousel-cell {
width: calc( ( 100% - 10px) / 3);
height: 400px;
margin-right: 10px;
border-radius: 5px;
background-color: #f00;
counter-increment: carousel-cell;
}
.slidesetImg img {
width: 100%;
height: 100%;
border: 1px solid #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
padding: 5px;
object-fit: cover;
}
@media ( min-width: 768px ) {
.carousel-cell {
/* 1 cells in group */
width: calc( ( 100% - 20px ) / 1);
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<section>
<div class="container">
<div class="wrapper">
<div class="main-carousel slideset">
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
解决方案
Flickity 可以setGallerySize
将轮播的高度设置为最高单元格的高度。它默认启用。
如果您更喜欢使用setGallerySize: false
CSS 来调整轮播的大小,而不是使用单元格的大小,请使用此选项。
$('.slideset').flickity({
// options
setGallerySize: false
cellAlign: 'left',
wrapAround: true,
contain: true,
//groupCells:'%',
groupCells: true,
prevNextButtons: true
});
/* carousel height */
.carousel-cell {
height: SOME HEIGHT;
}
推荐阅读
- ios - 'NSRangeException',原因:'*** -[__NSArrayM objectAtIndexedSubscript:]:索引 1 超出范围 [0 .. 0]'
- ruby - 在本地运行良好的 Jekyll 网站没有出现在 Github 页面上
- java - 如何在使用我自己的数字证书时通过我的网络浏览器上的 SSL 套接字显示内容?
- python - 如何使这种广度优先搜索更快?
- ubuntu-16.04 - CATALINA_PID 已设置,但指定的文件不存在
- javascript - SQL 日期与某些日期的差异
- java - 如何获取非案例类的构造函数参数的默认值?
- firebase - 在 Firebase 存储中,我可以使用 db "get" 规则吗?
- javascript - 当我在函数中定义变量时出错
- automated-tests - 空手道多部分领域;可以传入函数吗?