AHméd Net AHméd Net - 1 month ago 18
CSS Question

Align image slider at the same bottom using css (Slick Carousel library)

im using slick carousel library to create a sublime slider, but using images widh a different height didn't make images aligned at the same bottom :

enter image description here

my code :

<html lang="en">

<head>
<title>slick - the last carousel you'll ever need</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css" />
</head>

<body>
<div class="slider responsive">
<div><img src="http://url/Public/Publications/856518/1916982/Images/Detail.jpg"></div>
<div><img src="http://url/Public/Publications/101506/1917549/Images/Detail.jpg"></div>
<div><img src="http://url/Public/Publications/678542/1917100/Images/Detail.jpg"></div>
<div><img src="http://url/Public/Publications/1658142/1917547/Images/Detail.jpg"></div>
<div><img src="http://cdn1.lekiosk.com/Public/Publications/596057/1911177/Images/Detail.jpg"></div>
<div><img src="http://url/Public/Publications/286869/1917506/Images/Detail.jpg"></div>
<div><img src="http://url/Public/Publications/678542/1917100/Images/Detail.jpg"></div>
<div><img src="http://url/Public/Publications/856518/1916982/Images/Detail.jpg"></div>
</div>
</body>
<script type="text/javascript">
$(".responsive").not('.slick-initialized').slick({
dots: false,
infinite: true,
speed: 500,
arrows: false,
slidesToShow: 5,
slidesToScroll: 2,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 3,
infinite: true,
arrows: false,
dots: false
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 4,
slidesToScroll: 2,
arrows: false,
dots: false,
infinite: true
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
infinite: true,
dots: false
}
}]
});
</script>

</html>


i don't want to put height value for each screen resolution using media queries.
Any idea please ?

Answer

Here's a solution to your problem. I wouldn't say it's the best one but it does the job. So the thing you could actually do is reference each image separately with the css rule of max-height. I specified that each image should have style ="max-height:300px;" which gets them to the same height. Here is how I changed your code:

    <div class="slider responsive">
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/856518/1916982/Images/Detail.jpg"style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/101506/1917549/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/678542/1917100/Images/Detail.jpg"style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/1658142/1917547/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/596057/1911177/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/286869/1917506/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/678542/1917100/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/856518/1916982/Images/Detail.jpg" style ="max-height:300px;"></div>
    </div>

Here's a carousel slider with Bootstrap where all the images are the same height. Feel free to check it out:

Carousel Slider Bootstrap

It's not the most elegant solution but it does the job. Tell me if it worked for you.

New Fiddle #2