Image Pager

Link to article: Image Pager.

@import url(https://scp-wiki.wdfiles.com/local--code/component:image-pager/1);

border: solid .05rem #e0e0e0; padding: 0.375rem 1.25rem;

(none)

```
code
```
```
code
```
```
page-flipper
```
```
dir-{$direction}
```
```
page-capt
```
```
check-{$capt1}
```
```
page-capt
```
```
check-{$capt2}
```
```
page-capt
```
```
check-{$capt3}
```
```
page-capt
```
```
check-{$capt4}
```
```
page-capt
```
```
check-{$capt5}
```
```
page-capt
```
```
check-{$capt6}
```
```
page-capt
```
```
check-{$capt7}
```
```
page-capt
```
```
check-{$capt8}
```
```
page-capt
```
```
check-{$capt9}
```
```
page-capt
```
```
check-{$capt10}
```
```
page-capt
```
```
check-{$capt11}
```
```
page-capt
```
```
check-{$capt12}
```
```
page-capt
```
```
check-{$capt13}
```
```
page-capt
```
```
check-{$capt14}
```
```
page-capt
```
```
check-{$capt15}
```
```
page-capt
```
```
check-{$capt16}
```
```
page-capt
```
```
check-{$capt17}
```
```
page-capt
```
```
check-{$capt18}
```
```
page-capt
```
```
check-{$capt19}
```
```
page-capt
```
```
check-{$capt20}
```

[[iftags +component]]
[[>]]
[[module Rate]]
[[/>]]

[[div style="border: solid .05rem #e0e0e0; padding: 0.375rem 1.25rem;"]]

[[image https://scp-wiki.wdfiles.com/local--files/component%3Aimage-pager/flipper.png]]

= (Example page from [[[there-be-dragons-in-my-backyard|]]] by Harmacy)

This is a component used to display series of images in a paged, comic-like format.

To use, add the following:

[[div class="code"]]

@@[[include :scp-wiki:component:image-pager |css=-- |alt=alt@@
@@|p1=--@@ |img1=(url here) |alt-text1=Alt text for image 1.
|capt1=Optional caption for image 1.

@@|p2=--@@ |img2=(url here) |alt-text2=Alt text for image 2.
|capt2=Optional caption for image 2.

@@|p3=--@@ |img3=(url here) |alt-text3=Alt text for image 3.
|capt3=Optional caption for image 3.
@@]]@@
[[/div]]

If multiple pagers are used on one page, drop the {{@@|css=--@@}} on subsequent [[include]]s. The {{|alt=alt}} parameter enables alt-text insertion into images.

It also supports a right-to-left mode:

[[div class="code"]]
@@[[include :scp-wiki:component:image-pager@@ |##blue|direction=rtl##
[[/div]]

Currently, Image Pager allows up to 20 pages at once.
[[/div]]

-----

[[code type="CSS"]]
div.page-flipper {
    font-family: Inter, 'Nanum Gothic', system-ui, BlinkMacFontSystem, Arial, sans-serif;
    direction: ltr;
    margin-block: 1.5rem;
    --_p-height: calc(100svh - 3.25rem);
    --_p-shadow: 0 0 .25rem rgb(0 0 0/.175);

    --_b-size: 2.125rem;
    --_b-forward: "→";
    --_b-backward: "←";
    --_b-color: rgb(12 12 12);
    --_b-background: rgb(252 252 252);
    --_b-color-hover:  var(--_b-color);
    --_b-background-hover: rgb(230 230 230);
    --_b-color-selected:  var(--_b-color);
    --_b-background-selected: var(--_b-background-hover);
    --_b-border: rgb(230 230 230);
}
 div.page-flipper.dir-rtl {
    direction: rtl;
    --_b-forward: "←";
    --_b-backward: "→";
}

#page-content div.page-flipper .yui-navset {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .875rem;
    position: relative;
    margin: auto;
    width: fit-content;
    z-index: unset;
    isolation: isolate;
}

div.page-flipper .yui-navset .yui-content {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;

    display: grid;
    grid-template-areas: "page";
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr);
    place-items: center;
    order: -1;
    z-index: -1;
}

div.page-flipper .yui-content > div {
    grid-area: page;
    display: flex!important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 100%;
    position: relative;
}
div.page-flipper .yui-content > div[style*="none"] { visibility: hidden; }

div.page-flipper .yui-content > div > img {
    max-height: var(--_p-height);
    box-shadow: var(--_p-shadow);
}

.page-flipper .page-capt {
    position: absolute;
    inset-block-end: 0;
    width: 100%;
    color: var(--_b-color);
    background-color: var(--_b-background);
    font-size: .775em;
    text-align: center;
    padding: .125em 1em;
    box-sizing: border-box;
}
.page-flipper [class*="$capt"].page-capt { display: none; }
.page-flipper .page-capt p {
    margin-block: .625em;
}

/*---------------------------------------*/
/*----- Carousel Navigation Layout -----*/
/*---------------------------------------*/

div.page-flipper .yui-navset ul.yui-nav {
    background: unset;
    border: unset;
    clip-path: unset;
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    font-size: .875em;
}
div.page-flipper .yui-navset.yui-navset-top ul.yui-nav li { display: contents; }
div.page-flipper .yui-navset.yui-navset-top ul.yui-nav li::before,
div.page-flipper .yui-navset.yui-navset-top ul.yui-nav li::after { all: unset; }

div.page-flipper .yui-navset ul.yui-nav li a {
    --_color: var(--_b-color);
    --_background-color: var(--_b-background);
    all: unset;
    position: static;
    text-align: center;
    padding: .325em;
    box-sizing: border-box;
    flex-basis: 2.5em;
    color: var(--_color)!important;
    background: var(--_background-color)!important;
    border: solid 0.1rem var(--_b-border);
}
div.page-flipper  .yui-navset ul.yui-nav li a em {
    color: inherit;
    padding: 0;
    border: unset;
}

div.page-flipper .yui-navset ul.yui-nav li a:is(:hover,:focus) {
    --_color: var(--_b-color-hover);
    --_background-color: var(--_b-background-hover);
}
div.page-flipper .yui-navset ul.yui-nav li.selected a {
    --_color: var(--_b-color-selected);
    --_background-color: var(--_b-background-selected);
}

div.page-flipper .yui-navset ul.yui-nav li a::before,
div.page-flipper .yui-navset ul.yui-nav li a::after {
    all: unset;
    display: grid;
    align-items: center;
    justify-content: center;
    width: var(--_b-size);
    height: var(--_b-size);
    box-sizing: border-box;
    font-size: calc(var(--_b-size)*.75);
    line-height: 0;
    color: inherit;
    background: inherit!important;
    border: solid 0.1rem var(--_b-border);
    position: absolute;
    inset-block-start: min(calc((var(--_p-height) - var(--_b-size))/2), calc(50% - var(--_b-size) - .75rem));
    visibility: hidden;
}

div.page-flipper .yui-navset ul.yui-nav li a::before {
    content: var(--_b-backward);
    inset-inline-start: calc(var(--_b-size)*-.425);
}
div.page-flipper .yui-navset ul.yui-nav li a::after {
    content: var(--_b-forward);
    inset-inline-end: calc(var(--_b-size)*-.425);
}

/*---------------------------------------*/
/*----- Carousel Navigation Logic -----*/
/*---------------------------------------*/

/* if browser doesn't support :has - this should eventually be removed */
@supports not selector(li:has(+ .selected)) {

div.page-flipper .yui-navset ul.yui-nav li a::before,
div.page-flipper .yui-navset ul.yui-nav li.selected + li a::after { visibility: visible; }

div.page-flipper .yui-navset ul.yui-nav li.selected ~ li a::before,
div.page-flipper .yui-navset ul.yui-nav li.selected a::before { visibility: hidden; }

}

/* if browser supports :has */
@supports selector(li:has(+ .selected)) {

div.page-flipper .yui-navset ul.yui-nav li:has(+ .selected) a::before,
div.page-flipper .yui-navset ul.yui-nav li.selected + li a::after {
    visibility: visible;
}

}
[[/code]]
[[/iftags]]

[[div class="page-flipper dir-{$direction}"]]
[!-- {$css}]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/component:image-pager/1);
[[/module]]
[!-- --]

[[tabview]]

[!-- {$p1}]
[[tab 1]]
[[image {$img1} {$alt}="{$alt-text1}"]]
[[div class="page-capt check-{$capt1}"]]
{$capt1}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p2}]
[[tab 2]]
[[image {$img2} {$alt}="{$alt-text2}"]]
[[div class="page-capt check-{$capt2}"]]
{$capt2}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p3}]
[[tab 3]]
[[image {$img3} {$alt}="{$alt-text3}"]]
[[div class="page-capt check-{$capt3}"]]
{$capt3}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p4}]
[[tab 4]]
[[image {$img4} {$alt}="{$alt-text4}"]]
[[div class="page-capt check-{$capt4}"]]
{$capt4}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p5}]
[[tab 5]]
[[image {$img5} {$alt}="{$alt-text5}"]]
[[div class="page-capt check-{$capt5}"]]
{$capt5}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p6}]
[[tab 6]]
[[image {$img6} {$alt}="{$alt-text6}"]]
[[div class="page-capt check-{$capt6}"]]
{$capt6}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p7}]
[[tab 7]]
[[image {$img7} {$alt}="{$alt-text7}"]]
[[div class="page-capt check-{$capt7}"]]
{$capt7}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p8}]
[[tab 8]]
[[image {$img8} {$alt}="{$alt-text8}"]]
[[div class="page-capt check-{$capt8}"]]
{$capt8}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p9}]
[[tab 9]]
[[image {$img9} {$alt}="{$alt-text9}"]]
[[div class="page-capt check-{$capt9}"]]
{$capt9}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p10}]
[[tab 10]]
[[image {$img10} {$alt}="{$alt-text10}"]]
[[div class="page-capt check-{$capt10}"]]
{$capt10}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p11}]
[[tab 11]]
[[image {$img11} {$alt}="{$alt-text11}"]]
[[div class="page-capt check-{$capt11}"]]
{$capt11}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p12}]
[[tab 12]]
[[image {$img12} {$alt}="{$alt-text12}"]]
[[div class="page-capt check-{$capt12}"]]
{$capt12}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p13}]
[[tab 13]]
[[image {$img13} {$alt}="{$alt-text13}"]]
[[div class="page-capt check-{$capt13}"]]
{$capt13}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p14}]
[[tab 14]]
[[image {$img14} {$alt}="{$alt-text14}"]]
[[div class="page-capt check-{$capt14}"]]
{$capt14}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p15}]
[[tab 15]]
[[image {$img15} {$alt}="{$alt-text15}"]]
[[div class="page-capt check-{$capt15}"]]
{$capt15}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p16}]
[[tab 16]]
[[image {$img16} {$alt}="{$alt-text16}"]]
[[div class="page-capt check-{$capt16}"]]
{$capt16}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p17}]
[[tab 17]]
[[image {$img17} {$alt}="{$alt-text17}"]]
[[div class="page-capt check-{$capt17}"]]
{$capt17}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p18}]
[[tab 18]]
[[image {$img18} {$alt}="{$alt-text18}"]]
[[div class="page-capt check-{$capt18}"]]
{$capt18}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p19}]
[[tab 19]]
[[image {$img19} {$alt}="{$alt-text19}"]]
[[div class="page-capt check-{$capt19}"]]
{$capt19}
[[/div]]
[[/tab]]
[!-- --]

[!-- {$p20}]
[[tab 20]]
[[image {$img20} {$alt}="{$alt-text20}"]]
[[div class="page-capt check-{$capt20}"]]
{$capt20}
[[/div]]
[[/tab]]
[!-- --]

[[/tabview]]
[[/div]]

Image Pager

Module Styles

Inline Styles

Includes

CSS Classes

Page Source