0

this is my first question on stackoverflow.

Im currently working with Slick carousel jQuery Plugin and it works so far as I want it to work. There is only one issue left, I want different sized Images be centered horizontal and vertical, depending on their ratio. I think an image makes clear what I mean.

image

Thanks in advance!

edit: its not only about center divs vertically but also make maximum height and width of all tiles the same and also still keep responsivity.

$(".regular").slick({
  dots: true,
  infinite: false,
  slidesToShow: 7,
  slidesToScroll: 6,
  responsive: [{
    breakpoint: 1200,
    settings: {
      slidesToShow: 5,
      slidesToScroll: 4
    }
  }, {
    breakpoint: 992,
    settings: {
      arrows: false,
      slidesToShow: 3,
      slidesToScroll: 2
    }
  }, {
    breakpoint: 768,
    settings: {
      arrows: false,
      slidesToShow: 1,
      slidesToScroll: 1
    }
  }]
});
   html,
   body {
     margin: 0;
     padding: 0;
   }
   
   * {
     box-sizing: border-box;
   }
   
   .slider {
     margin: 50px;
   }
   
   .slick-slide {
     margin: 0px 10px;
   }
   
   .slick-slide img {
     width: 100%;
   }
   
   .slick-prev:before,
   .slick-next:before {
     color: blue;
   }
   
   @media screen and (max-width: 768px) {
     .slick-dots {
       position: initial !important;
     }
   }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

<section class="regular slider">
  <div>
    <img src="http://placehold.it/150x300?text=1">
    <p>text</p>
  </div>
  <div>
    <img src="http://placehold.it/550x300?text=2">
    <p>text</p>
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=3">
    <p>text</p>
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=4">
    <p>text</p>
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=5">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=6">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=7">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=8">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=9">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=10">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=11">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=12">
  </div>
</section>
danielnixon
  • 4,178
  • 1
  • 27
  • 39
Eduard Ge
  • 1
  • 2

4 Answers4

0

Check this: https://jsfiddle.net/7pa8jq4a/5/

I used to center:

display: flex;
align-items: center;
justify-content: center;

I added wrapper div to slide and to img style max-height and max-width;

Piotr Białek
  • 2,569
  • 1
  • 17
  • 26
  • Thank you for your answer, but it mustnt be max-width and max-height because in this case images dont fit to the window and responsivity gets lost. – Eduard Ge Sep 20 '16 at 08:37
  • I this case aspect ratio is preserved, thanks max-height and max-width. Check jsfiddle :) – Piotr Białek Sep 20 '16 at 08:41
  • I checked it, for example on last break point when theres only one image the size is exaclty the same as when three images are shown, this mustnt happen. – Eduard Ge Sep 20 '16 at 08:53
0

Here is what you need:

1) at first, set section { text-align:center;}

2) set slick-track div to : 

.slick-track{
  display: flex;
  align-items: center;
}

3) and for example

 .slick-slide img {
    ..........
    max-width: 150px;
    max-height: 150px;
}

thats all (source: How to vertically center divs? )

Community
  • 1
  • 1
T.Todua
  • 53,146
  • 19
  • 236
  • 237
  • This comes closer to the solution Im looking for, but the maximum height should be for all images the same, not only the maximum width. – Eduard Ge Sep 20 '16 at 08:58
  • i've updated answer. also note, its almost impossible to make the different proportioned images to show the same sized (without cropping/overflow) – T.Todua Sep 20 '16 at 09:03
0

I tweaked you version a little bit (in case you do not want flex-box):

https://jsfiddle.net/fr74h8k5/2/

.slick-slide .image {

   height: 200px;
   width: 100%;
   margin: 0 auto;

   background-repeat: no-repeat;
   background-position: center; 
   background-size: contain;

}

n1ru4l
  • 488
  • 1
  • 10
  • 29
0

I think what Im looking for is a JS or jQuery script that compares two tiles and if they have same size its set as default size and then all the other tiles use this size either as maximum width if their ratio is wider than the default ratio or as maximum height if their ratio is taller than the default ratio. This is only an idea, I dont know if its best solution or even is possible. Is this understandable? Its a pitty my JS and jQuery skills arent good enough to try something on my own.

Eduard Ge
  • 1
  • 2
  • Or maybe set the height of the lowest element as default. – Eduard Ge Sep 20 '16 at 09:21
  • Ok I think now I had the final idea. Except on last breakpoint, when there is only one tile, the height should alwas be the same as the width, ratio relation should be 1:1. And the width of each tile should be a part of the width of the whole carousel, depending on the amount of tile at this breakpoint. Can someone write JS or jQuery code to this solution? – Eduard Ge Sep 21 '16 at 09:11