轮播无法正常工作

Question

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 ?

Answer 1

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'>");