簡體   English   中英

實現帶有圖像的輪播消失

[英]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

https://jsfiddle.net/5cjaduwv/9/

只是為了進行完整性檢查,您可以嘗試將該 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM