Ik ben met een website bezig die een foto laat zien. Nu wil ik dat die bijv 3 foto 's laat zien in vorm van een foto slide. Dus bijv om de 5 sec een andere foto . Hoe krijg ik dit in mijn script gemaakt?
Pagina.php
<head>
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="styletest.css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Header -->
<header id="header">
<div class="intro">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 intro-text">
<h1>Test</h1>
<p>hier de tekst</p>
<a href="#about" class="btn btn-custom btn-lg page-scroll">Lees meer</a> </div>
</div>
</div>
</div>
</div>
</header>
</body>
Styletest.css
/* Header Section */
.intro {
display: table;
width: 100%;
padding: 0;
background: url(img/intro-bg.jpg) center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .overlay {
background: rgba(0,0,0,0.3);
}
.intro h1 {
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: 62px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
text-shadow: 0 0 15px rgba(0,0,0,0.5)
}
.intro p {
color: #fff;
font-size: 17px;
line-height: 28px;
padding: 15px;
max-width: 600px;
margin: 0 auto;
margin-bottom: 40px;
background: rgba(0,0,0,.45);
}
header .intro-text {
padding-top: 350px;
padding-bottom: 150px;
text-align: center;
}
