物化 css | js - 轮播幻灯片中的可视化问题

Question

在我网站的主页上有一个带有 3 张幻灯片的 Materialise 轮播。

该页面是一个 python flask 模板，页面中注入了 Materialise 轮播，这是 base.html 模板

<!DOCTYPE html>
<html class="home-bkg">

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ga4MeasurementId}}"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', '{{ga4MeasurementId}}');
    </script>
    
    {% block viewItemListAccessories %}{% endblock %}
    {% block viewItemListBags %}{% endblock %}
    {% block viewItemAccessory %}{% endblock %}
    {% block viewItemBag %}{% endblock %}

    <meta charset="utf-8" />

    {% block homeTitle %}{% endblock %}
    {% block bagsTitle %}{% endblock %}
    {% block accessoriesTitle %}{% endblock %}
    {% block reimaginedTitle %}{% endblock %}
    {% block makingOfTitle %}{% endblock %}
    {% block pressTitle %}{% endblock %}
    {% block bagTitle %}{% endblock %}
    {% block legalTitle %}{% endblock %}

    <!--Import Google Icon Font -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import Font awesome icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <!--Import Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Arimo&family=Playfair+Display+Lato&display=swap"
        rel="stylesheet">
    <!--Import main.css and materialize.css-->
    <link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}" />
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css')}}"
        media="screen,projection" />
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    {% block homeMeta %}{% endblock %}
    {% block accessoriesMeta %}{% endblock %}
    {% block reimaginedMeta %}{% endblock %}
    {% block bagMeta %}{% endblock %}
    {% block bagsMeta %}{% endblock %}
    {% block legalMeta %}{% endblock %}
    {% block makingOfMeta %}{% endblock %}
    {% block pressMeta %}{% endblock %}

    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>

<body>
    <div>
        <!-- header-menu -->
        <div class="row no-margin-bottom">
            <div class="header-menu valign-wrapper center-align">
                <div class="col l1"></div>
                <div class="col s12 m12 l3">
                    <!--main logo-->
                    <a href="/">
                        <img src="{{ url_for('static', filename='images/logo_black.png') }}" id="logo"
                            class="responsive-img" width="275" /></img>
                    </a>
                </div>
                <div class="col s12 m4 l2"><a id="bags" class="top-menu-item" href="/bags">BAGS</a></div>
                <div class="col s12 m4 l2"><a id="accessries" class="top-menu-item" href="/accessories">ACCESSORIES</a>
                </div>
                <div class="col s12 m4 l2"><a id="lostAndFound" class="top-menu-item" href="/reimagined">REIMAGINED</a>
                </div>
                <div class="col l1"></div>
            </div>
        </div>

        {% block home %}{% endblock %}
        {% block bags %}{% endblock %}
        {% block accessories %}{% endblock %}
        {% block reimagined %}{% endblock %}
        {% block makingOf %}{% endblock %}
        {% block press %}{% endblock %}
        {% block bag %}{% endblock %}
        {% block accessory %}{% endblock %}
        {% block legal %}{% endblock %}

        <!-- footer -->
        <div class="row">
            <div class="footer valign-wrapper center-align">
                <div class="col offset-s2 s8 offset-s2 m2 l1"><a id="imemoi" class="footer-item"
                        href="/imemoi">IMEMOI</a></div>
                <div class="col offset-s2 s8 offset-s2 m2 l1"><a id="press" class="footer-item" href="/press">PRESS</a>
                </div>
                <div class="col offset-s2 s8 offset-s2 m4 l4 social-icons fa-lg">
                    <ul>
                        <li id="fb-icon"><a href="http://www.facebook.com/pages/imemoi/137151246299509"
                                target="_blank"><i class="fa fa-facebook footer-item"></i></a></li>
                        <li id="is-icon"><a href="http://instagram.com/imemoi_paris" target="_blank"><i
                                    class="fa fa-instagram footer-item"></i></a></li>
                        <li id="pi-icon"><a href="http://pinterest.com/imemoi/" target="_blank"><i
                                    class="fa fa-pinterest footer-item"></i></a></li>
                    </ul>
                </div>
                <div class="col offset-s2 s8 offset-s2 m4 l3"><a id="making-of" class="footer-item"
                        href="/making-of">MAKING OF & ENGAGEMENT</a></div>
                <div class="col offset-s2 s8 offset-s2 offset-m4 m4 offset-m4 l1"><a id="legal" class="footer-item"
                        href="/legal">LEGAL</a></div>
                <div class="col offset-s2 s8 offset-s2 offset-m4 m4 offset-m4 l2"><a id="contact-us" class="footer-item"
                        href="/contactUs">CONTACT US</a></div>
            </div>
        </div>

        <div class="row">
            <div class="subscribe valign-wrapper center-align">
                <div class="input-field col s8 offset-m4 m4 offset-m4 offset-l4 l4 offset-l4">
                    <input id="subscriberEmail" type="email" class="validate"></input>
                    <label for="subscriberEmail">SUBSCRIBE</label>
                    <span class="promo">YOU'LL GET THE 15% OFF !!!</span>
                </div>
                <a id="subscriberBtn" class="waves-effect waves-light btn black"><i
                        class="material-icons right">send</i></a>
            </div>
        </div>

        <div class="footer-copyright">
            <div class="imemoi-copyright center-align">
                Powered By IMEMOI - © Copyright 2011-2020 - VAT IT02883161206</a>
            </div>
        </div>

    </div>
    <!--jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!--JavaScript -->
    <script type="text/javascript" src="{{url_for('static', filename='js/materialize.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/main.js')}}"></script>
