CODEWITHSUNDEEP
javascriptcssslideraspect-ratioslick.js
user972391
user972391

Reputation: 321

Change div size dynamically based on background-image aspect ratio and fixed height

I am using slick slider (http://kenwheeler.github.io/slick/) to show images of various sizes (both portrait and landscape pictures). The image is shown as a background-image property of the div

However, the slider has a fixed width/height out of the box.

My requirement is to have all the slick divs with a fixed height - but a variable width based on the portrait or landscape picture. In the below code, images 2,3 are portrait mode and 1,4 are landscape mode.

      <div class="wrapper gallery-wrapper">
    <div class="container-fluid gallery-container">
      <div class="row">
        <div class="col-md-12 slideshow">
          <div class="agent-detail-slideshow" id="agent-detail-slideshow">
            <div class="item slick-slide-width" data-image="assets/img/1.png" style="background-image:url('assets/img/1.png')"></div>
            <div class="item slick-slide-width" data-image="assets/img/2.png" style="background-image:url('assets/img/2.png')"></div>

            <div class="item slick-slide-width" data-image="assets/img/3.png" style="background-image:url('assets/img/3.png')"></div>
            <div class="item slick-slide-width" data-image="assets/img/4.png" style="background-image:url('assets/img/4.png')"></div>
          </div>
          <ul>
            <li class="next-carat white shadow"></li>
            <li class="prev-carat white shadow"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

I set the variable width property of the slider to true and have added a custom slick-slide-width class to each div.

What CSS needs to go into the slick-slide-width ?

Is it possible to use just CSS to adjust the div width or do I need any javascript to control the div width. Also, the height needs to be fixed and as decided by the slider (responsively). So, it would be landscape,portrait,portrait,landscape divs in the above code.

Upvotes: 0

Views: 1020

Answers (1)

tao
tao

Reputation: 90188

To size your slides based on image ratio you need to use proper <img /> tags in your slides (mind the markup in the example below). And use...

$('...').slick({
  // ...
  variableWidth: true
  centerMode: true, // optional
  // ...
});

If your images do not already have the same height, you probably want to couple this with...

.slick-slide img { max-height: /*...*/ }


$(document).ready(function() {
  $('#agent-detail-slideshow').slick({
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
})
.slick-slide {
  opacity: .1;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  outline: none;
}

.slick-current {
  opacity: 1;
}
.slideshow {
  overflow: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>


<div class="wrapper gallery-wrapper">
  <div class="container gallery-container">
    <div class="row">
      <div class="col-md-12 slideshow">
        <div class="agent-detail-slideshow" id="agent-detail-slideshow">
          <div class="item"><img src="https://unsplash.it/600/300" /></div>
          <div class="item"><img src="https://unsplash.it/800/300" /></div>
          <div class="item"><img src="https://unsplash.it/400/300" /></div>
          <div class="item"><img src="https://unsplash.it/200/300" /></div>
          <div class="item"><img src="https://unsplash.it/500/300" /></div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions