Bouw functie-rijke jQuery-carrousels met Slick

Niet veel carrouselbibliotheken kan concurreren met glad. Het is de meest jQuery plug-in voor JACUery dynamische carrousels bouwen op internet.

Het is helemaal gratis en bovenop jQuery gebouwd. De code is super eenvoudig in te stellen, hoewel dat wel het geval is vereisen een paar afhankelijkheden. Maar met zoveel functionaliteit is het de moeite waard om extra bibliotheken toe te voegen om dit te laten werken.

Naar Slick installeren, je kunt de GitHub-repo bezoeken en een kopie downloaden. Het komt met twee CSS-bestanden: een voor de basis setup en een andere voor de standaard Slick-thema. U kunt deze bestanden eenvoudig combineren in uw primaire CSS-stylesheet als u ruimte wilt besparen.

Dan heb je dat nodig twee jQuery-afhankelijkheden: de primaire jQuery-bibliotheek samen met jQuery Migrate. Slick vereist een minimum van jQuery 1.7+ wat geen probleem zou mogen zijn voor een moderne ontwikkelomgeving.

Vanaf hier voeg je gewoon de Slick.js bestand en laat het gaan. Diavoorstellingen kunnen met zeer weinig code worden gemaakt en dit is een direct monster van de Slick-website:

 
 
jouw inhoud
 
jouw inhoud
 
jouw inhoud
 
  

Met een simpele

container, dat kan voeg dia's dynamisch toe, inclusief afbeeldingen, HTML-inhoud en ingesloten media zoals video's. Slick ondersteunt het allemaal met een volledig responsief ontwerp dat houdt de beeldverhoudingen intact.

Slick wordt geleverd met tientallen geweldige functies, waaronder veeg functionaliteit op mobiel en punt navigatie. Je kunt ook instellen automatisch afspelen, aangepaste animatie, aangepaste callbacks, en zoveel meer.

Deze bibliotheek is een compleet beest voor roterende carrousels maken. En je kunt het allemaal doen met een paar eenvoudige regels van jQuery wat dit nog ongelooflijker maakt.

Naar bekijk alle demo's en begin, Bekijk de Slick-startpagina. Je kunt ook vinden alle broncode en volledige documentatie voor instellingen / opties in de repository van GitHub.