CODEWITHSUNDEEP
jquerycarouselslick.js
Leigh
Leigh

Reputation: 21

How can I have a fixed height image with Slick Carousel that doesn't distort with the user resizes the browser?

How can I specify a fixed height for the images that doesn't distort with the user resizes the browser?

I really want it to act like a background image, but to rotate like Slick Carousel.

Any ideas?

Upvotes: 1

Views: 12702

Answers (1)

Chique
Chique

Reputation: 854

Set an absolute height for the container of the images in the Carousel, which will be the carousel itself in this case.

Set a css inside the style="" tag of the Carousel to specify

<div class="carousel" style="height:300px;">
..
</div>

When you are specifying a fixed height for the container, it won't distort if the browser were resized. Or if your carousel has borders around it and you don't want it to overflow, you should try the following method -

<style>
.carouselContainer {
     overflow:hidden;
}
.carouselContainer img {
     height:300px;
}
</style>

<div class="carouselContainer">
     <img src="link1">
     <img src="link2">
     ...
</div>

I can't show you the actual example as you haven't provided any code. But I hope I could convey you the concept of how to do it.

Upvotes: 3

Related Questions