유체 배경 이미지가있는 슬릭 슬라이더 빈 공간

Question

미끄러운 슬라이더를 사용하여 약간의 배경 이미지를 표시하지만 새 이미지가 추가 될 때마다 ("slide-img"클래스) 슬라이더의 위아래에 빈 공간이 추가됩니다 .

나는 패딩 - 탑이 어떤 식 으로든 일으키는 것 같지만, 유체 효과를 유지하는 방법을 모르겠다. 누군가 알고 있으면 감사 할 것이다. 여기

은 슬라이드 자체에 패딩을 사용할 때 그래서 기준으로 비율을 계산합니다의 JSFiddle

$('.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>

Answer 1

슬릭은 슬라이드의 래퍼를 만들고, 나란히두고있다 함께 모인 모든 슬라이드의 너비.

패딩을 넣으려면 내부 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/