Foto slide in PHP

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Web Ontwikkelaar PHP, Nijmegen

Contactpersoon Roel Kavelaar rkavelaarATsearch-consult.nl 0243528815 0644949337 Organisatie Jong, gezond en sterk groeiende bedrijf dat webbased multimedia oplossingen bouwt in de omgeving Nijmegen. Het bedrijf bouwt voor klanten o.a. geavanceerde websites, webwinkels, webapplicaties en specifieke webbased software. Het bedrijf ontwikkelt en onderhoudt ook verschillende bekende Nederlandse websites. Op dit moment hebben zij een groeiende en brede klantenkring opgebouwd. Met betrekking tot programmeer-, onderhoud-, ontwerp-werkzaamheden wordt een PHP ontwikkelaar gezocht met kennis van contentmanagementsysteemen en frameworks. Locatie Nijmegen Verantwoordelijkheden (Her)Ontwerpen en (her)ontwikkelen in PHP ten behoeve van websites voor klanten, project klussen, onderhoud en specifieke klantwensen (Her)Ontwerpen en (her)ontwikkelen in PHP, PHP

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/05/2019 09:31:07
Honeypot
 
- 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.