Wat hebben we nodig?
tot. Hoewel we voor het werken met .html-bestanden geen lokale server nodig hebben, raad ik aan er een te installeren om al onze bestanden in een map te ordenen en om comfortabeler te kunnen werken als we later PHP-code willen toevoegen, in dit geval ik Xampp Server zal gebruiken, kunt u downloaden van https: //www.apachefr… g / es / index.html
B. Aangezien we een dia gaan maken, hebben we de afbeeldingen nodig die we erop gaan plaatsen, ze moeten allemaal exact dezelfde grootte in pixels hebben, ik zal er enkele gebruiken met een grootte van 1200 X 600.
C. Een code-editor naar keuze, in dit geval zal ik er een gebruiken met de naam "haakjes".
Laten we beginnen …
1. Omdat we Xampp hebben geïnstalleerd, gaan we naar de directory "C: / xampp / htdocs" en we maken een nieuwe map, in dit geval noem ik het "SliderShow_main", binnenin zal ik een andere map maken en deze noemen "Afbeeldingen", daar zal ik de afbeeldingen plaatsen die ik in de diavoorstelling zal gebruiken.
Klik op de afbeelding om hem te vergroten
2. Nu zullen we onze code-editor openen, we gaan naar het menu "Bestand> Nieuw".
Klik op de afbeelding om hem te vergroten
En in dit nieuwe bestand zullen we de code schrijven Basis-HTML.
Klik op de afbeelding om hem te vergroten
We slaan dit bestand op met de extensie (.html) in de map die we in stap 1 hebben gemaakt "SliderShow_main".3. Later zullen we een titel voor het bestand toevoegen en de verwijzingen naar de Bootstrap- en jQuery-bestanden die we nodig hebben om onze slider correct te laten werken. We hebben twee opties om deze bestanden te downloaden en ze in mappen op onze site op de lokale server te plaatsen of we kunnen ze toevoegen vanaf het web, wat ons ruimte op onze server zou besparen. Ik zal de tweede optie kiezen, je zult zien hoe je het moet doen in de volgende afbeelding …
Klik op de afbeelding om hem te vergroten
4. Later zullen we binnen de twee toevoegenwaaraan we respectievelijk als volgt de klassen "container" en "col-md-12" zullen toewijzen …
VERGROTEN
Klik op de afbeelding om hem te vergroten
Deze tweedie we toevoegen, zal dienen zodat onze schuifregelaar boven alle beschikbare ruimte op ons scherm wordt weergegeven.5. Nu we onze code hebben voorbereid, gaan we beginnen met het toevoegen van de elementen waaruit de dia zal bestaan, laten we eens kijken …
Klik op de afbeelding om hem te vergroten
Zoals je kunt zien hebben we een nieuwedie we "carousel_1" noemen en we wijzen 2 klassen bootstrap toe genaamd "carousel" en "slide", merk op dat beide worden gescheiden door een spatie, bovendien is het nodig om de dia te laten werken om het attribuut toe te voegen (data-ride = "carrousel").6. Binnen de vorige laag zullen we een geordende lijst toevoegen met de klasse "carrousel-indicatoren" die ons zal helpen om het aantal indicatoren toe te voegen dat overeenkomt met onze afbeeldingen, in dit geval zullen we drie afbeeldingen gebruiken, zodat we drie indicatoren hebben vanaf de "0".
Klik op de afbeelding om hem te vergroten
Merk op dat de7. Nu zullen we de items toevoegen met de afbeeldingen die worden getoond, laten we de code bekijken waarin u meer details zult vinden …
VERGROTEN
Klik op de afbeelding om hem te vergroten
Nadat we alles hebben geschreven dat bij het eerste item hoort, kopiëren en plakken we eenvoudigweg de hoeveelheid item die we nodig hebben, rekening houdend met het feit dat we het pad van de afbeelding moeten wijzigen en dat de andere items de "actieve" klasse niet mogen bevatten .
VERGROTEN
Klik op de afbeelding om hem te vergroten
Zoals je kunt zien, hebben we de 3 items met onze 3 afbeeldingen al toegevoegd en onze code is functioneel, maar nu zullen we besturingselementen (Vorige & Volgende) toevoegen om heen en weer te gaan tussen onze afbeeldingen en we zullen ook enkele pictogrammen toevoegen. We laten onze definitieve code als volgt achter …
VERGROTEN
Klik op de afbeelding om hem te vergroten
Als we de stappen correct volgen, kunnen we in onze browser de volgende resultaten zien …
VERGROTEN
Klik op de afbeelding om hem te vergroten
Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
Heeft deze tutorial je geholpen?
Als nietHELP DEZE TUTORIAL TE VERBETEREN!
Denk je dat je deze tutorial kunt corrigeren of verbeteren? U kunt uw editie opsturen met de wijzigingen die u nuttig acht.0 gebruikers hebben deze tutorial bewerkt. Bewerk en word een erkende expert!
Deze zelfstudie bewerken
VERGELIJKBARE TUTORIALS
Eigenschappen en attributen van HTML5 FormsHTML5 en CSS3: relatie- en CSS3-kenmerkenHTML5 en CSS3 Eerste stappen: gemeenschappelijke elementen in webdesignReceptsjabloon met HTML5 en CSS3HTML5 en CSS3: eerste stappenMaak een Twitter-kaart voor gebruikers die HTML5 en CSS3 gebruikenHorizontale balk met zweefeffect in html5, css3 en bootstrapKrijg klantcoördinaten met Google Maps API in JavaScript (HMTL5, CSS3 en Bootstrap)
18 Reacties
Juan Carlos
25 aug. 2015 11:08
Niet om je een positief punt te geven. Geweldige tutorial, ga je meer Ronny doen ???
bedankt voor je bijles.
- Rapport
Nestor1
25 aug. 2015 11:34
Ik hield ook van de tutorial, bedankt Ronny, slechts één vraag: heb je een zipbestand om het voorbeeld van de code te nemen? Het zou geweldig zijn als je er zin in hebt. Bedankt!!
- Rapport
Alexander Teba
25 aug. 2015 16:26
Geweldig effect. Ik ben het aan het analyseren.
Ik sluit me aan bij wat de anderen zeggen, als je een bestand met de code had om te testen, zou het geweldig zijn.
Bedankt
- Rapport
Ronny Bonillo
25 aug. 2015 16:54
Goedemorgen vrienden, bedankt voor de steun, het is geweldig dat je het leuk vond, want dit is een van mijn eerste 3 tutorials op de site en ik had echt niet zo snel positieve antwoorden verwacht, met betrekking tot je vraag Juan Carlos, natuurlijk zal ik dat doen. hier een tijdje elke week nieuwe tutorials plaatsend Ik hoop dat je ze leuk vindt en dat je me steunt met je opmerkingen en evaluaties … Groeten uit Venezuela …
- Rapport
Ronny Bonillo
25 aug. 2015 16:58
Graag gedaan Nestor1, bedankt voor je reactie! Wat je vraag betreft, raad ik je aan snel terug te komen, want in de komende uren zal de inhoud van deze tutorial worden bijgewerkt door aan het einde een .zip toe te voegen, zodat je de code kunt downloaden.
- Rapport
Eneko
25 aug. 2015 17:06
Graag gedaan Nestor1, bedankt voor je reactie! Wat je vraag betreft, raad ik je aan snel terug te komen, want in de komende uren zal de inhoud van deze tutorial worden bijgewerkt door aan het einde een .zip toe te voegen, zodat je de code kunt downloaden.
Ik zal ook opletten, het effect is spectaculair en verbluffend. bij voorbaat bedankt.
- Rapport
Ronny Bonillo
25 aug. 2015 17:07
Graag gedaan Eneko…
- Rapport
Alexander Teba
25 aug. 2015 17:13
Goedemorgen vrienden, bedankt voor de steun, het is geweldig dat je het leuk vond, want dit is een van mijn eerste 3 tutorials op de site en ik had echt niet zo snel positieve antwoorden verwacht, met betrekking tot je vraag Juan Carlos, natuurlijk zal ik dat doen. hier een tijdje elke week nieuwe tutorials plaatsend Ik hoop dat je ze leuk vindt en dat je me steunt met je opmerkingen en evaluaties … Groeten uit Venezuela …
Hoe snel !!
Bedankt Ronny, je weet niet hoe goed het voor mij is dat je de code hebt gedeeld.
Heel erg bedankt ontwikkelaar!
ps: ik volg je.
- Rapport
Ronny Bonillo
25 aug. 2015 17:19
graag gedaan alejandro, bedankt voor je steun!
- Rapport
Nestor1
25 aug. 2015 17:25
Graag gedaan Nestor1, bedankt voor je reactie! Wat je vraag betreft, raad ik je aan snel terug te komen, want in de komende uren zal de inhoud van deze tutorial worden bijgewerkt door aan het einde een .zip toe te voegen, zodat je de code kunt downloaden.
Hartelijk dank voor het bijvoegen van het Ronny-bestand. En welkom bij Solvetic.
- Rapport
Carlos Sanzo
02 sep 2015 16:14
Ik ben het aan het testen, bedankt voor het toevoegen van Ronny.
- Rapport
Ronny Bonillo
02 sep 2015 21:43
graag gedaan Carlos
- Rapport
Fiore nella
08 sep 2015 16:25
Bedankt voor de bijlage!! heel cool.
- Rapport
Ronny Bonillo
08 sep 2015 16:37
Graag gedaan Fiore 
- Rapport
Renée Toapanta García
02 juni 2016 21:58
Goedemorgen, het thema is erg elegant, maar ik kan het niet downloaden, het vraagt me keer op keer om mezelf te identificeren en het laat me niet meer los. Als je me zou kunnen helpen, dank ik je een miljoen.
- Rapport
Julio Martinez
juli 262021-2022 20:03
Ik zie het .zip-bestand niet om de code te zien
- Rapport
aldo1982
juli 292021-2022 05:22
erg goed, maar ik zie de .zip niet om de codego te downloaden.
Slds
- Rapport
Manelly
Sep 132021-2022 12:58
Mooi zo…
Super uitleg en presentatie Ronny Hetzelfde als de laatste commentatoren… Waar is de link om de code te downloaden?
Bedankt en groeten,
Nelly.
- Rapport
- Maak accountMeld u GRATIS aan om uw Solvetic-account te hebbenRegistreer een account
- IdentificerenHeeft u al een account? Meld je hier aanIdentificeer mij in mijn account
