html - 如何在 jquery LightSlidder 中使用居中图像设置固定高度?
问题描述
我有一个带有不同高度的不同图像的光滑块。如果我设置isAdaptiveHeight
为 true,那么它会根据图像自动调整高度,但这对我来说看起来不太好。
我想设置图像的固定高度,如果任何图像很小,那么我想将该图像设置在固定高度的中心。这是我的提琴手:http: //jsfiddle.net/mbjvc5u8/1/。
第一个图像很小,其他图像很大,所以我不想调整 UI。我想要一个具有居中图像的固定高度的光滑块。我试过了,但我做不到。
解决方案
我希望这对你有用:
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 9,
onSliderLoad: function() {
$("img").addClass("preferredHeight");
}
});
.demo {
width: 420px;
}
ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
}
li {
display: block;
float: left;
margin-right: 6px;
cursor: pointer;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.preferredHeight {
max-height: 127px;
position: relative;
left: 50%;
transform: translate(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<div class="demo">
<ul id="lightSlider">
<li data-thumb="http://sc.reel-scout.com/up_images/2/2650782.jpg?10/24/2019 5:31:11 AM">
<img src="http://sc.reel-scout.com/up_images/2/2650782.jpg?10/24/2019 5:31:11 AM" />
</li>
<li data-thumb="http://sc.reel-scout.com/up_images/1/2650811.jpg?10/24/2019 5:31:11 AM">
<img src="http://sc.reel-scout.com/up_images/1/2650811.jpg?10/24/2019 5:31:11 AM" />
</li>
<li data-thumb="http://sc.reel-scout.com/up_images/5/2650815.jpg?10/24/2019 5:31:11 AM">
<img src="http://sc.reel-scout.com/up_images/5/2650815.jpg?10/24/2019 5:31:11 AM" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
</li>
</ul>
</div>
推荐阅读
- javascript - 以下代码中的 .click 函数似乎不起作用
- c# - 网格链接按钮 删除行而不是更新它
- integration - Google Home - 报告状态是强制性的吗?
- javascript - 创建与具有附加功能的内置 Chrome 书签管理器相同的扩展程序
- html - min-width 不起作用,单词中断以调整宽度
- java - 对分区的循环消息分配不适用于没有密钥的消息
- r - 处理 R 中连接的多个表的最佳方法是什么?
- c++ - 为什么有些代码可以工作 HackerRank 而不是 Xcode
- java - 在另一个 JPanel 中将具有布局 GridLayout 的 JPanel 居中
- android - 如何在switch语句中分配变量?