deck.js

ui-component animation layout

deck.js is a lightweight JavaScript library that facilitates the creation of modern HTML presentations. It allows users to easily build web-based slideshows and apply styles and animations using CSS3.

Latest Ver 1.1.0

Homepage

Github

5,423

Your presentation becomes art.

Create simple and attractive slides with deck.js.

A library for quickly and easily creating HTML-based presentations

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/core/deck.core.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/core/deck.core.min.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/goto/deck.goto.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/goto/deck.goto.min.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/menu/deck.menu.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/menu/deck.menu.min.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/navigation/deck.navigation.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/navigation/deck.navigation.min.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/scale/deck.scale.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/scale/deck.scale.min.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/status/deck.status.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/status/deck.status.min.js

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/core/deck.core.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/core/deck.core.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/core/print.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/core/print.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/goto/deck.goto.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/goto/deck.goto.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/menu/deck.menu.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/menu/deck.menu.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/navigation/deck.navigation.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/navigation/deck.navigation.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/scale/deck.scale.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/scale/deck.scale.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/status/deck.status.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/extensions/status/deck.status.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/style/neon.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/style/neon.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/style/swiss.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/style/swiss.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/style/web-2.0.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/style/web-2.0.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/transition/fade.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/transition/fade.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/transition/horizontal-slide.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/transition/horizontal-slide.min.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/transition/vertical-slide.css

https://cdnjs.cloudflare.com/ajax/libs/deck.js/1.1.0/themes/transition/vertical-slide.min.css

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<section class="slide" id="slide1"><h1>Welcome to deck.js!</h1><p>Create modern HTML presentations.</p></section><section class="slide" id="slide2"><h2>Slide 2</h2><p>More content here.</p></section><script>$(function() { $.deck('.slide'); });</script>

🎨 External CSS
<link href="path/to/deck.js/core/deck.core.css" rel="stylesheet">

🧩 External JS
<script src="path/to/deck.js/modernizr.custom.js"></script>
<script src="path/to/deck.js/jquery.min.js"></script>
<script src="path/to/deck.js/core/deck.core.js"></script>

⚙️ JavaScript
$(function() { $.deck('.slide'); });