Foto slide in PHP
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
<!-- 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
Code (php)
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
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
/* 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;
}
.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;
}
Gewijzigd op 02/03/2019 17:33:52 door Remco Anoniem
Als je een slider wilt, kan je ook de standaard 'carousel' van je Bootstrap Framework gebruiken.
Zie ook: https://getbootstrap.com/docs/4.0/components/carousel/
PS: Dit staat los van PHP omdat het om opmaak gaat.
https://amazingslider.com/
https://amazingcarousel.com/
Toevoeging op 02/03/2019 18:18:14:
Deze komt aardig in de buurt
https://amazingslider.com/examples/jquery-image-rotator/
Toevoeging op 02/03/2019 18:44:08:
Een voorbeeld zojuist met AmazingSlider gemaakt :
http://adoptive.2kool4u.net/amazingslider/
Toevoeging op 02/03/2019 18:55:14:
Ziet er goed uit! Wil eigenlijk alleen mijn tekst erop laten en dan zal ik denk ik de afbeeldingen als background moeten hebben ipv image
Adoptive Solution op 02/03/2019 18:15:38:
Aangenomen dat er op het internet niks te vinden is, kwam ik toch dit tegen :
https://amazingslider.com/
https://amazingcarousel.com/
Toevoeging op 02/03/2019 18:18:14:
Deze komt aardig in de buurt
https://amazingslider.com/examples/jquery-image-rotator/
Toevoeging op 02/03/2019 18:44:08:
Een voorbeeld zojuist met AmazingSlider gemaakt :
http://adoptive.2kool4u.net/amazingslider/
https://amazingslider.com/
https://amazingcarousel.com/
Toevoeging op 02/03/2019 18:18:14:
Deze komt aardig in de buurt
https://amazingslider.com/examples/jquery-image-rotator/
Toevoeging op 02/03/2019 18:44:08:
Een voorbeeld zojuist met AmazingSlider gemaakt :
http://adoptive.2kool4u.net/amazingslider/
Kijk dan eens naar de captions. Ik neem aan dat je dat bedoelt? En anders kan je dat nog wel aan afwijkende stijl geven.