將滑動輪播導航箭頭與幻燈片圖像垂直對齊，而不是其下方的文本

Question

無論窗口寬度是多少，我都需要將導航箭頭與幻燈片圖像垂直對齊。目前，它把它放在整個幻燈片的50％。我希望能夠用CSS做到這一點，但似乎可能需要用JavaScript來完成。如果是這樣的話，jQuery沒問題，只需要支持現代瀏覽器（IE 11+）。

這個棘手的部分是它需要在圖像的50％而不是整個容器上，因爲圖像下面的文本可以有不同的高度。

什麼它目前正在做：

我需要它做的事：（注意導航箭頭垂直居中與形象，應該是無論什麼窗口寬度）

這裏有一個的jsfiddle：https://jsfiddle.net/thebluehorse/2wuq3feb/5/

<div class="container"> 
    <div class="list clearfix"> 
    <div class="slide"> 
     <img src="http://placehold.it/800x350"> 

     <ul> 
     <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li> 
     </ul> 
    </div> 

    <div class="slide"> 
     <img src="http://placehold.it/800x350"> 
     <ul> 
     <li>Lorem ipsum dolor sit amet, et hymenaeos elit orci, rutrum dolor magna pellentesque ante euismod magna, sodales turpis quos class condimentum. Integer in vel etiam. Etiam pellentesque nibh phasellus sed, eget ipsum enim sed in et at, non ligula quis egestas sed quis. Lectus vitae, lobortis vestibulum maecenas auctor lorem eros, luctus vitae aliquam aliquam ipsum ligula nascetur, habitasse eu lectus imperdiet leo. Ut est fusce class conubia nunc felis, proin aliquam vitae nunc accumsan orci. A eu erat in.</li> 
     <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li> 
     </ul> 
    </div> 

<div class="slide"> 
     <img src="http://placehold.it/800x350"> 
     <ul> 
     <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li> 
     </ul> 
    </div> 
    </div> 
</div> 

<style> 
.container { 
    position: relative; 
    width: 80%; 
    margin: auto; 
} 

.slide { 
    float: left; 
    height: 100%; 
    min-height: 1px; 
} 

img { 
    width: 100%; 
    display: block; 
} 

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

body { 
    background-color: #aaa; 
} 
</style> 

<script> 
$('.list').slick({ 
    dots: true, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    adaptiveHeight: true 
}); 
</script> 

Answer 1

覆蓋的CSS規則，位置的兩個箭頭以這樣的方式

body .slick-next, body .slick-prev{ 
    top: 40%; 
} 

結果：jsfiddle

Answer 2

我已經更新了JS撥弄解決方案，始終保持箭頭與圖像即使中間對齊每張幻燈片上的圖像高度不同。

function fixVerticalArrows(){ 
    var h = ($('.slick-active').find("img").height()/2); 
    $('.slick-arrow').css('top',h+'px'); 
} 
$(document).ready(function(){ 
    $('.list').slick({ 
    dots: true, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    adaptiveHeight: true 
    }).on('afterChange',function(event){ 
    fixVerticalArrows(); 
    }).trigger('afterChange'); 
    $(window).resize(function(){ 
    fixVerticalArrows(); 
    }) 
}); 

Working JSFiddle here

Answer 3

您可以按照使用JQuery圖像的中間方向的箭頭鍵設置。

$(window).on('load resize', function() { 
changepos(); 
}); 

function changepos() { 
    var toppos = ($('.slick-active').find("img").height()/2); 
    $('.slick-arrow').css('top',toppos+'px'); 
} 

$('.list').slick({ 
    dots: true, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    adaptiveHeight: true 
}).on('afterChange',function(event){ 
    var toppos = ($('.slick-active').find("img").height()/2); 
    $('.slick-arrow').css('top',toppos+'px'); 
}).trigger('afterChange'); 

Working Fiddle

Answer 4

所有你需要做的是覆蓋在.slick-prev和.slick-next的top:%50財產。

.slick-prev { 
    top:100px; 
} 
.slick-next { 
    top:100px; 
} 

See fiddle。

Answer 5

那麼，使用2個傳送帶怎麼樣？一個用於圖像，帶有箭頭，另一個用於流動沒有箭頭的內容。這是我能想到的最乾淨的解決方案：https://jsfiddle.net/mq9avx5g/2/

它利用光滑的asNavFor，使兩個轉盤作爲一個：

$('#list_above').slick({ 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    adaptiveHeight: true, 
    dots: false, 
    asNavFor: '#list_below', 
}); 

$('#list_below').slick({ 
    dots: true, 
    arrows: false, 
    slidesToShow: 1, 
    asNavFor: '#list_above', 
    adaptiveHeight: true, 
});