Image Slider
Dark Slider Variation
HTML
<div class="ss-c-aspect_ratio--3x2">
<figure class="ss-c-image-compare" data-ss="image-compare" id="imageCompare-dark">
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__image"
alt="After Image"
crossorigin="anonymous"
data-dark-side="right"
/>
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__overlay"
alt="Before Image"
crossorigin="anonymous"
data-dark-side="left"
/>
<div class="ss-c-image-compare__handle" id="slider-dark" role="slider" tabindex="0" aria-label="Before/after split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>
</figure>
</div>Light Slider Variation
HTML
<div class="ss-c-aspect_ratio--3x2">
<figure class="ss-c-image-compare" data-ss="image-compare" id="imageCompare-light">
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__image"
alt="Before Image"
crossorigin="anonymous"
data-dark-side="right"
/>
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__overlay"
alt="After Image"
crossorigin="anonymous"
data-dark-side="left"
/>
<div class="ss-c-image-compare__handle" id="slider-light" role="slider" tabindex="0" aria-label="Before/after split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>
</figure>
</div>Image Comparison Slider 1x1
HTML
<div class="aspect_ratio--1x1">
<figure class="ss-c-image-compare" data-ss="image-compare" id="imageCompare-1x1">
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__image"
alt="After Image"
data-dark-side="right"
/>
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__overlay"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image-compare__handle" id="slider-1x1" role="slider" tabindex="0" aria-label="Before/after split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>
</figure>
</div>Image Comparison Slider 3x2
HTML
<div class="aspect_ratio--3x2">
<figure class="ss-c-image-compare" data-ss="image-compare" id="imageCompare-3x2">
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__image"
alt="After Image"
data-dark-side="right"
/>
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__overlay"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image-compare__handle" id="slider-3x2" role="slider" tabindex="0" aria-label="Before/after split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>
</figure>
</div>Image Comparison Slider 4x3
HTML
<div class="aspect_ratio--4x3">
<figure class="ss-c-image-compare" data-ss="image-compare" id="imageCompare-4x3">
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__image"
alt="After Image"
data-dark-side="right"
/>
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__overlay"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image-compare__handle" id="slider-4x3" role="slider" tabindex="0" aria-label="Before/after split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>
</figure>
</div>Image Comparison Slider 3x4
HTML
<div class="aspect_ratio--3x4">
<figure class="ss-c-image-compare" data-ss="image-compare" id="imageCompare-3x4">
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__image"
alt="After Image"
data-dark-side="right"
/>
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__overlay"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image-compare__handle" id="slider-3x4" role="slider" tabindex="0" aria-label="Before/after split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>
</figure>
</div>Image Comparison Slider 2x3
HTML
<div class="aspect_ratio--2x3">
<figure class="ss-c-image-compare" data-ss="image-compare" id="imageCompare-2x3">
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__image"
alt="After Image"
data-dark-side="right"
/>
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__overlay"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image-compare__handle" id="slider-2x3" role="slider" tabindex="0" aria-label="Before/after split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>
</figure>
</div>Image Comparison Slider 16x9
HTML
<div class="aspect_ratio--16x9">
<figure class="ss-c-image-compare" data-ss="image-compare" id="imageCompare-16x9">
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__image"
alt="After Image"
data-dark-side="right"
/>
<img
src="/img/placeholder/1470x980-photo.svg"
class="ss-c-image-compare__overlay"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image-compare__handle" id="slider-16x9" role="slider" tabindex="0" aria-label="Before/after split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>
</figure>
</div>