## Image Slider

### Dark Slider Variation

HTML

    <div class="aspect_ratio--3x2">
                <figure class="image__compare" id="imageCompare">
                    <img
                        src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
                        class="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="image__compare--overlay image__compare--image"
                        alt="Before Image"
                        crossorigin="anonymous"
                        data-dark-side="left"
                    />
                    <div class="image__compare--slider" id="slider">
                        <span class="arrow--left"></span>
                        <span class="arrow--right"></span>
                    </div>
                </figure>
            </div>

### Dark Slider Variation

HTML

    <div class="aspect_ratio--3x2">
                <figure class="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="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="image__compare--overlay image__compare--image"
                        alt="After Image"
                        crossorigin="anonymous"
                        data-dark-side="left"
                    />
                    <div class="image__compare--slider" id="slider">
                        <span class="arrow--left"></span>
                        <span class="arrow--right"></span>
                    </div>
                </figure>
            </div>

### Image Comparison Slider 1x1

HTML

    <div class="aspect_ratio--1x1">
                <figure class="image__compare" id="imageCompare">
                    <img
                        src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
                        class="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="image__compare--overlay image__compare--image"
                        alt="Before Image"
                        data-dark-side="left"
                    />
                    <div class="image__compare--slider" id="slider">
                        <span class="arrow--left"></span>
                        <span class="arrow--right"></span>
                    </div>
                </figure>
            </div>

### Image Comparison Slider 3x2

HTML

    <div class="aspect_ratio--3x2">
                <figure class="image__compare" id="imageCompare">
                    <img
                        src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
                        class="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="image__compare--overlay image__compare--image"
                        alt="Before Image"
                        data-dark-side="left"
                    />
                    <div class="image__compare--slider" id="slider">
                        <span class="arrow--left"></span>
                        <span class="arrow--right"></span>
                    </div>
                </figure>
            </div>

### Image Comparison Slider 4x3

HTML

    <div class="aspect_ratio--4x3">
                <figure class="image__compare" id="imageCompare">
                    <img
                        src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
                        class="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="image__compare--overlay image__compare--image"
                        alt="Before Image"
                        data-dark-side="left"
                    />
                    <div class="image__compare--slider" id="slider">
                        <span class="arrow--left"></span>
                        <span class="arrow--right"></span>
                    </div>
                </figure>
            </div>

### Image Comparison Slider 3x4

HTML

    <div class="aspect_ratio--3x4">
                <figure class="image__compare" id="imageCompare">
                    <img
                        src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
                        class="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="image__compare--overlay image__compare--image"
                        alt="Before Image"
                        data-dark-side="left"
                    />
                    <div class="image__compare--slider" id="slider">
                        <span class="arrow--left"></span>
                        <span class="arrow--right"></span>
                    </div>
                </figure>
            </div>

### Image Comparison Slider 2x3

HTML

    <div class="aspect_ratio--2x3">
                <figure class="image__compare" id="imageCompare">
                    <img
                        src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
                        class="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="image__compare--overlay image__compare--image"
                        alt="Before Image"
                        data-dark-side="left"
                    />
                    <div class="image__compare--slider" id="slider">
                        <span class="arrow--left"></span>
                        <span class="arrow--right"></span>
                    </div>
                </figure>
            </div>

### Image Comparison Slider 16x9

HTML

    <div class="aspect_ratio--16x9">
                <figure class="image__compare" id="imageCompare">
                    <img
                        src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1470&q=80"
                        class="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="image__compare--overlay image__compare--image"
                        alt="Before Image"
                        data-dark-side="left"
                    />
                    <div class="image__compare--slider" id="slider">
                        <span class="arrow--left"></span>
                        <span class="arrow--right"></span>
                    </div>
                </figure>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!