slick, arrows centered only the picture-height, not picture width - css

Question

I'm using Slick-Slider to build sliders. The position of the arrows are inside the picture. But if the legend is too large, the arrows overlap the text (vertically centered). I would like to have the arrows only vertical centered over the picture. How can I build this?
Thanks for help/ideas!
HTML:
<div class="mgu-basic-slider">
<div>
<picture>
<source srcset="demo-ressoures/16zu9_topf_d.jpg">
<img src="demo-ressoures/16zu9_topf_d.jpg" alt="xxx">
</picture>
<div class="mgu-basic-slider-caption">
<div class="slick-legend">
<p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe.</p>
</div>
<div class="slick-counter">1/6</div>
<div class="clear"></div>
</div>
</div>
<div>
<picture>
<source srcset="demo-ressoures/16zu9_topf_d.jpg">
<img src="demo-ressoures/16zu9_topf_d.jpg" alt="xxx">
</picture>
<div class="mgu-basic-slider-caption">
<div class="slick-legend">
<p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
</div>
<div class="slick-counter">2/6</div>
<div class="clear"></div>
</div>
JS:
$(".mgu-basic-slider").slick({
dots:false,
adaptiveHeight: true,
arrows : true,
appendArrows: $('picture')
})

Answer 1

I'd suggest my own solution here, using 2 sliders instead of 1. See this demo:
$(".mgu-basic-slider-legend").slick({
dots: false,
arrows: false,
adaptiveHeight: true,
asNavFor: '.mgu-basic-slider'
});
$(".mgu-basic-slider").slick({
dots: false,
adaptiveHeight: true,
arrows: true,
asNavFor: '.mgu-basic-slider-legend'
});
img {
width: 100%;
}
.mgu-basic-slider .slick-next{
right: 0;
z-index: 1;
}
.mgu-basic-slider .slick-prev{
left: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="mgu-basic-slider">
<div>
<picture>
<source srcset="http://placehold.it/400x100">
<img src="http://placehold.it/400x100">
</picture>
</div>
<div>
<picture>
<source srcset="http://placehold.it/400x150">
<img src="http://placehold.it/400x150">
</picture>
</div>
<div>
<picture>
<source srcset="http://placehold.it/400x250">
<img src="http://placehold.it/400x250">
</picture>
</div>
</div>
<div class="mgu-basic-slider-legend">
<div>
<div class="mgu-basic-slider-caption">
<div class="slick-legend">
<p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe.</p>
</div>
<div class="slick-counter">1/6</div>
<div class="clear"></div>
</div>
</div>
<div>
<div class="mgu-basic-slider-caption">
<div class="slick-legend">
<p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
</div>
<div class="slick-counter">2/6</div>
<div class="clear"></div>
</div>
</div>
<div>
<div class="mgu-basic-slider-caption">
<div class="slick-legend">
<p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
</div>
<div class="slick-counter">2/6</div>
<div class="clear"></div>
</div>
</div>
</div>
CSS in this snippet is only for demo purpose, the main point is instead of using 1 slider we break them into 2 different sliders that are synchronized with each other using Slick's asNavFor feature. This way you can keep on using Slick as-is without having to resort to some kind of 'hack'.

Answer 2

You will have to change the position of the arrow from CSS, it should in your slick-theme.css file, following the CSS:
.slick-prev, .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%; /* update the value from here as per your requirement */
display: block;
width: 20px;
height: 20px;
margin-top: -10px;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}

Answer 3

A first approach can be set the top css property of the .slick-next and slick-prev btns manually if the container of the image has always the same height like in a card. For example, like in this example:
html:
<div class="mgu-basic-slider">
<div>
<div class="img-wrapper">
<img src="images/complianceMod.jpg" alt="">
</div>
<div class="text-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum, blanditiis totam similique natus, amet. Reprehenderit dolores vero, repudiandae blanditiis, assumenda dignissimos consectetur a voluptate libero consequatur enim. Commodi, enim.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum, blanditiis totam similique natus, amet. Reprehenderit dolores vero, repudiandae blanditiis, assumenda dignissimos consectetur a voluptate libero consequatur enim. Commodi, enim.
</p>
</div>
</div>
<div>
<div class="img-wrapper">
<img src="images/example-608web_w608.jpg" alt="">
</div>
<div class="text-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<div>
<div class="img-wrapper">
<img src="images/examples-of-pestle-analysis.jpg" alt="">
</div>
<div class="text-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt distinctio, earum enim suscipit veniam? Ab eaque molestiae, repellendus </p>
</div>
</div>
<div>
<div class="img-wrapper">
<img src="images/Optimal-solution_conceptual.jpg" alt="">
</div>
<div class="text-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, corporis! Consectetur eum porro quasi cumque deserunt modi, sint voluptatibus reiciendis nisi voluptatem minus id quibusdam voluptate officiis blanditiis nam consequatur.</p>
</div>
</div>
</div>
CSS:
.mgu-basic-slider {
width: 400px;
margin: 0 auto;
.slick-slide {
.img-wrapper {
height: 300px;
img {
width: 100%;
height: 100%;
}
}
}
.slick-next, .slick-prev{
top: 150px;
z-index: 9999;
&:before {
color: #cecece;
font-size: 30px;
}
}
.slick-next {
right: 25px;
}
.slick-prev {
left: 25px;
}
}
JS:
$(".mgu-basic-slider").slick({
dots:false,
adaptiveHeight: true,
arrows : true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
});
If is not your case and you don't want to have always the same height for all the images you can calculate this top property dynamically using the slick events and some jquery code like:
JS:
$('.mgu-basic-slider').on('afterChange', function(event, slick, direction){
var imgHeight = $('.mgu-basic-slider .slick-current .img-wrapper').height();
console.log('imgHeight', imgHeight);
var top = imgHeight / 2;
console.log('top', top);
$('.mgu-basic-slider .slick-next').css('top', top+'px');
$('.mgu-basic-slider .slick-prev').css('top', top+'px');
});
var imgHeight = $('.mgu-basic-slider .slick-current .img-wrapper').height();
console.log('imgHeight', imgHeight);
var top = imgHeight / 2;
console.log('top', top);
$('.mgu-basic-slider .slick-next').css('top', top+'px');
$('.mgu-basic-slider .slick-prev').css('top', top+'px');
I hope that this idae can help you