4. royalslider 슬라이드에 이미지 집어넣기
넣는 코드
<!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: false, 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:950px; width: 100%;" >
<div> <img class="rsIgm" src="img\GameIntro.jpg" alt="" style="width:100%">
</div> <div> <img class="rsIgm" src="img\CreatorIntro.jpg" alt="" style="width:100%"> </div> <div>slide3</div> <div>slide4</div> </div>
</body> </html> |
이렇게 넣고 프로젝트에도 이미지 파일을 넣어 놓으면 이미지가 출력된다.
문제점
이렇게 통 이미지로 할 경우 원하는 형태로 꾸미기에는 좋지만 이후 수정하기가 여간 까다로운 것이 아니다.
따라서 슬라이드 안의 요소들을 각각 수정 가능한 형태로 바꾸어야 한다.
그런데 일단 이렇게 통 이미지로 한 이유가 글자 폰트가 망가져서 그런건데.
글자만 따로 출력하는 것으로 이 문제를 해결 할 수 있을까?...
일단은 개발 속도를 위해 통 이미지를 그대로 사용하여 페이지를 장식하고 그 뒤에 시간이 남으면 요소들을 잘라보기로 해야겠다.
'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 6. 디자인 수정..다시 홈페이지 만들기. (0) | 2019.01.05 |
|---|---|
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
| 3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기 (0) | 2019.01.02 |
| 2. 웹페이지 디자인/기획 (0) | 2019.01.01 |
| 1.웹 게임 개발 환경을 만드는 법 (0) | 2019.01.01 |
