준비물
royalslider plugin - 구글에서 검색하시거나, 돈주고 사시면 됩니다.
http://dimsemenov.com/plugins/royal-slider/documentation/
royalslider plugin API가 나와 있는 사이트입니다.
============================================================
1. royalslider plugin을 자신의 웹 프로젝트에 추가합니다.
아마 올바르게 들어가지 않을 수도 있는데 그럴 경우 잘못 압축이 해제된 결과이니 다시 다른걸 다운 받아주세요
2. 예시 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', autoPlay: { enabled: true }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ </style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault"> <div>slide1</div> <div>slide2</div> <div>slide3</div> </div>
</body> </html> |
가로로 슬라이드 되는 예시 코드입니다. 이제 이걸 세로로 바꾸면 됩니다.
2. 가로인 슬라이드 코드를 세로로 바꿔보기
어떻게 하는지 찾아보니
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', autoPlay: { enabled: true }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ </style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault"> <div>slide1</div> <div>slide2</div> <div>slide3</div> </div>
</body> </html> |
저렇게 옵션 값을 추가해서 바꾸면 된다고 한답니다.
3. 이제 화면 전체적으로 슬라이드를 할 수 있게 꽉채워 봅시다.
<div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" > |
음...아무래도 슬라이드 상으로는 가로 비율만 정의 할 수 있나봅니다. 세로는 비율이 안되고 px 값으로만 되는 듯 합니다.
4. 화살표가 있는게 거슬리네요 건드릴때만 나오도록 숨겨봅시다. 또 자동 전환 속도가 너무 빨라요 변경되는 시간에 8초 정도 걸리도록 해놔야겠네요
jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', arrowsNavAutoHide : true, transitionSpeed : 3000, autoPlay: { enabled: true }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); |
5. 자동 전환이 글을 읽는 도중에도 넘어가니 그걸 중지해야합니다. 마우스 커서가 올라가 있으면 자동으로 못 넘기게 합시다. 추가로 항목간 지연 시간을 5초 정도로 늘려줍시다.
jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', arrowsNavAutoHide : true, transitionSpeed : 3000,
autoPlay: { enabled: true, pauseOnHover : true, delay : 5000 }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); |
6. 이제 배경화면을 넣어봅시다.
</script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ #content-slider, #content-slider, #content-slider .rsOverflow, #content-slider .rsSlide, #content-slider .rsVideoFrameHolder, #content-slider .rsThumbs { background: #141e39;}
#slide_1, #slide_1 .rsOverflow, #slide_1 .rsSlide, #slide_1 .rsVideoFrameHolder, #slide_1 .rsThumbs { background: #141e39;}
#slide_2, #slide_2 .rsOverflow, #slide_2 .rsSlide, #slide_2 .rsVideoFrameHolder, #slide_2 .rsThumbs {background: #141e39;}
</style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" >
<div>slide1</div> <div >slide2</div> <div>slide3</div> <div>slide4</div> </div>
|
각 슬라이드에도 색상을 넣을 수 있는데 그건 비효율 적이니 안하고 slide_1이런거 쓰면 됩니다.
기본적으로 전체 색상을 잡아주기 위하여 content_slider에 색상을 추가했습니다.
7. 이제 테스트로 첫 슬라이랑 두번째 슬라이드 요소들을 채워 넣어봅니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', arrowsNavAutoHide : true, transitionSpeed : 3000,
autoPlay: { enabled: true, pauseOnHover : true, delay : 5000 }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ #content-slider, #content-slider, #content-slider .rsOverflow, #content-slider .rsSlide, #content-slider .rsVideoFrameHolder, #content-slider .rsThumbs { background: #141e39;}
#slide_1, #slide_1 .rsOverflow, #slide_1 .rsSlide, #slide_1 .rsVideoFrameHolder, #slide_1 .rsThumbs { background: #141e39;}
#slide_2, #slide_2 .rsOverflow, #slide_2 .rsSlide, #slide_2 .rsVideoFrameHolder, #slide_2 .rsThumbs {background: #141e39;}
</style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" >
<div> <img class="rsIgm" src="img\GameIntro_BigName.jpg" alt="" style="width:40%">
</div> <div>slide2</div> <div>slide3</div> <div>slide4</div> </div>
</body> </html> |
글자를 넣으려고하니 좌표를 직접 잡아줘야 해서 굉장히 짜증나네요. 이럴때 슬라이드의 장점을 살려봅시다.
어차피 한 화면씩 나오니 차라리 포토샵으로 그림이고 뭐고 다 해서 이미지 통째로 올려버리는 거죠 꺄르르르르르
'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
|---|---|
| 4. royalslider 슬라이드에 이미지 집어넣기 (0) | 2019.01.02 |
| 2. 웹페이지 디자인/기획 (0) | 2019.01.01 |
| 1.웹 게임 개발 환경을 만드는 법 (0) | 2019.01.01 |
| [개요] Web에서 작동하는 게임을 만들어보자! (0) | 2018.12.31 |
