any Image Comparison Slider - Example

Get full documentation: https://niklasknaack.de/aics/

by Niklas Knaack

HTML

<script src="https://cdn.jsdelivr.net/npm/jquery-anyimagecomparisonslider-plugin"></script>
<div class="aics-wrapper">
  <div id="aics-autostart">
    <div class="images">
        <div class="image-rgt" data-src="http://www.nkunited.de/ExternalImages/devenv/aics/port_beirut_lebanon_s3_20200805T083844Z_rgb_3840_16by9_geo-1-web.jpg" data-width="1200" data-height="900"></div>
        <div class="image-lft" data-src="http://www.nkunited.de/ExternalImages/devenv/aics/port_beirut_lebanon_s112_20200531T081734Z_rgb_3840_16by9_geo-2-web.jpg" data-width="1200" data-height="900"></div>
    </div>
  </div>
</div>

<div class="copy-wrapper">
  <span><a href="https://niklasknaack.de/aics/" target="_blank">any Image Comparison Slider</a> | Images: <a href="https://www.planet.com/gallery/" target="_blank">Planet Labs Inc</a></span>
</div>

CSS

html, body, div {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
}

.aics-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 50%;
  max-width: 1200px;
  height: auto;
}

.copy-wrapper {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.copy-wrapper a:link, .copy-wrapper a:visited, .copy-wrapper a:hover, .copy-wrapper a:active {
  color: black;
  text-decoration: none;
}