이미지 슬라이드 - LightSlider
1. HTML 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>LightSlider Test</title> <link rel="stylesheet" href="https://han3283.cafe24.com/js/lightslider/css/lightslider.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://han3283.cafe24.com/js/lightslider/js/lightslider.js"></script> </head> <body> <div class="slide-wrap"> <div class="slide-content"> <ul id="slider" class="slider"> <li class="item1"> <h3>사과</h3> </li> <li class="item2"> <h3>체리</h3> </li> <li class="item3"> <h3>딸기</h3> </li> <li class="item4"> <h3>포도</h3> </li> <li class="item5"> <h3>레몬</h3> </li> <li class="item6"> <h3>자몽</h3> </li> </ul> </div> </div> </body> </html> | cs |
2. CSS 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | ul{ list-style: none outside none; padding-left: 0; margin: 0; } .slide-content .slide-content{ margin-bottom: 60px; } .slider li{ text-align: center; color: #FFF; background-size:cover; background-position: center; } .slider h3 { margin: 0; padding: 100px 0; height:250px; } .slide-content{ width: 100%; height:300px; } .item1{background-image:url('http://han3283.cafe24.com/images/apple.jpg');} .item2{background-image:url('http://han3283.cafe24.com/images/cherry.jpg');} .item3{background-image:url('http://han3283.cafe24.com/images/strawberry.jpg');} .item4{background-image:url('http://han3283.cafe24.com/images/grape.jpg');} .item5{background-image:url('http://han3283.cafe24.com/images/lemon.jpg');} .item6{background-image:url('http://han3283.cafe24.com/images/grapefruit.jpg');} | cs |
3. Script 코드
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function() { $("#slider").lightSlider({ mode:'slide', // 이미지가 표시되는 형식 (fade / slide) loop:true, // 무한반복 할 것인지 auto:true, // 자동 슬라이드 keyPress:true, // 키보드 탐색 허용 pager:false, // 페이지 표시 speed:1500, // 슬라이드 되는 속도 pause:3000 // 이미지가 머무는 시간 }); }); | cs |
4. LightSlider 옵션 목록
| Name | Expected | Default | Description |
|---|---|---|---|
| item | number | 3 | number of slides to show at a time |
| autoWidth | boolean | false | Custom width for each slide |
| slideMove | number | 1 | Number of slides to be moved at a time |
| slideMargin | number | 10 | Spacing between each slide |
| addClass | string | '' | Add custom class for slider, can be used to set different style for different sliders |
| mode | string | 'slide' | Type of transition 'slide' and 'fade' |
| useCSS | boolean | true | If true LightSlider will use CSS transitions. if falls jquery animation will be used. |
| cssEasing | string | 'ease' | Type of easing to be used for css animations |
| easing | string | 'linear' | Type of easing to be used for jquery animations |
| speed | number | 400 | Transition duration (in ms). // ex = speed:400; |
| auto | boolean | false | If true, the Slider will automatically start to play. |
| pauseOnHover | boolean | false | Pause autoplay on hover. |
| loop | bolean | false | If false, will disable the ability to loop back to the beginning of the slide when on the last element. |
| slideEndAnimation | bolean | true | Enable slideEnd animation |
| pause | number | 2000 | The time (in ms) between each auto transition |
| keyPress | boolean | false | Enable keyboard navigation |
| controls | boolean | true | If false, prev/next buttons will not be displayed. |
| prevHtml | string | '' | custom html for prev control |
| nextHtml | string | '' | custom html for next control |
| rtl | boolean | false | Change direction to right-to-left |
| adaptiveHeight | boolean | false | Dynamically adjust slider height based on each slide's height |
| vertical | boolean | false | change slide's direction from horizontal to Vertical |
| verticalHeight | number | 500 | set height of slider if vertical mode is active and item more than 1 |
| vThumbWidth | number | 100 | width of gallery thumbnail while vertical mode active |
| thumbItem | number | 10 | number of gallery thumbnail to show at a time |
| pager | boolean | true | Enable pager option |
| gallery | boolean | true | Enable thumbnails gallery |
| galleryMargin | number | 5 | Spacing between gallery and slide |
| thumbMargin | number | 3 | Spacing between each thumbnails |
| currentPagerPosition | string | 'middle' | position of thumbnails . 'left', 'middle', 'right' |
| enableTouch | boolean | true | Enables touch support |
| enableDrag | boolean | true | Enables desktop mouse drag support |
| freeMove | boolean | true | Enable free move(no limit) while swipe or drag |
| responsive | object | null | Separate settings per breakpoint. |
5. Result
See the Pen LightSlider by HanSeungHwa (@hanseunghwa) on CodePen.
'Development > Code' 카테고리의 다른 글
| [Code] Record Control Application (0) | 2018.10.30 |
|---|---|
| [Code] Javascript Color Select (0) | 2018.10.30 |