i wrote a javascript library :o

why?

i was looking for a small library to display image collections on my website. many claimed to be "lightweight" and "simple" but often weighed tens of kibibytes and had many functions.
why can't anything be simple??? this really pissed me off! and so it's time to code, yay!
i always wanted to toy with custom html elements, and so deck.js does not require using any additional javascripts. everything is realized within html tags and css styles. awesomesauce, methinks.

how?

no user js is cool, but how does that even work? as i mentioned like 5 seconds ago, custom html tags!
decks are controlled by root <deck> objects, with <deck-surface>, <deck-prev>, <deck-shieldbox>, <deck-shield> and <deck-next> elements inside. the script picks them up with query selectors and creates as many Decks as the amount of <deck>s. the names seem pretty self-explanatory to me, but i like picking weird words and so i'll have to explain the choices anyway.
prev and next are control buttons. not required to add, but useful for the user. shields are the little boxes which signalize which image is currently being viewed, also allowing the user to swap with another image. shields should be kept inside the shieldbox. the surface is where the current image is displayed. pretty simple stuff.

the good and the bad

upsides:

• simple to use
• script contains only 64 loc
• minified version weighs 871

λ du -h --apparent-size deck.js.min
871	deck.js.min

downsides:

• a stylesheet is required. nothing is stopping you from stealing it from the example and modifying it
• not for every use case. one addition i can think of is displaying previews of the images as shields

usage and customization

see README.md on the github page

example

	
		
			
			
			
			
			
			
			
			
			
			
			
	</deck-surface>
	<div>
		<deck-prev>&lt;</deck-prev>
		<deck-shieldbox></deck-shieldbox>
		<deck-next>&gt;</deck-next>
	</div>
</deck>