Image Slider
Dark Slider Variation
HTML
<div class="ss-c-aspect_ratio--3x2">
<figure class="ss-c-image__compare" id="imageCompare">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--image"
alt="After Image"
crossorigin="anonymous"
data-dark-side="right"
/>
<img
src="https://images.unsplash.com/uploads/1412026095116d2b0c90e/3bf33993?q=80&w=3872&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="ss-c-image__compare--overlay ss-c-image__compare--image"
alt="Before Image"
crossorigin="anonymous"
data-dark-side="left"
/>
<div class="ss-c-image__compare--slider" id="slider">
<span class="ss-c-arrow--left"></span>
<span class="ss-c-arrow--right"></span>
</div>
</figure>
</div>Dark Slider Variation
HTML
<div class="ss-c-aspect_ratio--3x2">
<figure class="ss-c-image__compare" id="imageCompare">
<img
src="https://images.unsplash.com/uploads/1412026095116d2b0c90e/3bf33993?q=80&w=3872&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="ss-c-image__compare--image"
alt="Before Image"
crossorigin="anonymous"
data-dark-side="right"
/>
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--overlay ss-c-image__compare--image"
alt="After Image"
crossorigin="anonymous"
data-dark-side="left"
/>
<div class="ss-c-image__compare--slider" id="slider">
<span class="ss-c-arrow--left"></span>
<span class="ss-c-arrow--right"></span>
</div>
</figure>
</div>Image Comparison Slider 1x1
HTML
<div class="aspect_ratio--1x1">
<figure class="ss-c-image__compare" id="imageCompare">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--image"
alt="After Image"
data-dark-side="right"
/>
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--overlay ss-c-image__compare--image"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image__compare--slider" id="slider">
<span class="ss-c-arrow--left"></span>
<span class="ss-c-arrow--right"></span>
</div>
</figure>
</div>Image Comparison Slider 3x2
HTML
<div class="aspect_ratio--3x2">
<figure class="ss-c-image__compare" id="imageCompare">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--image"
alt="After Image"
data-dark-side="right"
/>
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--overlay ss-c-image__compare--image"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image__compare--slider" id="slider">
<span class="ss-c-arrow--left"></span>
<span class="ss-c-arrow--right"></span>
</div>
</figure>
</div>Image Comparison Slider 4x3
HTML
<div class="aspect_ratio--4x3">
<figure class="ss-c-image__compare" id="imageCompare">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--image"
alt="After Image"
data-dark-side="right"
/>
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--overlay ss-c-image__compare--image"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image__compare--slider" id="slider">
<span class="ss-c-arrow--left"></span>
<span class="ss-c-arrow--right"></span>
</div>
</figure>
</div>Image Comparison Slider 3x4
HTML
<div class="aspect_ratio--3x4">
<figure class="ss-c-image__compare" id="imageCompare">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--image"
alt="After Image"
data-dark-side="right"
/>
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--overlay ss-c-image__compare--image"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image__compare--slider" id="slider">
<span class="ss-c-arrow--left"></span>
<span class="ss-c-arrow--right"></span>
</div>
</figure>
</div>Image Comparison Slider 2x3
HTML
<div class="aspect_ratio--2x3">
<figure class="ss-c-image__compare" id="imageCompare">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--image"
alt="After Image"
data-dark-side="right"
/>
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--overlay ss-c-image__compare--image"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image__compare--slider" id="slider">
<span class="ss-c-arrow--left"></span>
<span class="ss-c-arrow--right"></span>
</div>
</figure>
</div>Image Comparison Slider 16x9
HTML
<div class="aspect_ratio--16x9">
<figure class="ss-c-image__compare" id="imageCompare">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--image"
alt="After Image"
data-dark-side="right"
/>
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
class="ss-c-image__compare--overlay ss-c-image__compare--image"
alt="Before Image"
data-dark-side="left"
/>
<div class="ss-c-image__compare--slider" id="slider">
<span class="ss-c-arrow--left"></span>
<span class="ss-c-arrow--right"></span>
</div>
</figure>
</div>