html上的轮播图像未加载答案

【问题标题】：Carousel images on html not loadinghtml上的轮播图像未加载
【发布时间】：2020-11-21 11:17:49
【问题描述】：

我正在尝试获得一个轮播，就像物化网站中提到的那样

https://materializecss.com/carousel.html

但是，下面生成的网站是空的。我试图打乱链接的位置（添加删除 jquery cdn）但不确定我哪里出错了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Top AskReDDit </title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
   
  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://i.pinimg.com/736x/50/df/34/50df34b9e93f30269853b96b09c37e3b.jpg"> </a>
    <a class="carousel-item" href="#two!"><img src="https://stayhipp.com/wp-content/uploads/2019/10/reddit.png"></a>
    <a class="carousel-item" href="#three!"><img src="https://images.discordapp.net/avatars/635458547127156767/29c03a44a8c4afdb088f0877c66831c8.png?size=512"></a>
    <a class="carousel-item" href="#four!"><img src="https://i.pinimg.com/736x/50/df/34/50df34b9e93f30269853b96b09c37e3b.jpg"></a>
  </div>

    <script type ="text/javascript">
        $(document).ready(function(){
            $('.carousel').carousel();
        });

    </script>

dbsjdbsdsb

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!--JavaScript at end of body for optimized loading-->

</body> 
</html>

【问题讨论】：

这不是真正的问题，但您应该编辑您的帖子并稍微清理一下代码，以避免混淆。例如。删除 HEAD 中未关闭的 DIV，删除 HTML 之前的 SCRIPT，删除重复的 SCRIPT。真正的问题可能是“Content-Security-Policy”。
感谢您的提示，kca！我尝试在 google 上搜索内容安全策略，但找不到匹配项，您知道如何解决此问题吗？

标签： javascript html jquery css materialize

【解决方案1】：

你必须在物化 js 之前调用 jquery。其次，只有在调用库之后才编写该js代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://i.pinimg.com/736x/50/df/34/50df34b9e93f30269853b96b09c37e3b.jpg"> </a>
<a class="carousel-item" href="#two!"><img src="https://stayhipp.com/wp-content/uploads/2019/10/reddit.png"></a>
<a class="carousel-item" href="#three!"><img src="https://images.discordapp.net/avatars/635458547127156767/29c03a44a8c4afdb088f0877c66831c8.png?size=512"></a>
<a class="carousel-item" href="#four!"><img src="https://i.pinimg.com/736x/50/df/34/50df34b9e93f30269853b96b09c37e3b.jpg"></a>
</div>

<!-- call jquery First -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!--Then Initialize the carouseL-->
<script type ="text/javascript">
$(document).ready(function(){
$('.carousel').carousel();
});
</script>

</body> 
</html>

这是工作的Codepen link。

【讨论】：