самозагрузка карусельного изображения, которое является проявление ни ДИВА захват пространства

У меня есть самозагрузки карусели и карусель ГУИ data-mobil и data-table атрибутов и при изменении размера окна для планшета моей IMG значения ЦСИ была нечаянно с data-table СРКОМ или при изменении размера окна для мобильного my img src имеет значение ширины data-mobil src..it okey до сих пор .. но в то же время, если data-mobil или data-tablet не определено Я имею в виду пустое, чем его отображение: none; но мой дисплей не занимает места почему?самозагрузка карусельного изображения, которое является проявление ни ДИВА захват пространства

click to see live example - изменить размер окна для планшета версии

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>

источник

2017-02-03 ani_css

Я считаю, что проблема существует, поскольку проверка карусели для всех элементов div.item и добавление/удаление класса активны. Когда активный класс применяется на дисплее, ни один div не видит серого div на экране. – Deep

есть ли функция для добавления/удаления, как hide/show? –

Попробовать ниже кода. Я тестировал его в локальной настройке.

Надеюсь, это поможет.

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(); 
    }); 
    } 
}

источник

2017-02-03 12:40:37 Deep

Интересно, как раньше ничего не изменилось. Я думаю, что есть что-то с карусели не с div или img. –

@recruit_man есть ли какая-либо ссылка, где я могу проверить полный обновленный ваш код? – Deep

загрузить? –

Ты прячешься деталь, но она по-прежнему существует, насколько ползунок обеспокоен, поэтому вы видите пустое место для этого. Вам нужно либо .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') 
}

источник

2017-02-03 12:25:32 mrben522

сначала я буду $ (значение) .parent (". Item"). Remove(); но для того, чтобы принести его, как должен использоваться отряд? –

отредактировал ответ с примером кода – mrben522

hi Я использую эти коды: http://codepen.io/cowardguy/pen/VPdgzR , но я думаю, что это работает и нет функции detach(), это правда? и спасибо вам большое –

самозагрузка карусельного изображения, которое является проявление ни ДИВА захват пространства

ответ

Смежные вопросы