deck.js

ui-component animation layout

deck.js는 현대적인 HTML 프레젠테이션을 구현할 수 있게 해주는 경량 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 기반 슬라이드쇼를 쉽게 만들 수 있으며, CSS3를 이용해 스타일과 애니메이션을 적용할 수 있습니다.

Latest Ver 1.1.0

Homepage

Github

5,423

당신의 프레젠테이션이 예술이 되다.

deck.js로 간편하고 매력적인 슬라이드를 만들어 보세요.

HTML 기반의 프레젠테이션을 빠르고 쉽게 만들 수 있는 라이브러리

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

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

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 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'); });