Slick-Karussell-Navigationspfeile vertikal ausrichten mit Dia-Bild und nicht den Text darunter

Question

Ich muss die Navigationspfeile vertikal mit dem Dia-Bild ausrichten, egal welche Fensterbreite ist. Momentan liegt der Wert bei 50% der gesamten Folie. Ich hoffe, dass ich dies mit CSS machen kann, aber es scheint, als müsste es mit JavaScript gemacht werden. Wenn das der Fall ist, ist jQuery in Ordnung und es muss nur moderne Browser (IE 11+) unterstützen.

Der schwierige Teil ist, dass es bei 50% des Bildes und nicht den gesamten Container sein muss, da der Text unter dem Bild verschiedene Höhen haben kann.

Was es derzeit tun:

Was ich brauche, es zu tun: (man beachte die nav Pfeile vertikal mit dem Bild zentriert werden und sollte egal sein, was Fensterbreite)

Hier ist ein 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

Überschreibung der CSS-Regel, die Position der beiden Pfeil auf diese Weise:

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

Ergebnis: jsfiddle

Answer 2

ich die JS Geige mit der Lösung immer aktualisiert, um Pfeile Mitte align mit dem Bild zu halten, auch wenn Die Bilder auf jeder Folie haben unterschiedliche Höhe.

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

Sie können wie folgt Pfeiltaste in der Mitte des Bildes mit JQuery eingestellt.

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

Alles, was Sie tun müssen, die top:%50 Eigenschaft auf .slick-prev und .slick-next wird außer Kraft gesetzt.

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

See fiddle.

Answer 5

Nun, was ist mit 2 Karussellen? Eine für die Bilder, mit Pfeilen, und eine für fließende Inhalte ohne Pfeile. Es ist die sauberste Lösung, die ich denken konnte: https://jsfiddle.net/mq9avx5g/2/

Es Verwendung von Slick macht, asNavFor beide Karussells zu machen wirken als ein:

$('#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, 
});