Foto slide in PHP

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior PHP Developer Onderwijssoftware SaaS oploss

Senior PHP Developer Onderwijssoftware SaaS oplossing Wat ga je doen als Senior PHP developer? Als Senior PHP Developer uit de omgeving Amsterdam, ga jij werken aan onderwijs-software pakketten voor basis- en het voorgezet onderwijs, en voor volwasseneducatie. Het pakket voor basisonderwijs is een overzichtelijke communicatie tool (Laravel) voor leerkrachten. Met de tool kunnen zij ouders en verzorgers meer betrekken bij de vooruitgang van het kind. Denk hierbij aan nieuwsbrieven, oudergesprekken inplannen, persoonlijke berichten en absentie registratie. De overige pakketten (Symfony) worden aangeboden als een SAAS-online leerplatform. Het geeft leerkrachten de mogelijkheden om extra lesmaterialen van uitgevers om op maat onderwijs

Bekijk vacature »

Remco Anoniem

Remco Anoniem

02/03/2019 17:21:36
Quote Anchor link
Goedemiddag,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Styletest.css

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
/* 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;
}
Gewijzigd op 02/03/2019 17:33:52 door Remco Anoniem
 
PHP hulp

PHP hulp

19/03/2019 03:55:41
 
- Ariën -
Beheerder

- Ariën -

02/03/2019 17:28:17
Quote Anchor link
Zou je jouw script tussen code-tags willen plaatsen? Dan is het beter leesbaar. Zie ook de Veelgestelde Vragen.

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.
 
Adoptive Solution

Adoptive Solution

02/03/2019 18:15:38
Quote Anchor link
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/
 
Remco Anoniem

Remco Anoniem

02/03/2019 18:45:25
Quote Anchor link
Ik heb er idd zelf ook al een paar gevonden, maar ik kan hem nergens vinden waarbij ik een tekst over de foto kan zetten zoals ik nu heb. Maar lig bedankt voor alle antwoorden. Moet gewoon nog even puzzelen :)

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/
 
- Ariën -
Beheerder

- Ariën -

02/03/2019 19:37:53
Quote Anchor link
Wat jij wilt kan je gewoon met de carousel van Bootstrap?
Kijk dan eens naar de captions. Ik neem aan dat je dat bedoelt? En anders kan je dat nog wel aan afwijkende stijl geven.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.