引導旋轉木馬與動態的項目不會滑動

我使用的股票自舉轉盤：引導旋轉木馬與動態的項目不會滑動

<div id="main-navigation-carousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active" data-id="0"> 
     <ul> 
     <li><a></a></li> 
     .... 
     <li><a></a></li> 
     </ul> 
    </div> 
    </div> 
</div>

通過點擊轉盤新.item注入到.carousel-inner內的錨標記。 .item注入後（可以正常工作），傳送帶應滑動到.item。然而，沒有任何反應。

<div id="main-navigation-carousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active" data-id="0"> 
     <ul> 
     <li><a></a></li> 
     .... 
     <li><a></a></li> 
     </ul> 
    </div> 
    <div class="item" data-id="1"> 
     <ul> 
     <li><a></a></li> 
     .... 
     <li><a></a></li> 
     </ul> 
    </div> 
    <div class="item" data-id="2"> 
     <ul> 
     <li><a></a></li> 
     .... 
     <li><a></a></li> 
     </ul> 
    </div> 
    </div> 
</div>

即使我在瀏覽器控制檯沒有使用$("#main-navigation-carousel").carousel(1);發生。如果我在服務器上的代碼中正確添加項目，一切正常。

來源

2013-09-26 Andre Zimpel

做你的間隔具有價值？來自http://getbootstrap.com/javascript/#carousel：自動循環項目之間的延遲時間。如果爲false，則傳送帶不會自動循環。 –

@BassJobsen naw。它不應該自動循環。如果我使用'$（「＃main-navigation-carousel」）。carousel（1）;'它應該滑動到下一個項目。但我想我現在已經明白了。如果我在瀏覽器中輸入'$（「＃main-navigation-carousel」）。carousel（）。data（）'到控制檯，我可以看到該傳送帶只有一個項目。這是錯誤的（'長度：1'）。我想我需要刷新旋轉木馬上的物品。我只需要弄清楚如何做到這一點。 –

也設置你的'旋轉木馬指標'，請參閱：http：//bootply.com/83370 –

刪除輪播數據，然後再次觸發它的工作！

$("#main-navigation-carousel").carousel("pause").removeData(); 
$("#main-navigation-carousel").carousel(target_slide_index);

由於傳送帶不應該自動滑動，因此使用.carousel("pause").removeData()很重要。

來源

2013-09-26 14:02:13

這似乎是一個黑客，這是最好的方式？ – Stephan

在什麼情況下'.removeData（）;'是有意義的？ –

@BassJobsen如果您在元素上執行.carousel（），則輪播將所有項目保存在其中。在加載時，我只有一件物品。如果我通過單擊錨點添加另一個，則轉盤不知道該項目。這就是爲什麼我無法滑向它。從carousel中刪除數據並用'.carousel（target_slide_index）'初始化新數據;'刷新傳送帶的項目。這樣可以滑動到新添加的項目。 –

爲http://bootply.com/83370與傳送帶上課.carousel

$('.carousel').carousel({interval:false}); 
$('.carousel-inner').append('<div class="item"><img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAH0CAYAAABl8+PTAAALGklEQVR4nO3XIQEAMAzAsJmcfym/jIEGhJd2dvcBAADQM9cBAAAA3DCEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAg6gMgubGT543s8gAAAABJRU5ErkJggg==" alt="900x500"><div class="carousel-caption"><h3>Third slide label</h3><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p></div></div>'); 
$('.carousel-indicators li').removeClass('active'); 
$('.carousel-indicators').append('<li data-target="#carousel-example-captions" data-slide-to="1" class="active"></li>'); 
$('.carousel').carousel('next');

來源

2013-09-27 06:50:30

試試這個：

<!-- Carousel --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators" id="car_id"></ol> 
    <div class="carousel-inner" id="car_inner"></div> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
</div><!-- /.carousel -->

//json data result = [{"id_img": 17,"img_filename": "ca0d8455-2702-4560-a444847429e36670.jpg"},{"id_img": 18,"img_filename": "eb0c6c77-fbd7-4f2c-bf22-10c874eefbf6.jpeg"},{"id_img": 19,"img_filename": "e7568c87-babb-4049-aed6-27b97866a817.png"}] 
 
    var x = $.getJSON('../Json/GetImage', function (data) { 
 
     $("#myCarousel").carousel("pause").removeData(); 
 
     var content_indi = ""; 
 
     var content_inner = ""; 
 
     $.each(data, function (i, obj) { 
 
     content_indi += '<li data-target="#myCarousel" data-slide-to="' + i + '"></li>'; 
 
     content_inner += '<div class="item" style="background:url(&#39/images/' + obj.img_filename + '&#39) no-repeat center center;background-size: cover"></div>'; 
 
     }); 
 
     $('#car_id').html(content_indi); 
 
     $('#car_inner').html(content_inner); 
 
     $('#car_inner .item').first().addClass('active'); 
 
     $('#car_indi > li').first().addClass('active'); 
 
     $('#myCarousel').carousel(); 
 
    });

來源

2015-05-04 13:52:57 bayu

你能不能添加一個解釋它爲什麼起作用的解釋？ – Robert

嗨@羅伯特：在第一頁加載時，當Bootstrap找到「.carousel（）」時，它呈現旋轉木馬對象。所以，「幻燈片」事件綁定在傳送帶上。這個解決方案是首先「停止」「滑動事件」，然後使用（$（「＃myCarousel」）.carousel（「pause」）。removeData（））移除輪播容器中的所有對象，然後填充輪播元素，最後告訴引導程序使用.carousel（）再次呈現輪播對象;順便說一句，carousel（target_slide_index）是沒有必要的，事實上我在使用它的時候出錯了。我正在使用Bootstrap 3，併爲我的英語感到抱歉。 – bayu

試試這個代碼：

//json data result = [{"id_img": 17,"img_filename": "ca0d8455-2702-4560-a444847429e36670.jpg"},{"id_img": 18,"img_filename": "eb0c6c77-fbd7-4f2c-bf22-10c874eefbf6.jpeg"},{"id_img": 19,"img_filename": "e7568c87-babb-4049-aed6-27b97866a817.png"}] 
 
    var x = $.getJSON('../Json/GetImage', function (data) { 
 
     $("#myCarousel").carousel("pause").removeData(); 
 
     var content_indi = ""; 
 
     var content_inner = ""; 
 
     $.each(data, function (i, obj) { 
 
     content_indi += '<li data-target="#myCarousel" data-slide-to="' + i + '"></li>'; 
 
     content_inner += '<div class="item" style="background:url(&#39/images/' + obj.img_filename + '&#39) no-repeat center center;background-size: cover"></div>'; 
 
     }); 
 
     $('#car_id').html(content_indi); 
 
     $('#car_inner').html(content_inner); 
 
     $('#car_inner .item').first().addClass('active'); 
 
     $('#car_indi > li').first().addClass('active'); 
 
     $('#myCarousel').carousel(); 
 
    });

來源

2016-06-28 12:09:35 Nupur

引導旋轉木馬與動態的項目不會滑動

回答

相關問題