Question:
Can't make dynamic width of images in website slider (HTML + CSS + JS). When you open a browser window, the width of the first slide is the full width of the window (as it should), but if you stretch / expand the browser window, the image width does not change and subsequent slides go with the same width as they were when the page was initially opened in the browser. Tried width 100%, auto, inherit did different variations of object-fit, but it didn't work. I would be grateful for your help.
#slider {
width: 100%;
max-width: 1920px;
height: -moz-calc(100vh - 100px);
height: -webkit-calc(100vh - 100px);
height: -o-calc(100vh - 100px);
position: relative;
display: block;
margin: 0px auto;
overflow: hidden;
border-radius: 3px;
}
#slider1 {
width: 100%;
max-width: 1920px;
height: -moz-calc(100vh - 100px);
height: -webkit-calc(100vh - 100px);
height: -o-calc(100vh - 100px);
position: absolute;
display: block;
}
.slider_items {
width: 100%;
max-width: 1920px;
height: -moz-calc(100vh - 100px);
height: -webkit-calc(100vh - 100px);
height: -o-calc(100vh - 100px);
}
.slider_info {
width: 100%;
height: 70px;
display: inline-block;
bottom: 90px;
position: relative;
background: rgba(104,204,204,.3);
z-index: 99;
}
.slider_img {
width: inherit;
max-width: 1920px;
height: -moz-calc(100vh - 100px);
height: -webkit-calc(100vh - 100px);
height: -o-calc(100vh - 100px);
}<div id="slider">
<div id="slider_pager"></div>
<div id="slider1" align="center">
<div class="slider_items">
<img class="slider_img" src="//placehold.it/350x150"/>
<div class="slider_info">
<h2>Slide1 title</h2>
<p>This is the description for slide1 <a href="#">Learn more</a></p>
</div>
</div>
<div class="slider_items">
<img class="slider_img" src="//placehold.it/350x150"/>
<div class="slider_info">
<h2>Slide2 title</h2>
<p>This is the description for slide2 <a href="#">Learn more</a></p>
</div>
</div>
</div>
</div>Answer:
FlexSlider to help you, it is natively adaptive
HTML:
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>
JS:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});