[英]Materialize Carousel with Images disappears
我將 Materialize.js 用於它們可用的一些組件和 JS 庫。 我一直在使用的一個是“輪播”組件。 我在幻燈片容器中設置了三張幻燈片,每張幻燈片都有一個<h5>
和一個<p>
元素。 這完全符合預期。 一旦我將<img>
元素添加到幻燈片中,整個輪播就會消失。 這就是我要說的:
工作輪播代碼:
<div class="carousel carousel-slider center z-depth-5" data-indicators="true">
<div class="carousel-fixed-item center">
<paper-button raised class="carousel_button" id="top_button">Download Now</paper-button>
</div>
<div class="carousel-item white-text" href="#one" id="c_one">
<div class="carousel_item_inner">
<h5>Plan</h5>
<p class="white-text">This is your first panel</p>
</div>
</div>
<div class="carousel-item white-text" href="#two" id="c_two">
<div class="carousel_item_inner">
<h5>Create</h5>
<p class="white-text">This is your second panel</p>
</div>
</div>
<div class="carousel-item white-text" href="#three" id="c_three">
<div class="carousel_item_inner">
<h5>Generate</h5>
<p class="white-text">This is your third panel</p>
</div>
</div>
</div>
和 JS:[編輯]
$(document).ready(function() {
$('.parallax').parallax();
$('.carousel.carousel-slider').carousel({full_width: true});
$('.scrollspy').scrollSpy();
$('.stat_circles').addClass('animate');
});
這是它的樣子:
一旦我將<img>
元素添加到 .carousel_item_inner <div>
,輪播完全消失。 這是帶有<img>
的旋轉木馬項目之一:
<div class="carousel-item white-text" href="#one" id="c_one">
<div class="carousel_item_inner">
<h5>Plan</h5>
<p class="white-text">This is your first panel</p>
<img src="images/plan.PNG">
</div>
</div>
這是在<img>
元素之后:
真的很困惑為什么整個輪播會在幻燈片容器中以<img>
消失。 非常感謝所有幫助,提前致謝!
這里也是 Materialize Carousel 的鏈接: http : //materializecss.com/carousel.html
編輯:
這是一個jsfiddle
只是為了進行完整性檢查,您可以嘗試將該 js 包裝在准備好的文檔中嗎? 可能是在加載圖像之前調用了 js。 還要確保您正在頁面底部加載這些腳本,因為您可能需要很長時間才能加載依賴於庫的圖像。
// Load your JS files here in order of dependencies
// such as: jQuery, Bootstrap, other libs and lastly your custom js files
// KEEP your CSS files in the head of your template.
<script>
$(function(){
$('.carousel.carousel-slider').carousel({full_width: true});
});
</script>
</body>
</html>
我能夠在小提琴中重現您的錯誤,它歸結為 jQuery 和物化的 JS 依賴關系。 你能分享你的腳本列表和它們的位置嗎? 我通常將它們放在 body 的末尾,以便首先加載 DOM。 jQuery 應該是第一個庫,其他庫在它下面。
您是否嘗試將<img>
元素放在<p>
元素之間?
Materialise 的默認輪播似乎並不是為了將 img 和文本保存在同一個容器中,它們只是一個接一個地顯示。
相反,請嘗試滑塊: http : //materializecss.com/media.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.