FlexSlider: verschil tussen versies
Geen bewerkingssamenvatting |
Geen bewerkingssamenvatting |
||
| (12 tussenliggende versies door dezelfde gebruiker niet weergegeven) | |||
| Regel 1: | Regel 1: | ||
FlexSlider is een geweldige, volledig responsieve jQuery-slider-toolkit. | <languages /> | ||
<translate> | |||
<!--T:1--> | |||
FlexSlider is een geweldige, volledig responsieve jQuery-slider-toolkit. Het is mee geïnstalleerd met de template FR Classic, klaar voor gebruik. | |||
<!--T:2--> | |||
'''Functies''' | '''Functies''' | ||
<!--T:3--> | |||
* Eenvoudige, semantische opmaak | * Eenvoudige, semantische opmaak | ||
* Wordt ondersteund door alle gangbare browsers | * Wordt ondersteund door alle gangbare browsers | ||
| Regel 12: | Regel 17: | ||
<!--T:4--> | |||
Bezoek de [http://flexslider.woothemes.com FlexSlider pagina] van Woo Themes voor voorbeelden. | Bezoek de [http://flexslider.woothemes.com FlexSlider pagina] van Woo Themes voor voorbeelden. | ||
<!--T:5--> | |||
Per voorbeeld kan je de html broncode kopiëren en plakken in een sectie op jouw website. | |||
<!--T:6--> | |||
== Toepassing == | |||
[[File:Knop Broncode.png|alt=knop Broncode|left]] | [[File:Knop Broncode.png|alt=knop Broncode|left]] | ||
De Flexslider plaats je in een sectie van een pagina. Gebruik de WYSIWYG editor, optie Broncode | De Flexslider plaats je in een sectie van een pagina. Gebruik de WYSIWYG editor, optie Broncode | ||
Plaats de volgende broncode: | <!--T:7--> | ||
[[ | Plaats de volgende broncode:<syntaxhighlight lang="html"> | ||
<!-- Place somewhere in the <body> of your page --> | |||
<div class="flexslider"> | |||
<ul class="slides"> | |||
<li> | |||
<img src="slide1.jpg" /> | |||
</li> | |||
<li> | |||
<img src="slide2.jpg" /> | |||
</li> | |||
<li> | |||
<img src="slide3.jpg" /> | |||
</li> | |||
<li> | |||
<img src="slide4.jpg" /> | |||
</li> | |||
</ul> | |||
</div> | |||
</syntaxhighlight> | |||
<!--T:8--> | |||
== Geavanceerde optie's == | |||
Op de Github pagina van de ontwikkelaar, Woocommerce, staan alle ingebouwde functionaliteiten beschreven. [https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties Link naar pagina] | |||
<!--T:9--> | |||
Andere pagina's met voorbeelden en handleidingen: | |||
<!--T:10--> | |||
[https://www.myjqueryplugins.com/jquery-plugin/flexslider/ MyjQuery Plugins] | |||
<!--T:11--> | |||
[https://manuals.muthu.co/posts/javascript-libraries-and-functions/flexslider.html Muthu Manuals] | |||
<!--T:12--> | |||
[https://www.jqueryscript.net/slider/Awesome-Fully-Responsive-jQuery-Slider-FlexSlider.html jQuery Script.net] | |||
</translate> | |||
Huidige versie van 15 jul 2026 19:22
FlexSlider is een geweldige, volledig responsieve jQuery-slider-toolkit. Het is mee geïnstalleerd met de template FR Classic, klaar voor gebruik.
Functies
- Eenvoudige, semantische opmaak
- Wordt ondersteund door alle gangbare browsers
- Horizontale en verticale schuif- en fade-animaties
- Ondersteuning voor meerdere schuifbalken, Callback API en meer
- Ondersteuning voor hardwareversnelde veegbewegingen
- Aangepaste navigatieopties
- Compatibel met de nieuwste versie van jQuery
Bezoek de FlexSlider pagina van Woo Themes voor voorbeelden.
Per voorbeeld kan je de html broncode kopiëren en plakken in een sectie op jouw website.
Toepassing
De Flexslider plaats je in een sectie van een pagina. Gebruik de WYSIWYG editor, optie Broncode
Plaats de volgende broncode:
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>
Geavanceerde optie's
Op de Github pagina van de ontwikkelaar, Woocommerce, staan alle ingebouwde functionaliteiten beschreven. Link naar pagina
Andere pagina's met voorbeelden en handleidingen: