CODEWITHSUNDEEP
javascriptjquerycssslick.js
CH Andre Mailoa
CH Andre Mailoa

Reputation: 181

Slick-Slider image inside a div container not resize based windows size

I use slick-slider at my website to show the 6 newest posts. Normally, on slick-slider content, there are image, post title, category, share and so on (I refer to iflscience homepage).

The problem is, if the image is put exact after slick-slider, the image size will responsive to window size.

I am using 2 slideToShow Setting that will reponsive to 1 slideToShow after below certain width at slick-slider

<div class="container-body">
  <div class="slider your-class">
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
  </div>
</div>

But if I create a container to warp the post newest post content, the image size wouldn't responsive to window size.

<div class="container-body">
  <div class="slider your-class">
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div> 
  </div>
</div>

I want the image inside the "div" is dynamically changed like when I didn't use "div".

I have tried to create a script to dynamically change the image width with height: auto, but sometime it doesn't work and depend on how fast we are resizing.

I understand, the div size will depend on image size, so the slick slider height won't change at all. But I haven't any clues to solve it.

Upvotes: 1

Views: 8020

Answers (1)

Joe Warner
Joe Warner

Reputation: 3452

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Div's default display is block, img default position is inline we can resolve this by setting the container to inline or inline block and setting the width to 100%

I've got a loop that sets the width of the img-con and the width of the img container.

document.querySelectorAll('.con').forEach(el => {
  el.style.width = `${el.children.length * 100}%`;
  Array.from(el.children).forEach(img => {
    img.style.width = `${100 / el.children.length}%`
  })
})
.slider {
  overflow: hidden;
  padding: 0 10px;
  width: 50%;
}

.img-con {
  width: 100%;
  display: inline-block;
  position: relative;
  float: left;
}

.con {
  display: inline-block;
  height: auto;
}

.img-con>img {
  width: 100%;
  position: absolute;
  top: 0;
}

.img-con:before {
  content: '';
  width: 100%;
  padding-bottom: 64%;
  display: block;
}

.container-body {
  display: flex;
  flex-direction: row;
}
<div class="container-body">
  <div class="slider your-class active">
    <div class="con">
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
    </div>
  </div>

  <div class="slider your-class active">
    <div class="con">
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions