In the home page of my website there's a Materialize carousel with 3 slides.
The page is a python flask template an the Materialize carousel is injected in the page, this is the base.html template
<!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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
