110 lines
3.7 KiB
PHP
110 lines
3.7 KiB
PHP
|
<?php
|
||
|
|
/** @var \Kirby\Cms\Block $block */
|
||
|
|
$imageBefore = $block->imageBefore()->toFile();
|
||
|
|
$imageAfter = $block->imageAfter()->toFile();
|
||
|
|
$caption = $block->caption()->value();
|
||
|
|
$text = $block->text()->value();
|
||
|
|
?>
|
||
|
|
|
||
|
|
<div class="subsection-w-media">
|
||
|
|
|
||
|
|
<div class="media">
|
||
|
|
<div class="container slider-before-after">
|
||
|
|
<div class="image-container">
|
||
|
|
<?php if ($imageBefore): ?>
|
||
|
|
<img class="image-before slider-image"
|
||
|
|
src="<?= $imageBefore->url() ?>"
|
||
|
|
alt="<?= $imageBefore->alt()->or('Image avant')->esc() ?>" />
|
||
|
|
<?php endif ?>
|
||
|
|
|
||
|
|
<?php if ($imageAfter): ?>
|
||
|
|
<img class="image-after slider-image"
|
||
|
|
src="<?= $imageAfter->url() ?>"
|
||
|
|
alt="<?= $imageAfter->alt()->or('Image après')->esc() ?>" />
|
||
|
|
<?php endif ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
min="0"
|
||
|
|
max="100"
|
||
|
|
value="50"
|
||
|
|
aria-label="Pourcentage de la photo avant affichée"
|
||
|
|
class="slider"
|
||
|
|
/>
|
||
|
|
<div class="slider-line" aria-hidden="true"></div>
|
||
|
|
<div class="slider-button" aria-hidden="true">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="30"
|
||
|
|
height="30"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 256 256"
|
||
|
|
>
|
||
|
|
<rect width="256" height="256" fill="none"></rect>
|
||
|
|
<line
|
||
|
|
x1="128"
|
||
|
|
y1="40"
|
||
|
|
x2="128"
|
||
|
|
y2="216"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="16"
|
||
|
|
></line>
|
||
|
|
<line
|
||
|
|
x1="96"
|
||
|
|
y1="128"
|
||
|
|
x2="16"
|
||
|
|
y2="128"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="16"
|
||
|
|
></line>
|
||
|
|
<polyline
|
||
|
|
points="48 160 16 128 48 96"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="16"
|
||
|
|
></polyline>
|
||
|
|
<line
|
||
|
|
x1="160"
|
||
|
|
y1="128"
|
||
|
|
x2="240"
|
||
|
|
y2="128"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="16"
|
||
|
|
></line>
|
||
|
|
<polyline
|
||
|
|
points="208 96 240 128 208 160"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="16"
|
||
|
|
></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php if ($caption): ?>
|
||
|
|
<p class="caption"><?= $caption ?></p>
|
||
|
|
<?php endif ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php if ($text): ?>
|
||
|
|
<div class="subsection-txt">
|
||
|
|
<?= $text ?>
|
||
|
|
</div>
|
||
|
|
<?php endif ?>
|
||
|
|
|
||
|
|
</div>
|