-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmaterial2.html
88 lines (74 loc) · 3.34 KB
/
material2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="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"/>
</head>
<body>
<section class="black">
<div class="carousel carousel-slider" data-indicators="true">
<div class="carousel-fixed-item">
<div class="container">
<h1 class="white-text">Materialize Carousel</h1>
<a class="btn waves-effect white grey-text darken-text-2" target="_blank">button</a>
</div>
</div>
<div class="carousel-item red lighten-2 white-text" href="#one!">
<div class="container">
<h2>First Slide</h2>
<p class="white-text">Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
<div class="carousel-item amber darken-2 white-text" href="#two!">
<div class="container">
<h2>Second Slide</h2>
<p class="white-text">Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
<div class="carousel-item green white-text" href="#three!">
<div class="container">
<h2>Third Slide</h2>
<p class="white-text">Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
<div class="carousel-item blue white-text" href="#four!">
<div class="container">
<h2>Fourth Slide</h2>
<p class="white-text">Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</div>
</section>
<!-- Gitter Chat Link -->
<div class="fixed-action-btn"><a class="btn-floating btn-large red" ><i class="large material-icons">chat</i></a></div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js">
// CAROUSEL
$(document).ready(function(){
$('.carousel').carousel(
{
dist: 0,
padding: 0,
fullWidth: true,
indicators: true,
duration: 100,
}
);
});
autoplay()
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
</script>
</body>
</html>