Welcome to Qi-U Community for programmer and developer-Open, Learning and Share

Categories

0 votes
672 views
in Technique[技术] by (31.9m points)

javascript - Materialize css | js - visualization issue in the Carousel Slides

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

1 Answer

0 votes
by (31.9m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Qi-U Community for programmer and developer-Open, Learning and Share
...