</body>

</html>

这是包含旋转木马和幻灯片的 home.html 模板：

{% extends 'base.html' %}

{% block homeTitle %}
<title>imemoi: exclusive luxury bags | home</title>
{% endblock %}

{% block homeMeta %}
<meta name="description" content="happy few maximalist accessories & much more handmade in italy ★ 100% upcliclyng" />
<meta property="og:url" content="https://www.imemoi.com/" />
<meta property="og:image" content="https://www.imemoi.com/static/images/home_slide_3.jpg" />
<meta property="og:description" content="happy few maximalist accessories & much more handmade in italy ★ 100% upcliclyng" />
<meta property="og:type" content="website" />
{% endblock %}

{% block home %}
<div class="row">
    <div class="carousel carousel-slider">
        <a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_1.jpg" alt="First slide"></a>
        <a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_2.jpg" alt="Second slide"></a>
        <a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_3.jpg" alt="Third slide"></a>
    </div>
</div>
{% endblock %}

这是初始化轮播的Javascript：

$(document).ready(function () {


    $('.carousel.carousel-slider').carousel({fullWidth: true });
    window.setInterval(function () { $('.carousel').carousel('next') }, 4000);


});

问题是这样的：当我在浏览器中加载页面时，图像被剪切并保持剪切状态直到我调整屏幕大小，调整屏幕大小后图像正确显示：

我试图通过将此添加到 .css 文件来解决问题：

.slider{
    height: 770.987px;
}

但是我在移动可视化方面遇到了问题：幻灯片下面是空的 space。

最后一点：图片均为 3360 x 2240 像素

我基本上需要以一种可以在笔记本电脑和移动设备上正确显示的方式包含轮播。

Answer 1

问题基本上在于轮播在图像加载之前就已初始化，因此轮播高度计算不正确。在加载所有页面时初始化轮播，而不仅仅是 DOM 将解决问题：

$( window ).on( "load", function() { 
    $('.carousel.carousel-slider').carousel({ fullWidth: true });
    window.setInterval(function () { $('.carousel').carousel('next') }, 4000);
 });

物化 css | js - 轮播幻灯片中的可视化问题

Materialize css | js - visualization issue in the Carousel Slides

javascript

css

flask

materialize