0

I have a slick slider, and i want to vertical align the images in the a element. I tried vertical-align:middle; with height:100%; and tried some more, but I haven't find the solution yet. I also tried with <span class="helper"></span like i found in this solution on stackoverflow(jsfiddle). I hope you guys can help me out.

My HTML for the slider is the following:

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
<div class="container-fluid">
  <h2 class="text-center text-secondary">Partners</h2>
   <section class="customer-logos slider">
      <a href="#" target="_blank" class="slide"><img src="https://cdn.pixabay.com/photo/2016/08/26/17/33/landscape-1622739_960_720.jpg"></a>
      <a href="#" target="_blank" class="slide"><img src="https://cdn.pixabay.com/photo/2017/02/15/02/52/tree-2067496__340.jpg"></a>
      <a href="#" target="_blank" class="slide"><img src="https://cdn.pixabay.com/photo/2016/08/26/17/33/landscape-1622739_960_720.jpg"></a>
      <a href="#" target="_blank" class="slide"><img src="https://cdn.pixabay.com/photo/2017/02/15/02/52/tree-2067496__340.jpg"></a>
      <a href="#" target="_blank" class="slide"><img src="https://cdn.pixabay.com/photo/2016/08/26/17/33/landscape-1622739_960_720.jpg"></a>
      <a href="#" target="_blank" class="slide"><img src="https://cdn.pixabay.com/photo/2017/02/15/02/52/tree-2067496__340.jpg"></a>
      <a href="#" target="_blank" class="slide"><img src="https://cdn.pixabay.com/photo/2016/08/26/17/33/landscape-1622739_960_720.jpg"></a>
      <a href="#" target="_blank" class="slide"><img src="https://cdn.pixabay.com/photo/2017/02/15/02/52/tree-2067496__340.jpg"></a>
   </section>
</div>

Ofcourse jQuery and slick.js are included. You can see the demo right here, but with square images. My images are not square so i need to vertical align the images in the horizontal slider.

Thanks in advance!

The UndertakerGL
  • 65
  • 2
  • 10

2 Answers2

1

Add this to your Jquery. If you add the following code it will fix your problem. It gives all the images a height and a position.

$( ".slick-slide" ).each(function( index ) { 
   $( this ).css('margin-top',
   ($('.slider').height()-$(this).height())/2+'px' );
 });
xmaster
  • 1,042
  • 7
  • 20
0

in your slick function

$(document).ready(function(){
$('.customer-logos').slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1500,
    arrows: false,
    dots: false,
  vertical: true,
    pauseOnHover: false,
    responsive: [{
        breakpoint: 768,
        settings: {
            slidesToShow: 4
        }
    }, {
        breakpoint: 520,
        settings: {
            slidesToShow: 3
        }
    }]
});

});

vertical: true; <--- only add this. This will set your images vertical

xmaster
  • 1,042
  • 7
  • 20
Salman Aziz
  • 426
  • 8
  • 15
  • Thanks for answering my question, but i meant to vertical-align the images to the middle in a horizontal slider. – The UndertakerGL May 07 '19 at 09:39
  • right got your point. you can resolve your problem using CSS Flex property. Use this .slider { height: 100vh; display: flex; justify-content: center; width: 100%; align-items: center;} Play with height, it will work :) . – Salman Aziz May 07 '19 at 09:59