Carousel
Hoe pas ik de bootstrap carousel aan?
Veel Shoxl webshops hebben een slider / carousel op hun homepage. Een mooie brede banner waarin verschillende afbeeldingen langskomen. Natuurlijk wilt u af en toe de afbeeldingen in de carousel aanpassen. Dit kunt u doen in de content editor. Echter, omdat de carousel beweegt dankzij een stukje HTML code aan de “achterkant”, is het belangrijk dat deze HTML niet wordt veranderd.
Af en toe komt het voor dat deze HTML toch voor een stukje wordt aangetast, en soms zijn er veranderingen nodig in de HTML om iets aan de carousel te veranderen. Als één van de twee het geval is mag u dit uiteraard altijd melden bij ons support systeem (). Maar wellicht wilt u het liever zelf aanpassen! Daarom hier een uitgebreide uitleg hoe de carousel werkt, en hoe u hem zelf aan kunt passen in de HTML.
Carousel afbeeldingen veranderen zónder HTML
Wilt u enkel de afbeeldingen in de carousel veranderen, dan hoeft u hier in de meeste gevallen helemaal niet voor te coderen. U kunt een afbeelding veranderen door in de content editor op de afbeelding te klikken, en vervolgens op de knop “Insert image” te klikken. In de afbeeldingen database kunt u een nieuwe afbeelding uploaden en invoegen in de editor.
Belangrijk is dat de afbeeldingen in de slider allemaal dezelfde verhouding hebben. Dit omdat de slider responsive is, en zich aanpast aan de formaat van het scherm. Afbeeldingen krijgen daarom geen vaste afmetingen, maar veranderen van grootte als het scherm groter of kleiner wordt.
Carousel veranderen mét HTML
Wanneer u een beetje kennis heeft van HTML is het ook prima mogelijk de carousel aan te passen met behulp van de code. Dit geeft u veel meer mogelijkheden met betrekking tot aanpassingen. Om de carousel aan te kunnen passen is het belangrijk dat u snapt wat er in de HTML staat. Hieronder daarom een voorbeeld van hoe de code van een bootstrap carousel er meestal uitziet, met alle tags en attributen uitgelegd. Let op, dit is een basic voorbeeld van de HTML van een carousel. Uw carousel kan elementen hieruit wel of juist niet hebben, waardoor de HTML enigszins kan verschillen. Komt u er daardoor niet uit? Schroom niet en stuur gerust een mailtje naar ons support systeem, we helpen u graag.
Begin carousel
class=”carousel slide hidden-xs”: met carousel wordt aangegeven dat deze div een carousel bevat. Slide geeft aan dat de afbeelding geanimeert naar de volgende afbeelding moet sliden. Wanneer u dit niet wilt kunt u “slide” hier weghalen. Hidden-xs betekent dat de carousel niet getoond wordt op kleine (smartphone) schermen. Wanneer u dat wél wilt kunt u “hidden-xs” hier weghalen. Houdt er echter rekening mee dat het design op smartphone formaat is ontworpen zonder carousel, en het toevoegen kan het design wellicht iets in de war brengen.
data-ride: hiermee wordt aan Bootstrap aangegeven dat de animatie van de carousel moet worden ingezet bij het laden van de pagina.
data-interval: de tijd dat een slide getoond wordt in milliseconden. 5000 milliseconden is dus 5 seconden. Wanneer de slides langer of korter getoond moeten worden kunt u dit getal aanpassen.
id: het id van de carousel is nodig voor de indicators en controls.
Indicators
De indicators zijn de kleine bolletjes onderaan de carousel. Aan de hand van de indicators kunt u zien hoeveel afbeeldingen de carousel heeft en welke afbeelding actief is.
ol: geeft aan dat er een lijst komt
class=”carousel-indicators”: deze class geeft aan dat het hier indicators betreft, behorend bij de carousel. Deze class kan in de CSS eventueel opgemaakt worden.
li: geeft aan dat dit een item uit de lijst (ol) is
data-target=”#homepage-carousel”: correspondeert met het id homepage-carousel. Dit is de link target van de slide.
data-slide-to=”0”: dit geeft aan welke slide getoond moet worden wanneer er op een indicator wordt geklikt. In dit geval is dat naar de eerste afbeelding, die wordt aangegeven met waarde 0.
Slide inhoud
carousel-inner: dit markeert het begin van de inhoud van de carousel. Hierbinnen worden de afbeeldingen toegevoegd.
class="item active": met class=”item” wordt aangegeven dat binnen de <div> </div>’s een afbeelding uit de carousel staat. Active staat alleen bij de eerste afbeelding, en geeft net als bij de eerste indicator aan dat deze afbeelding actief moet zijn bij het laden van de carousel.
img: hier staat de afbeelding zelf. Bij “src” vult u het pad in waar de afbeelding is opgeslagen. U kunt een afbeelding toevoegen aan Shoxl via de import image knop. Wanneer u de afbeelding heeft geüploadt en u klikt hem aan, dan ziet u het afbeeldingspad onderaan het pop-up scherm.
class=”container”: met deze div wordt aangegeven dat alles binnen de container bij elkaar hoort. Het is een container binnen de afbeelding.
class=”carousel-caption”: met deze class wordt aangegeven dat de slide een tekst of “caption” bevat. De hele caption zal binnen deze <div </div>’s vallen.
<a class="btn btn-lg btn-primary" href="de link">: dit is een call-to-action button, die op de afbeelding in de carousel staat. De knop in het voorbeeld heeft de tekst “Meer informatie”. De tekst van de knop wordt tussen <a> en </a> aangegeven. Meer informatie over bootstrap buttons vindt u hier.
Controls
Dit zijn de pijltjes knoppen aan de zijkanten van de carousel. Met deze pijltjes kan handmatig in de slides van de carousel gebladerd worden.
class="left carousel-control": met deze class wordt aangegeven dat dit een carousel-control is, en left geeft daarbij ook nog aan dat het om de linker control gaat.
data-slide: met dit attribuut wordt bepaald of de control naar de volgende slide of naar de vorige slide moet verwijzen. </p">
href="#homepage-carousel": dit is het link adres waar de control buttons naartoe verwijzen. Deze link komt overeen met het id van de carousel.
<span class="icon-prev"></span>: met deze tag worden de icoontjes van de controls bepaald, in dit geval een “terug pijltje”. Meer over deze icoontjes, of glyphicons, kunt u hier lezen.
Toevoegen of verwijderen van een slide
Nu u begrijpt wat er in de HTML van de carousel staat, kunt u slides gaan toevoegen of verwijderen.
Om een slide toe te voegen moeten twee items worden toegevoegd aan de HTML.
Allereerst moet er een control worden toegevoegd, mits de carousel controls bevat natuurlijk! Om een control toe te voegen aan de carousel hoeft u enkel een list item toe te voegen en daarin naar de juiste slide te refereren. In het geval van ons voorbeeld zou er dus de volgende code moeten worden toegevoegd:
<li data-target="#homepage-carousel" data-slide-to="3"></li>
Vervolgens moet de slide zelf toegevoegd worden. U doet dit het gemakkelijkst door de code van laatste slide in de HTML te kopieren, en aan te passen voor de nieuwe slide.
Kopieer dus bijvoorbeeld:
U plakt deze HTML direct onder de laatste slide. Vervolgens kunt u de afbeelding gemakkelijk aanpassen in de content editor. U hoeft alleen op de laatste afbeelding te klikken, en met “import image” en nieuwe afbeelding te selecteren. Verder moeten de teksten waarschijnlijk aangepast worden, en de link op de button. Ook de teksten kunt u in de content editor aanpassen, maar let er wel op dat de code aan de achterkant juist blijft.
Belangrijk
Kopieer de originele code altijd voordat u er iets aan verandert, en sla deze op. Zo kunt u als er iets misgaat altijd snel de originele code terugzetten.
U kunt de aangepaste code ook eerst testen op een pagina die niet in de structuur van de website voorkomt, voordat u deze live zet op uw homepage. Zo weet u zeker dat alle veranderingen goed zijn als u de homepage publiceert.
Werken in de HTML editor van Shoxl kan lastig zijn, omdat de code enigszins onoverzichtelijk oogt door het gebrek aan kleuren. Een HTML editor kan hier uitkomst in bieden. U kunt de HTML bijvoorbeeld kopiëren naar Bootstrap editor Bootply.
Last updated