1

I have much problem with Slick Gallery. I want to center img - images have different sizes and slick not working well.

Please look at the pictures - this is what I need: sketch image

  1. when image is small must be on middle
  2. when image have big height we centered it in vertical
  3. when image have big width we centered it in horizontal

Please look at this code: 

$(document).on('ready', function() {
    $(".slider").slick({
    dots: false,
    infinite: false,
    slidesToShow: 1,
    accessibility: true,
    autoplay: true,
    arrows: false,
    centerMode: true,
    centerPadding: '0px',
    slidesToShow: 1,
    });
});
.slider{
    width:440px;
    height:400px;
    background: gold;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<div class="slider">
  <a href="/" data-fancybox="images" ><img src="https://naturecanada.ca/wp-content/uploads/2016/08/boy-in-field.jpg" /></a>
  <a href="/" data-fancybox="images" ><img src="http://ca.france.fr/sites/default/files/imagecache/ATF_Image_bandeau_v2/la_france_cote_nature_6.jpg" /></a>
  <a href="/" data-fancybox="images" ><img src="http://media.istockphoto.com/photos/beautiful-nature-at-morning-in-misty-spring-forest-with-sun-picture-id506856658?k=6&m=506856658&s=612x612&w=0&h=GWvZGpApXiPXu2AtRX8YZe75-DkZIf6HVqHJuAKCTHk=" /></a>
  <a href="/" data-fancybox="images" ><img src="https://image.freepik.com/free-photo/nature-design-with-bokeh-effect_1048-1882.jpg" /></a>
  <a href="/" data-fancybox="images" ><img src="https://s-media-cache-ak0.pinimg.com/736x/a3/3f/86/a33f86fcd8edba60c037318f43346c6d.jpg" /></a>
  <a href="/" data-fancybox="images" ><img src="https://pbs.twimg.com/profile_images/687354253371772928/v9LlvG5N.jpg" /></a>
</div>

How can I center images in slick gallery?

Roman
  • 5,651
  • 1
  • 30
  • 41
Rafal
  • 35
  • 1
  • 3

2 Answers2

0

instead of img use div and background image in css to show image. use background-size: contain to have that effect.

singh88harman
  • 126
  • 3
0

div {
  height: 400px;
  background-color: red;
  text-align: center;
  white-space: nowrap;

}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
  vertical-align: middle;
} 
<div>
<span class="helper"></span>
<a href="/" data-fancybox="images" >
  <img src="https://pbs.twimg.com/profile_images/687354253371772928/v9LlvG5N.jpg" />
  </a>
</div>

Adjust your css like this:

.slider{
  width:440px;
  height:400px;
  background: gold;
}
.slider img {
  max-width: 100%;
  max-height: 400px;
}
.slider {
  text-align: center;
}
Sventies
  • 2,314
  • 1
  • 28
  • 44