Fullscreen Bildhintergrund Bootsrap3 Karussell zu diplay

Question

Ich habe eine statische Diashow mit Bootstrap3 Karussell, das gut funktioniert und mein Ziel ist es, es dynamisch zu machen. Ich kann nicht wirklich herausfinden, während die Bilder nicht angezeigt werden, während die Untertitel tun.

Diese html direkt den Body-Tag unten, bevor alle anderen Inhalte, wie angegeben:

<div class="carousel slide carousel-fade" data- ride="carousel"> 

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

    </div> 
</div> 

Und eine Javascript-Funktion:

function loadBanners() { 
    var json; 
    $.ajax({ 
     type: "GET", 
     url: "BannerServ", 
     dataType: "json", 
     success: function(data) { 

      json = JSON.stringify(data); 
      $.each(
       $.parseJSON(json), 
       function(index, arrayObj) { 
        var imageName = arrayObj.image; 
        var caption = arrayObj.title; 

        var $cssStyle = "{ background: url(" + imageName + ") no-repeat center center fixed;\ 
            -webkit-background-size: cover;\ 
            -moz-background-size: cover;\ 
            -o-background-size: cover;\ 
            background-size: cover; }"; 


        $('<div class="item"><div class="carousel-caption">' + caption + '</div></div>').appendTo('.carousel-inner'); 
        $('.item:nth-child(' + index + 1 + ')').css($cssStyle); 
       }); 
      $('.item').first().addClass('active'); 
      $('.carousel').carousel({ 
       interval: 1000 * 10 
      }); 


     } 
    }); 
} 

Bitte Ich brauche Hilfe gemacht, das Bild zu bekommen.

Answer 1

Wenn Ihr Style-Objekt ($ cssStyle) zu schaffen versuchen, ein tatsächliches Objekt anstelle einer Zeichenfolge mit:

var $cssStyle = { "background": "url('" + imageName + "') no-repeat center center fixed","-webkit-background-size": "cover","-moz-background-size": "cover","-o-background-size": "cover", "background-size": "cover" } 

jQuery CSS() Funktion übernimmt ein Objekt als Parameter, wenn mehrere Felder aktualisiert werden.

Siehe auch: How to define multiple CSS attributes in JQuery?