Overslaan en naar de inhoud gaan

Should I use a carousel?

Should I use a carousel?

To use a carousel or not? That's the question. Ze worden gehaat door developers en geliefd door marketing. Mag je ze eigenlijk nog wel gebruiken, en zo ja, wanneer dan?

Waarom?

Dit is eigenlijk een verkapte “even-kijken-of-ik-een-carrousel-op-mijn-Jekyll-site-kan-implementeren”-post. En dat werkt redelijk goed. De javascript en stylesheets nodig voor de carrousel worden alleen ingeladen wanneer deze vereist zijn. Scheelt weer laadtijd enzo.

Maar mag je eigenlijk nog wel een carrousel gebruiken. Is dat niet “not-done”. Nou het ligt er helemaal aan waarvoor je hem gebruikt.

Wat niet werkt

De carrousel inzetten om bijvoorbeeld producten of content te laten circuleren. Onderzoek wijst uit dat de meeste mensen maar de eerste paar slides bekijken en het daarna wel voor gezien houden. Voor conversie is het dus een killer. Als je content wilt uitlichten zorg dan dat je design toereikent is om alle content netjes weer te geven met dezelfde waarde. Is oudere content niet meer belangrijk, verberg dit dan of toon het kleiner, in een lijst bijvoorbeeld.

Wanneer dan wel?

Voor meerdere afbeeldingen in een galerij bijvoorbeeld. Een van de voordelen die dit opleverd is dat je niet veel ruimte kwijt bent op je site om toch een hele hoop afbeeldingen te kunnen tonen. Maar ook hier geldt voor; zijn alle afbeeldingen belangrijk voor die pagina overweeg dan een andere weergavemode. Dienen ze als ondersteuning of voor een aantal productweergaves in een winkel dan werkt het prima.

Hoe?

In mijn post.markdown bestand kan ik aangeven in welke map de carrousel bestanden staan en welke bestanden dan specifiek ingeladen moeten worden.

1
2
3
4
5
6
7
8
9
10
11
12
carouselfolder: "example"
carousel:
 - DSC_7835.jpg
 - DSC_7836.jpg
 - DSC_7837.jpg
 - DSC_7839.jpg
 - DSC_7840.jpg
 - DSC_7841.jpg
 - DSC_7842.jpg
 - DSC_7844.jpg
 - DSC_7845.jpg
 - DSC_7847.jpg

Voor nu zit het inladen van de libraries ook in deze zelfde post als configuratie. Weet nog niet of dat super handig is, maar dat moet even blijken. Mooier is dat deze libraries ook worden ingeladen wanneer de carousel.html geinclude wordt.

1
2
3
4
5
6
7
javascripts:
 - https://code.jquery.com/jquery-2.1.4.min.js
 - /assets/js/owl-carousel/owl.carousel.min.js
stylesheets:
 - /assets/js/owl-carousel/owl.carousel.css
 - /assets/js/owl-carousel/owl.theme.css
 - /assets/js/owl-carousel/owl.transitions.css

In de head.html staan de volgende regels code. Deze halen de javascript en stylesheet regels uit de post op en geven die een-voor-een weer.

1
2
3
4
5
6
7
8
9
10
11
{% if pagejavascripts %}
  {% for script in pagejavascripts %}
    <script src="{{ script }}" type="text/javascript"></script>
  {% endfor %}
{% endif %}

{% if pagestylesheets %}
  {% for style in pagestylesheets %}
    <link href='{{ style }}' rel='stylesheet' type='text/css'>
  {% endfor %}
{% endif %}

De code die de carrousel opmaakt kan dan geinclude worden in de post op elke gewenste plek en deze leest dan uit de post waar en welke bestanden opgehaald moeten worden. Kind kan de was doen. Includen kan dan op de volgende manier.

1
{% include carousel.html %}