轮播无法正常工作

Question

我有我在轮播引导程序中显示的图像：

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

当我检查元素时，轮播似乎获得了相同的键，所以现在我不能在图像之间滑动我做错了什么？

Answer 1

当你给他们 id 时，确保他们是唯一的。 例如

ol.append("<li data-target='#carousel-example-captions' data-slide-to='' class='active'>");

应该是：

ol.append("<li data-target='#carousel-example-captions"+key+"' data-slide-to='' class='active'>");