Q:

want to display images in carousel format with mysql

I m designing mobile view web-app.
I want to display images in Carousel. when I directly write code (I m getting the code here: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h) then it works fine. but when I m append the MySQL code its display in-line format like this:

this is my carousel 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>

and this is 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>');
   });
  });
 });

I want to display proper carousel code 

A:

Because your loop add class="item active" each element and show all of them. You can add class="item" except first.
This might works:
$.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>');
  }
});

