[英]Cannot read property 'offsetWidth' of undefined with Bootstrap Carousel
[英]Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
我似乎有一個 Bootstrap Carousel 問題,這是發布的其他問題/修復所獨有的。 這個很奇怪。
控制台錯誤:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at c.slide (https://www.somewebsite.com/js/bootstrap.min.js:6:6890)
at c.next (https://www.somewebsite.com/js/bootstrap.min.js:6:6128)
at e (https://www.nastassiafreeman.com/js/jquery.js:2:3957)
三、錯誤是如何觸發的:
單擊圖像后,會彈出一個允許導航的模式/輪播。 單擊箭頭時,會觸發錯誤,您無法繼續查看下一張圖像。
奇怪的事實:
當您刷新頁面並重試時,它起作用了。
我的 html 設置為只有 1 個空輪播和許多圖像,注意輪播是空的:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我的 js 文件然后查找單擊事件,並根據單擊的內容使用圖像填充輪播:
if($(this).attr('id') == 'fall_A'){
$('.item').remove();
$( '.carousel-inner' ).append('<div class="item active"><img id="img1" src="img/fall_A1.png" alt="..."><div class="carousel-caption"></div></div>');
$('.item').after('<div class="item"><img id="img2" src="img/fall_A2.png" alt="..."><div class="carousel-caption"></div></div>');
$('.item').last().after('<div class="item"><img id="img3" src="img/fall_A3.png" alt="..."><div class="carousel-caption"></div></div>');
}
else if($(this).attr('id') == 'fall_B'){
$('.item').remove();
$( '.carousel-inner' ).append('<div class="item active"><img id="img1" src="img/fall_B1.png" alt="..."><div class="carousel-caption"></div></div>');
$('.item').after('<div class="item"><img id="img2" src="img/fall_B2.png" alt="..."><div class="carousel-caption"></div></div>');
$('.item').last().after('<div class="item"><img id="img3" src="img/fall_B3.png" alt="..."><div class="carousel-caption"></div></div>');
}
等等...
我已確保第一個輪播項目處於活動狀態,這是其他一些類似帖子的解決方案。 真正讓我困惑的是它間歇性地工作。 我曾想過與另一個開源輪播一起工作,但現在我渴望了解這個問題,而不是希望看到它得到修復。
有什么想法嗎?
data-ride="carousel"
屬性修復JS錯誤文檔解釋了:
data-ride="carousel"
屬性用於在頁面加載時將輪播標記為動畫
但是當您加載頁面時,您的輪播仍然是空的。 腳本無法找到動畫項目並發生錯誤。
因此,刪除此屬性並在其中添加內容后運行輪播。
http://codepen.io/glebkema/pen/LbmPoX
var selectCarousel = $('#carousel-1'); var selectInner = selectCarousel.find('.carousel-inner'); $('#btn-1').click( function() { selectInner.children('.item').remove(); selectInner.append('<div class="item active"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt=""></div>'); selectInner.append('<div class="item"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt=""></div>'); selectInner.append('<div class="item"><img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt=""></div>'); selectCarousel.carousel(); }) $('#btn-2').click( function() { selectInner.children('.item').remove(); selectInner.append('<div class="item active"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=4" alt=""></div>'); selectInner.append('<div class="item"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=5" alt=""></div>'); selectInner.append('<div class="item"><img src="https://via.placeholder.com/900x300/69c/9cf/?text=6" alt=""></div>'); selectCarousel.carousel(); })
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .btn { margin: 15px; } .carousel-inner img { width: 100%; }
<div class="container"> <button id="btn-1" type="button" class="btn btn-primary btn-lg">Items form 1 to 3</button> <button id="btn-2" type="button" class="btn btn-primary btn-lg">Items form 4 to 6</button> <div id="carousel-1" class="carousel slide"> <div class="carousel-inner" role="listbox"> </div> <a href="#carousel-1" class="left carousel-control" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a> <a href="#carousel-1" class="right carousel-control" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
對我來說,這是一張課堂幻燈片。 顯然,就像數據騎行一樣,輪播會在某些時間間隔內搜索下一張幻燈片。 當我打開輪播時,我正在添加班級幻燈片並將項目動態添加到輪播中。 問題是,當我關閉輪播時,我刪除了所有項目,但沒有刪除幻燈片類,因此輪播試圖在空輪播中找到幻燈片。
在頁面上遇到兩個輪播非常相似的問題。
我收到了 carousel.js 錯誤:
無法讀取 null 的屬性“間隔”
在切換到第二個之后。 在檢查插件后,我發現了由內部代碼片段引起的錯誤
if (this._config.pause === 'hover') {
...
}
(事實證明hover
是默認值,在我的情況下這是不可取的)這讓我找到了解決方案。
所以我們只需要在使用插件方法調用初始化 carousel 時將pause
設置為false
$(car1).carousel('dispose')
$(car2).carousel({interval: false, ride: false, pause: false})
從那以后沒有看到任何錯誤。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.