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

Question

In the home page of my website there's a Materialize carousel with 3 slides.在我网站的主页上，有一个带有 3 张幻灯片的 Materialise 轮播。

The page is a python flask template an the Materialize carousel is injected in the page, this is the base.html template该页面是一个 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>

And this is the home.html template containing the carousel and the slides:这是 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 %}

This is the Javascript that initialize the carousel:这是初始化轮播的 Javascript：

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

The problem is this: when I load the page in the browser, the image is cutted and it remains cutted until I resize the screen, after resizing the screen the image dispays correctly:问题是这样的：当我在浏览器中加载页面时，图像被剪切并保持剪切，直到我调整屏幕大小，调整屏幕大小后图像正确显示：

I tried to solve the issue adding into the.css file this:我试图解决添加到 .css 文件中的问题：

 .slider{ height: 770.987px; }

but then I have problems with the mobile visualization: there's empty space below the slide.但后来我遇到了移动可视化问题：幻灯片下方有空白区域。

Last thig: images are all 3360 x 2240 pixels最后一点：图像均为 3360 x 2240 像素

I basically need to include the carousel in a way in which it will be visualized properly on laptop and mobile.我基本上需要以一种可以在笔记本电脑和移动设备上正确显示的方式包含轮播。

Answer 1

Basically the issue consists in the fact that the carousel is initialized before the images ar loaded and so the carousel height is not calculated properly.基本上问题在于轮播在加载图像之前被初始化，因此轮播高度没有正确计算。 Initializing the carousel when all the page is loaded and not only the DOM will solve the issue:加载所有页面时初始化轮播，不仅 DOM 会解决问题：

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-01-24 10:05:56

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-01-24 10:05:56

解决方案1
0 已采纳 2021-01-24 10:05:56