- Slider를 구성합니다.
- ✨ Source: https://github.com/sj-js/slideman
- ✨ Document: https://sj-js.github.io/sj-js/slideman
-
Load
- Browser
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/slideman/dist/css/slideman.min.css"> <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@sj-js/slideman/dist/js/slideman.min.js"></script> <script> var slideman = new SlideMan(); </script>
- ES6+
npm install @sj-js/slideman
require('@sj-js/slideman/dist/css/slideman.css'); const SlideMan = require('@sj-js/slideman'); const slideman = new SlideMan();
- Browser
-
Set
data-type,data-viewer,data-slideto element- Refer below
-
Run
detect()then, When Page is Loaded, detect and apply elements with adata-...attributeslideman.detect();
-
Simple Example
<script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@sj-js/slideman/dist/js/slideman.min.js"></script> <script> var slideman = new SlideMan(); </script>
<!DOCTYPE html> <HTML> <head> <meta charset="utf-8" /> <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/slideman/dist/css/slideman.min.css"> <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@sj-js/slideman/dist/js/slideman.min.js"></script> <script> var slideman = new SlideMan(); </script> <script> slideman.detect(); </script> <style> div[data-type=slideview] { display:inline-block; width:350px; min-height:100px; border:1px solid black; float:left;} </style> </head> <body> <!-- Index Style SlideView --> <div data-type="slideview" data-viewer="jmeetsz"> <div data-type="index"></div> <div data-type="storage"> <div data-slide> <div data-type="title">안녕하세요</div> <div> 안녕하니까 123 </div> </div> <div data-slide> <div data-type="title">수고하세요</div> <div> 안녕하니까 456 </div> </div> <div data-slide> <div data-type="title">어서오세요</div> <div> 안녕하니까 789 </div> </div> </div> </div> <!-- Tap Style SlideView --> <div data-type="slideview" data-viewer="jmeetsz-2"> <div data-type="tap"></div> <div data-type="storage"> <div data-slide> <div data-type="title">안녕하세요</div> <div> 안녕하니까 123 </div> </div> <div data-slide> <div data-type="title">수고하세요</div> <div> 안녕하니까 456 </div> </div> <div data-slide> <div data-type="title">어서오세요</div> <div> 안녕하니까 789 </div> </div> </div> </div> </body> </HTML>