Bootstrap 4 Carousel獲取圖像大小

Question

這是一個非常基本的Bootstrap 4 Carousel，有3張圖片。

我實現了兩個可用的事件： slide.bs.carousel和slid.bs.carousel 。

我能夠在slid事件監聽器中獲取圖像寬度（當輪播完成其幻燈片轉換時）但是當我嘗試在slide監聽器中獲取它時圖像寬度始終為0 （我想知道下一個的大小）滑動）。

這是為什么？

這是一個片段。 觀看控制台。

 jQuery('#carouselDemo').on('slide.bs.carousel', function(e) { console.log('SLIDE event'); console.log('Image width: ' + e.relatedTarget.querySelector('img').clientWidth); }); jQuery('#carouselDemo').on('slid.bs.carousel', function(e) { console.log('SLID event'); console.log('Image width: ' + e.relatedTarget.querySelector('img').clientWidth); }); 

 .carousel { background-color: grey; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div id="carouselDemo" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/700x400"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/900x400"> </div> </div> <a class="carousel-control-prev" href="#carouselDemo" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselDemo" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

https://jsfiddle.net/upsidown/ruo0gt19/

---

編輯

我沒有提到我需要下一張幻燈片圖片客戶端寬度 ，即。 顯示寬度而不是原始圖像寬度。 下面是一個較大圖像的示例，使用@gaetanoM提供的答案強制為100％最大寬度。

注意：我不能簡單地使用主體或容器元素寬度，因為在我的用例中，輪播圖像以全屏顯示，最大高度為100％，因此寬度可以變化並且小於容器寬度。

 jQuery('#carouselDemo').on('slide.bs.carousel', function(e) { var fromelement = jQuery('#carouselDemo .carousel-inner img').eq(e.from); var toelement = jQuery('#carouselDemo .carousel-inner img').eq(e.to); console.log('slide: Current element Width is: ' + fromelement[0].width); console.log('slide: Next element Width is: ' + toelement[0].width); }); jQuery('#carouselDemo').on('slid.bs.carousel', function(e) { var fromelement = jQuery('#carouselDemo .carousel-inner img').eq(e.from); var toelement = jQuery('#carouselDemo .carousel-inner img').eq(e.to); console.log('slid: Current element Width is: ' + fromelement[0].width); console.log('slid: Next element Width is: ' + toelement[0].width); }); 

 .carousel { background-color: grey; } .carousel-item > img { max-width: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div id="carouselDemo" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/700x400"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/900x400"> </div> </div> <a class="carousel-control-prev" href="#carouselDemo" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselDemo" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

Answer 1

根據更新的答案，滑動時問題是在next / prev元素上（它是隱藏的，因此沒有clientWidth）。

為了克服這個問題，解決方案可以是：

• 切換此隱藏元素的可見性
• 獲取clientWidth
• 立即重新切換能見度，以適應每一個人。

在片段中，每個圖像具有不同的寬度以便證明結果。

 jQuery('#carouselDemo').on('slide.bs.carousel', function(e) { var fromelement = jQuery('#carouselDemo .carousel-inner img').eq(e.from); var toelement = jQuery('#carouselDemo .carousel-inner img').eq(e.to); toelement.parent().toggleClass('active'); console.log('slide: Current element Width is: ' + fromelement[0].width + ' / ' + fromelement[0].clientWidth); console.log('slide: Next element Width is: ' + toelement[0].width + ' / ' + toelement[0].clientWidth); toelement.parent().toggleClass('active'); }); jQuery('#carouselDemo').on('slid.bs.carousel', function(e) { var fromelement = jQuery('#carouselDemo .carousel-inner img').eq(e.from); var toelement = jQuery('#carouselDemo .carousel-inner img').eq(e.to); fromelement.parent().toggleClass('active'); console.log('slid: Current element Width is: ' + fromelement[0].width + ' / ' + fromelement[0].clientWidth); console.log('slid: Next element Width is: ' + toelement[0].width + ' / ' + toelement[0].clientWidth); fromelement.parent().toggleClass('active'); }); 

 .carousel { background-color: grey; } .carousel-item > img.n1 { width: 100%; height: 100vh; } .carousel-item > img.n2 { width: 50%; height: 100vh; } .carousel-item > img.n3 { width: 75%; height: 100vh; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script> <div id="carouselDemo" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="n1" src="https://via.placeholder.com/700x400"> </div> <div class="carousel-item"> <img class="n2" src="https://via.placeholder.com/800x400"> </div> <div class="carousel-item"> <img class="n3" src="https://via.placeholder.com/900x400"> </div> </div> <a class="carousel-control-prev" href="#carouselDemo" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselDemo" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

閱讀如何使用JavaScript獲取圖像大小（高度和寬度）？ 我建議使用普通的HTML img width或naturalWidth 。

 jQuery('#carouselDemo').on('slide.bs.carousel', function(e) { var fromelement = jQuery('#carouselDemo .carousel-inner img').eq(e.from); var toelement = jQuery('#carouselDemo .carousel-inner img').eq(e.to); console.log('slide: Current element Width is: ' + fromelement[0].width); console.log('slide: Next element Width is: ' + toelement[0].width); }); jQuery('#carouselDemo').on('slid.bs.carousel', function(e) { var fromelement = jQuery('#carouselDemo .carousel-inner img').eq(e.from); var toelement = jQuery('#carouselDemo .carousel-inner img').eq(e.to); console.log('slid: Current element Width is: ' + fromelement[0].width); console.log('slid: Next element Width is: ' + toelement[0].width); }); 

 .carousel { background-color: grey; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div id="carouselDemo" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/700x400"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/900x400"> </div> </div> <a class="carousel-control-prev" href="#carouselDemo" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselDemo" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

Answer 2

這是因為每個人都在不同的點發射。 https://getbootstrap.com/docs/4.0/components/carousel/

slide.bs.carousel = This event fires immediately when the slide instance method is invoked.

slid.bs.carousel = This event is fired when the carousel has completed its slide transition.

因此，當您想要下一個圖像大小時，滑動起作用，因為加載了該圖像，而幻燈片事件在下一個圖像加載之前觸發。 如果由於某種原因你必須使用slide事件vs slid，那么你必須在事件完成后設置某種類型的回調。