bootstrap 显示 none div 拍摄 space 的轮播图片

Question

我有 bootstrap 轮播和 img 的轮播有 data-mobil 和 data-table 属性，当我为平板电脑调整 window 大小时，我的 img src 值一直在变化data-table src 或当我为移动设备调整 window 大小时，我的 img src 一直在改变宽度 data-mobil src..到目前为止还不错..但同时如果 data-mobil或者 data-tablet 是未定义的我的意思是空的而不是 display:none;但是我的显示 none 占用 space 为什么？

click to see live example - 为平板电脑版本调整大小 window

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>

Answer 1

您正在隐藏该项目，但就滑块而言它仍然存在，这就是您看到它的空白点的原因。你需要 .remove() 它或者如果你需要稍后把它带回来使用 .detach()

https://api.jquery.com/detach/

if ($(value).data('tablet') == undefined) {
  var hidden = $(value).parent(".item").detach()
}

然后在你想要它带回来的代码块中

if (hidden) {
  hidden.appendTo('target you want it added to')
}

Answer 2

试试下面的代码。我已经在本地设置中测试过了。

希望对您有所帮助。

  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 显示 none div 拍摄 space 的轮播图片

bootstrap carousel image which is display none div taking space

javascript

jquery

carousel

twitter-bootstrap