möchten Bilder im Karussell-Format mit mysql

Question

Ich möchte mobile Ansicht Web-app. Ich möchte Bilder in Karussell anzeigen. wenn ich direkt Code schreibe (ich bekomme den Code hier: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h) dann funktioniert es gut. aber wenn ich anhängen M die MySQL-Code seine Anzeige in-line-Format wie folgt aus:

das ist mein Karussell Code: -

<div class="row"> 
<div class="col s12"> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 


<!-- Wrapper for slides --> 
<div class="carousel-inner" id="marquee"> 

</div> 

</div> 

</div> 
</div> 

und dies ist Javascript-Code: -

$(document).ready(function() 
{ 
    var url="http://api.dentallabworld.com/marquee.php"; //This file returns json data 
    $.getJSON(url,function(result){ 
    console.log(result); 
    $.each(result, function(i, field){ 
    var id=field.Id; 
    var marquee=field.Image; 
    $("#marquee").append('<div class="item active"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>'); 
    }); 
    }); 
}); 

Ich möchte den richtigen Karussellcode anzeigen

Answer 1

Becau Se Ihre Schleife addieren Sie class="item active" jedes Element und zeigen Sie alle von ihnen an. Sie können class="item" mit Ausnahme zuerst hinzufügen.

Dies könnte funktioniert:

$.each(result, function(i, field){ 
    var id=field.Id; 
    var marquee=field.Image; 
    if(i==0){ 
    $("#marquee").append('<div class="item active"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>'); 
    } else { 
    $("#marquee").append('<div class="item"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>'); 
    } 
});