代码之家 › 专栏 › 技术社区 › Gabriel Souza

光滑滑块空白空间,带有流体背景图像

slick.js slider css html javascript

Gabriel Souza · 技术社区 · 7 年前

我使用Slick slider来显示一些fuid背景图像,但每添加一个新图像(“slide img”类),就会在滑块的顶部和底部添加一个空白区域。

$('.slides').slick({
    slidesToShow: 1,
    autoplay: true,
});

.slide-img {
  background: url('http://i.imgur.com/RVfIr7W.jpg') no-repeat center / 100%;
  padding-top: 36.59%;
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>

  <div class="slides">
    <div class="slide-img"></div>
    <div class="slide-img"></div>
    <div class="slide-img"></div>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

1 回复 | 直到 7 年前

user500665 7 年前

Slick为幻灯片创建了一个包装并并排放置,因此当您在幻灯片上使用填充时,它将根据所有幻灯片的宽度计算百分比。

您需要添加一个内部div来放置填充,这样就需要单个幻灯片的百分比,您将获得所需的高度。

  <div class="slides">
    <div><div class="slide-img"></div></div>
    <div><div class="slide-img"></div></div>
    <div><div class="slide-img"></div></div>
  </div>

https://jsfiddle.net/ke51vqqm/3/

推荐文章

Una Persona Normal · 在滑块上选择特定值时播放声音

2 年前

MYTH · 为什么我的滑块向后不能正常工作

3 年前

Marc Coll · 如何使用sliderInput值选择列并使用它更改映射R?

7 年前

Thomas Stahl · CSS文本幻灯片

7 年前

jeja · ASP中的引导滑块。SQL Server数据库中的NET MVC

7 年前

mrKorny · 单击后数组对img的不透明度或fadein效果/javascript

7 年前

Belial · 自动播放滑动条在下一个或上一个箭头上单击后停止工作

7 年前

Ebraheem Alrabeea · 角度2滑块范围-添加。范围滑块库

7 年前

João · 本地主机中的WordPress滑块url问题

7 年前

Med.Mass · JS UI滑块/更改为值(-上一步)

7 年前