は、MySQL

Question

私はモバイルビューのWebアプリを設計するmのカルーセル形式で画像を表示したいです。 私はカルーセルで画像を表示したいです。それが正常に動作します：私は直接（https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h私はここにコードを取得M）コードを書くとき。

が、これは私のカルーセルコードです：しかし、私はmのとき、次のようにMySQLのコードにその表示のインライン書式を追加 -

<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> 

、これはjavascriptのコードである： -

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

適切なカルーセルコードを表示したい

Answer 1

Becau SEあなたのループがclass="item active"に各要素を追加し、それらのすべてを示しています。最初以外のclass="item"を追加できます。

これかもしれないが動作します。このThnaks

$.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>'); 
    } 
});