I have images that i displayed inside carousel bootstrap:
`$.getJSON("http://127.0.0.1/CM/public/calendar/getimg/"+data.id, function(data)
{
var div = $("<div id='carousel-example-captions-1' data-ride='carousel' class='carousel slide'>");
var ol = $(" <ol class='carousel-indicators'> ");
$.each(data, function(key,value)
{
if(key == '0')
{
ol.append("<li data-target='#carousel-example-captions1' data-slide-to='' class='active'>");
ol.find('li').attr("data-slide-to",key);
ol.append("</li>");
}
else
{
ol.append("<li data-target='#carousel-example-captions' data-slide-to='' ></li>");
ol.find('li').attr("data-slide-to",key);
ol.append("</li>");
}
});
ol.append(" </ol> ");
div.append(ol);
var div2 = $("<div role='listbox' class='carousel-inner' >")
$.each(data, function(key,value)
{ //loop through it
var img = "http://127.0.0.1/CM/public/"+value.path;
console.log(img);
if(key == '0')
{
var item = $("<div class='item active' >");
}
else
{
var item = $("<div class='item' >");
}
item.append("<img src=''>");
item.find('img').attr( "src", img );
item.append("</div>");
div2.append(item);
});
div2.append("</div> ");
div.append(div2);
$("#albums").append(div);
});`
when i inspect the elements it seems to be that carousel is getting the same key so now i can't slide betwwen images what did i do wrong ?
When you're giving them ids, make sure they are unique. for example
ol.append("<li data-target='#carousel-example-captions' data-slide-to='' class='active'>");
should be:
ol.append("<li data-target='#carousel-example-captions"+key+"' data-slide-to='' class='active'>");