CODEWITHSUNDEEP
javascripthtmlcssdjango
Lookszz
Lookszz

Reputation: 37

Image doesn't load fully at first, only after refresh

I made a django application which is online at: https://www.casualspotter.com/. On my homepage I have a carousel with multiple images. The problem I'm having is that for some reason the images don't load fully. After refreshing the page the images do load fully. Website with half loaded carousel

The carousel code:

<div class="carousel carousel-slider" id="demo-carousel-content" data-indicators="true" >
  <a class="carousel-item" href="/cp_company">
      <img class='carouselitem' src="{% static 'images/cp_company.jpg' %}">
      <h2 class="bottom-left">C.P. COMPANY</h2>
  </a>
    <a class="carousel-item" href="/stone_island">
      <img class='carouselitem' src="{% static 'images/stone_island.jpg' %}">
        <h2 class="bottom-left">STONE ISLAND</h2>
  </a>
    <a class="carousel-item" href="/ma_strum">
      <img class='carouselitem' src="{% static 'images/mastrum.jpg' %}">
        <h2 class="bottom-left">MA.STRUM</h2>
  </a>
    <a class="carousel-item" href="/barbour">
      <img class='carouselitem' src="{% static 'images/barbour_lookbook.jpg' %}">
        <h2 class="bottom-left">BARBOUR</h2>
  </a>
    <a class="carousel-item" href="/lacoste">
      <img class='carouselitem' src="{% static 'images/lacoste_banner.jpg' %}">
        <h2 class="bottom-left">LACOSTE</h2>
  </a>
    <a class="carousel-item" href="/perry">
      <img class='carouselitem' src="{% static 'images/perry_banner.jpg' %}">
        <h2 class="bottom-left">FRED PERRY</h2>
  </a>
    <a class="carousel-item" href="/paul_shark">
      <img class='carouselitem' src="{% static 'images/paul_shark_banner.jpg' %}">
        <h2 class="bottom-left">PAUL & SHARK</h2>
  </a>
    <a class="carousel-item" href="/napa">
      <img class='carouselitem' src="{% static 'images/napa_banner.jpg_large' %}">
        <h2 class="bottom-left">NAPAPIJRI</h2>
  </a>
    <a class="carousel-item" href="/tnf">
      <img class='carouselitem' src="{% static 'images/tnf_banner.jpg' %}">
        <h2 class="bottom-left">THE NORTH FACE</h2>
  </a>
</div>

CSS:

img.carouselitem{
    height: auto;
}

Thanks in advance!

Upvotes: 0

Views: 493

Answers (1)

Mehdi
Mehdi

Reputation: 488

try this

.carousel.carousel-slider {
    height: 100vh;
}

add it to end of your styles.

Upvotes: 1

Related Questions