gpt4 book ai didi

javascript - 物化 css slider 不工作

转载 作者:太空宇宙 更新时间:2023-11-03 19:50:00 24 4
gpt4 key购买 nike

大家好,我正在为我的网站使用 materialize css。当我插入 slider 代码时,它只显示灰色背景。这是我的代码:

<div class="slider">
<ul class="slides">
<li>
<img src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>

最佳答案

您的代码无法正常工作,因为您错过了 jQuery Initialization .在你的JS文件包括以下 script或添加以下 <script>在你的 html 中标记页面。

<script>
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
</script>

以下是单个 html 中的完整工作代码页面。

<!DOCTYPE html>
<html ng-app>

<head>
<title>Slider</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
<!--your code start-->
<div class="slider">
<ul class="slides">
<li>
<img src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
<!--your code end-->

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>

<!--Materializecss Slider-->
<script>
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
</script>
</body>

</html>

关于javascript - 物化 css slider 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34560005/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com