Bootstrap-Karussell Bild, das Display keine div Aufnahmeraum ist

Ich habe Bootstrap-Karussell und Karussell von img hat data-mobil und data-table Attribut und wenn ich das Fenster für Tablet mein img src Wert die Größe wurde mit data-table src chancing oder wenn ich die Größe des Fensters für mobile mein img src hat Breite data-mobil src..it's okey so weit..aber zur gleichen Zeit, wenn data-mobil oder data-tablet ist undefiniert ist ich meine, ist leer, als es anzuzeigen: keine; aber mein Display nimmt keinen Platz warum?Bootstrap-Karussell Bild, das Display keine div Aufnahmeraum ist

click to see live example - die Größe Fenster für 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>

Quelle

2017-02-03 ani_css

ich glaube, das Problem ist da Karussell für alle div.item Element überprüfen und hinzufügen/entfernen Klasse aktiv. Wann immer die aktive Klasse auf dem Display ohne Div angewendet wird, sehen Sie ein graues Div auf Ihrem Bildschirm. – Deep

Gibt es irgendeine Funktion für hinzufügen/entfernen wie verstecken/anzeigen? –

Versuchen Sie wollen mit unter dem Code. Ich habe es im lokalen Setup getestet.

Hoffe, das hilft.

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

Quelle

2017-02-03 12:40:37 Deep

es ist interessant wie zuvor nichts ändern Ich denke, es gibt etwas mit Karussell nicht mit div oder img –

@recruit_man gibt es einen Link, wo ich den vollständigen aktualisierten Code von dir überprüfen kann? – Deep

soll ich hochladen? –

Sie das Element versteckt, aber es besteht immer noch so weit wie der Schieber angeht, deshalb Sie sehen einen weißen Fleck dafür. Sie müssen entweder .remove() es oder wenn Sie es brauchen später .detach()

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

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

und dann im Codeblock zurück zu bringen verwenden, wo Sie es brachte

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

Quelle

2017-02-03 12:25:32 mrben522

zuerst werde ich $ (value) .parent (". Item"). Remove(); aber dafür bringst du wie detach verwenden muss? –

bearbeitet Antwort mit Beispielcode – mrben522

Hallo ich benutze diese Codes: http://codepen.io/cowardguy/pen/VPdgzR aber ich denke, es funktioniert und es gibt keine detach() Funktion ist es wahr oder? und vielen Dank –

Bootstrap-Karussell Bild, das Display keine div Aufnahmeraum ist

Antwort

Verwandte Themen