Getting Started

The following minimal HTML structure is required:

<div class="any-class"> <div></div> <div></div> <div></div> <div></div> </div>

A more comprehensive example with all paging controls would look something like this:

<div class="glider-contain"> <div class="glider"> <div>your content here</div> <div>your content here</div> <div>your content here</div> <div>your content here</div> </div> <button aria-label="Previous" class="glider-prev">«</button> <button aria-label="Next" class="glider-next">»</button> <div role="tablist" class="dots"></div> </div>

Include Glider.js in your document before the </body> tag:

<script src="glider.js"></script>

Include the required CSS in your <head> tag

<link rel="stylesheet" type="text/css" href="glider.css">

Initialize Glider.js inline or via your script files

window.addEventListener('load', function(){ new Glider(document.querySelector('.glider'), { setting-name: setting-value }) })

That's it! You're done!