잠깐 정지!!
SCP 위키 내부에서 사용되는 템플릿 페이지입니다.
스탭의 허가없이
이 페이지를 만지지 마세요
정보
이미지 캐러셀
원작: https://scp-wiki.wikidot.com/component:carousel
저자: Croquembouche
역자: Denevola
본 구성요소는 일부분이 원문에 맞추어 자동 업데이트되지 않습니다.
문제가 발생하거나 업데이트가 필요한 경우 포럼에 알려주세요.
마지막 업데이트: 원문의 13번째 판 기준
소개
한 가지 이미지 대신 여러 장을 순환시켜 보여주는 이미지 캐러셀(슬라이드) 구성요소입니다.
사용법
이미지 캐러셀을 사용하고 싶으면 이 코드를 표준 이미지 블록 대신 사용하세요.
사용하려는 이미지는 여러분의 페이지에 먼저 업로드되어있어야 합니다. 무시하고 캐러셀 설정 후에 업로드했다면 캐시 새로고침(Ctrl+Shift+R) 하기 전까지 안 나올 겁니다.
[[include :scpko:component:carousel
| images=photograph.png,old-map.png,jumpscare.gif
| caption=선택한 이미지들입니다.
| interval=5
| wiki=scpko
| page=scp-173
| width=300px
| height=240px
| position=right
| no-caption=false
| background=white
| options=yes
]]
이미지 캐러셀 사용은 접근성 면에서 문제가 될 수 있습니다. 끝없는 움직임이 주의를 분산시킬 수 있으며, 독자가 문서의 이미지를 기다리게 하는 것도 좋은 생각이 아닙니다. 이 구성요소는 정적인 콘텐츠에서 상호작용을 강제해 독자를 짜증나게 만들기에 최적인 장치입니다. 가능하면 이 구성요소를 사용하지 말 것을 권장드립니다. 그냥 표준 이미지 블록을 여러 개 놓으세요.
각 옵션의 역할
기울임체 속 내용은 전부 선택 사항이며, 그 외엔 필수입니다.
선택적 옵션을 생략하면 기본값이 적용됩니다. 필수 옵션을 생략했다면 정상 작동을 기대하지 마세요.
| images: | 쉼표로 구분되는 이미지 목록입니다. 각각이 페이지에 미리 업로드되어있어야 하고, URL을 사용할 수도 있습니다. 이미지들은 목록에 작성한 순서대로 캐러셀에 출력됩니다. |
| links: (선택 사항) |
|
| caption: (선택 사항) |
캐러셀 아래에 붙는 설명입니다. 쓸 설명이 없다면 no-caption 값을 true로 설정해주세요. 기본값: "{$caption}" |
| interval: (선택 사항) |
이 값을 0이 아닌 숫자로 설정하면 해당 시간(초) 후에 다음 이미지로 넘어갑니다. 사용자가 직접 이미지를 넘기거나 캐러셀에 커서를 올리면 자동으로 넘어가지 않게 됩니다. 기본값: "0" |
| wiki: | 캐러셀에 사용할 이미지가 업로드된 위키의 이름입니다. 예를 들자면 scpko("scp-ko"가 아닙니다), scpkrsandbox 등이 가능합니다. |
| page: | 캐러셀에 사용할 이미지가 업로드된 페이지의 슬러그입니다. 카테고리가 있으면 함께 입력해주세요. (여기서 '슬러그'란 URL에서 나타나는 페이지명을 말합니다. SCP-\̅\̅\̅\̅-J의 경우 슬러그는 scp-botnik-j가 됩니다.) |
| width: (선택 사항) |
캐러셀에서 가로로 가장 긴 이미지의 너비입니다. 기본값: "300px" |
| height: (선택 사항) |
캐러셀에서 세로로 가장 긴 이미지의 높이입니다. 브라우저에 따라 기본값 다름 |
| position: (선택 사항) |
페이지에서 캐러셀이 놓이는 수평 위치입니다. "left"나 "right", "center"를 선택할 수 있습니다. 기본값: "right" |
| no-caption: (선택 사항) |
설명을 넣고 싶지 않으면 "true"로 설정하세요. 그게 아니라면 값을 비우거나 "false"로 설정하면 되고, 아예 지워버려도 괜찮습니다. 기본값: "false" |
| background: (선택 사항) |
이미지 뒤의 배경 색상입니다. 기본값: "transparent" |
| options: (선택 사항) |
세부 옵션(재생/일시정지 버튼과 페이지 표시 점)이 보이길 원하시나요? 숨기고 싶다면 "yes"로 설정하세요. 기본값: "yes" |
캐러셀이 페이지에 가로로 가득 차면 좋겠어요!
width 값은 "100%", position값은 "center"로 설정하세요.
가장 큰 이미지에 맞추어 너비/높이를 설정했는데 너무 큰 것 같아요!
숫자를 좀 낮추거나 이미지를 작게 만드세요.
{$caption}
코드베이스
캐러셀의 HTML 구조
<html ng-app="carousel" ng-controller="CarouselController"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script> <script src="https://scp-wiki.wikidot.com/local--code/component%3Acarousel/2"></script> <link href="https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css" rel="stylesheet"> <link href="https://scpko.wdfiles.com/local--code/component%3Atheme/1" rel="stylesheet"> <link href="https://scp-wiki.wdfiles.com/local--code/component%3Acarousel/4" rel="stylesheet"> <style>.arrow.inactive { opacity: 0; }</style> </head> <body> <div class="wrapper" id="background"> <div class="carousel"> <div class="horsie" ng-repeat="image in images track by $index" ng-class="[index > $index ? 'past' : null, index === $index ? 'present' : null, index < $index ? 'future' : null]"> <img ng-src="{{image}}" ng-if="!links[$index]"> <a href="{{links[$index]}}" target="_blank" ng-if="links[$index]"> <img ng-src="{{image}}"> </a> </div> </div> <div class="arrow decrementor" ng-class="index === 0 ? 'inactive' : 'active'" ng-click="increment(-1)"> <div class="image"></div> </div> <div class="arrow incrementor" ng-class="index === images.length-1 ? 'inactive' : 'active'" ng-click="increment(1)"> <div class="image"></div> </div> <div class="bubble-holder" ng-class="[options === 'yes' ? null : 'invisible']"> <div class="bubble" ng-repeat="image in images track by $index" ng-class="[index === $index ? 'present' : null]" ng-click="selectImage($index)"> </div> </div> <div class="control play" ng-click="control('play')" ng-class="[state === 'play' ? 'active' : null, options === 'yes' ? null : 'invisible']"></div> <div class="control pause" ng-click="control('pause')" ng-class="[state === 'pause' ? 'active' : null, options === 'yes' ? null : 'invisible']"></div> </div> </body> </html>