Fotoslide in HTML/CSS

zaterdag 2 maart 2019 20:59

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

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:

<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:

/* 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;
}

[/quote]

zaterdag 2 maart 2019 21:06

Acties:

0 Henk 'm!

InFamous

excommunicado

Waarom wil je dit perse in een script?

Dit is met puur CSS (keyframes) al te realiseren, je hebt dan alleen geen controle op de slider zoals bijvoorbeeld knoppen om naar de volgende slide te gaan of te pauzeren.

Google eens op pure css slider en kijk eens naar keyframes, hier kom je al een heel eind mee.

Formerly known as Ragdoll

zaterdag 2 maart 2019 21:08

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik wil gewoon een random foto maar wel met de tekst over de foto zoals in het script mee gegeven. Ik heb echt geen idee hoe ik dit kan doen. Dus met keyframes zou ook mogen.

zaterdag 2 maart 2019 21:09

Acties:

0 Henk 'm!

InFamous

excommunicado

Die tekst vormt geen probleem, met keyframes moet het lukken. Google gewoon even naar bestaande sliders en gebruik deze kennis om je eigen slider te maken.

Formerly known as Ragdoll

dinsdag 5 maart 2019 13:18

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Gezien je HTML, heb ik het idee dat je al Bootstrap gebruikt. Daar zit deze carousel functionaliteit standaard in.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

Onderwerpen

Vraag

Alle reacties