CODEWITHSUNDEEP
javascriptphpcsslaraveltwitter-bootstrap
Bipin
Bipin

Reputation: 99

How to set min-height of slider carousel equal to the varying height of image?

I want to set min-height of carousel to the varying size of image. Note: the image reduces by height when the window shrinks.

I tried to use java-script to set height of carousel equal to the height of image. But the problem is the height is constant for all the window sizes. What I didn't find was to provide dynamic value to the height based on responsiveness.

What I am doing seems little silly but I am having an issue. Issue is slider carousel takes time loading which results to lower components taking the position of slider for a glimpse. That ruins the appearance of my site. In order to solve that particular issue, I thought of setting up min-height of slider carousel to certain height. Doing that ruins responsiveness because in lower screen additional space is generated below slider. So only solution is setting min-height of slider to the varying height of image based on window size. There might be other methods as well for which I would highly appreciate.

// Js
const sliderImage = document.querySelector(".slider-image");
const slider = document.querySelector(".carousel");
slider.style.minHeight = sliderImage.height + "px";

// HTML
<div id="carouselExampleControls" class="carousel slide placeholder" data- 
ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="{{url('image/slider/slider02.jpg')}}" 
      class="slider-image d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="{{url('image/slider/slider01.jpg')}}" class="d-block w- 
      100" 
      alt="...">
    </div>
    <div class="carousel-item">
      <img src="{{url('image/slider/slider03.jpg')}}" class="d-block w- 
      100" 
      alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 
  role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" 
  role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

// No css applied yet

Upvotes: 0

Views: 986

Answers (1)

Mike Poole
Mike Poole

Reputation: 2055

As per the comments I take your question to be how you set the min-height of the image container to be the same as the height of the image container.

Your JavaScript should be changed so it looks up the height of the .carousel-item (i.e. the container of the image) rather than of .slider-image:

const sliderContainer = document.querySelector(".carousel-item");
const slider = document.querySelector(".carousel");
slider.style.minHeight = sliderContainer.height + "px";

Note that this assumes there are no other .carousel-item instances on the page. If that is likely to be the case then you should use ID's (e.g. #carouselItem) rather than the class name as a reference.

Upvotes: 1

Related Questions