Within my slider, I have three slides with 3 images each. The layout consists of one large image on the left and two smaller ones on the right. To ensure responsiveness, I've used max-width: 100% on the images so they can scale down proportionally as the window size changes.
I purposely did not set fixed heights/widths for the images to allow them to adjust dynamically. However, when the window width shrinks past the container's width, the small images on the right shift to the next line.
How can I maintain the side-by-side arrangement of the images while resizing the browser window and make sure they resize responsively without causing scrollbars to appear?
$('.slider').slick();body {
background: purple;
}
.slider {
max-width: 800px;
margin: 0 auto;
}
.slide {
width: 100%;
}
.bigImg,
.smallImg {
float: left;
}
img {
max-width: 100%;
height: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css" rel="stylesheet" />
<div class="slider">
<div class="slide">
<div class="bigImg">
<img src="http://dummyimage.com/600x400/000/fff" />
</div>
<div class="smallImg">
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="smallImg bl">
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
</div>
<div class="slide">
<div class="bigImg">
<img src="http://dummyimage.com/600x400/000/c00" />
</div>
<div class="smallImg">
<img src="http://dummyimage.com/200x200/000/c00" />
</div>
<div class="smallImg bl">
<img src="http://dummyimage.com/200x200/000/c00" />
</div>
</div>
<div class="slide">
<div class="bigImg">
<img src="http://dummyimage.com/600x400/333/aaa" />
</div>
<div class="smallImg">
<img src="http://dummyimage.com/200x200/333/aaa" />
</div>
<div class="smallImg bl">
<img src="http://dummyimage.com/200x200/333/aaa" />
</div>
</div>
</div>