bootstrap carousel image which is display none div taking space

Question

I have bootstrap carousel and carousel of img has data-mobil and data-table attribute and when I resize the window for tablet my img src value's has been chancing with data-table src or when I resize the window for mobile my img src has been chancing width data-mobil src..it's okey so far..but at the same thime if data-mobil or data-tablet is undefined I mean is empty than make it display:none; but my display none take space why ?

click to see live example - resize window for tablet version

function makeResize() {
  var imageSrc = $(".main-carousel img");
  if ($(window).width() <= 768 && $(window).width() > 480) {
    $(imageSrc).each(function(key, value) {
      if ($(value).data('tablet') == undefined)
        $(value).parent(".item").hide();
      
      else {
        $(value).attr('src', $(value).data('tablet'));
        $(value).parent(".item").show();
      }
    });
  } else if ($(window).width() <= 480) {
    $(imageSrc).each(function(key, value) {
      if ($(value).data('mobil') == undefined) {
        $(value).parent(".item").hide();
      } else {
        $(value).attr('src', $(value).data('mobil'));
        $(value).parent(".item").show();
      }
    });
  } else {
    $(imageSrc).each(function(key, value) {
      $(value).attr('src', $(value).data('src'));
      $(value).show();
    });
  }
}

$(document).ready(function(){
  
   $(window).resize(function(){
        makeResize();
    });
    makeResize();
});

.main-carousel{
  width:1000px;
}
.main-carousel img{
  width:100%;
}

<html lang="en">
<head>
  <meta charset="UTF-8" /><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

</head>
<body>
  
   <div id="homepage-carousel" class="carousel carousel-fade slide main-carousel" data-ride="carousel">
     
        <ol class="carousel-indicators">
    <li data-target="#homepage-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#homepage-carousel" data-slide-to="1"></li>
    <li data-target="#homepage-carousel" data-slide-to="2"></li>
  </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
            

              <div class="item active">
                <img src="http://cdn.anitur.com.tr/resimler/normal/2017-02/banner_Hn3kjP6eM7ltkZzATMMkanitur-enguzel-anilar-manset-banner-2017-6subat.jpg"  data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg">
              </div>

              <div class="item">
                <img src="http://cdn.anitur.com.tr/resimler/normal/2016-12/banner_r7SIBGm1BaKCNMsZojfNtermal-bolgeler.jpg"  data-tablet="http://www.anitur.com.tr/blog/wp-content/uploads/2016/03/Silversea-cruise-1024x657.jpg" data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg">
              </div>
              <div class="item">
                <img src="http://cdn.anitur.com.tr/resimler/normal/2017-01/banner_PYo0aKYQiz6VN3XF1rTGunknown-2.jpeg"  data-tablet="http://www.anitur.com.tr/blog/wp-content/uploads/2016/03/Silversea-cruise-1024x657.jpg" data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg">
              </div>


            </div>
        </div>
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

i believe the issue is there since carousel check for all div.item element and add/remove class active. When ever the active class is applied on the display none div you are seeing a grey out div on your screen. — Deep

Deep Deep · Accepted Answer · 2017-02-03T12:40:37

Try with below code. I have tested it in the local setup.

Hope this helps.

  function makeResize() {
  var imageSrc = $(".main-carousel img");
  if ($(window).width() <= 768 && $(window).width() > 480) {
    $(imageSrc).each(function(key, value) {
      if ($(value).data('tablet') == undefined)

         if($(value).parent("div").hasClass("active"))
         {
          $(value).parent("div").removeClass("item active").css('display','none');
          $(value).parent("div").next("div").addClass("active");
         }
         else
         {
          $(value).parent("div").removeClass("item active").css('display','none');
         }

      else {
        $(value).attr('src', $(value).data('tablet'));
        $(value).parent("div").addClass("item").css('display','');
      }
    });
  } else if ($(window).width() <= 480) {
    $(imageSrc).each(function(key, value) {
      if ($(value).data('mobil') == undefined) {

         if($(value).parent("div").hasClass("active"))
         {
          $(value).parent("div").removeClass("item active").css('display','none');
          $(value).parent("div").next("div").addClass("active");
         }
         else
         {
          $(value).parent("div").removeClass("item active").css('display','none');
         }
      } else {
        $(value).attr('src', $(value).data('mobil'));
        $(value).parent("div").addClass("item").css('display','');
      }
    });
  } else {
    $(imageSrc).each(function(key, value) {
      $(value).attr('src', $(value).data('src'));
       $(value).parent("div").addClass("item").css('display','');
      $(value).show();
    });
  }
}

bootstrap carousel image which is display none div taking space

2 Answers