Skip to content

Instantly share code, notes, and snippets.

@beseidel

beseidel/index.html

Created October 26, 2019 19:16
Show Gist options
  • Save beseidel/c8fcd13496958ff9bd92254d6b516738 to your computer and use it in GitHub Desktop.
Save beseidel/c8fcd13496958ff9bd92254d6b516738 to your computer and use it in GitHub Desktop.
Download ZIP
Slider Before-After
Raw
index.html
<div class="ba-slider">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/TwistedFate_4.jpg" alt="" />
<div class="resize">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/TwistedFate_3.jpg" alt="" />
</div>
<span class="handle"></span>
</div>
Raw
script.js
$(document).ready(function () {
$('.ba-slider').beforeAfter();
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jotform/before-after.js/master/before-after.min.js"></script>
Raw
style.css
.ba-slider {
width: 1100px;
margin: auto;
border: 5px solid #000;
}
Raw
styles
<link href="https://cdn.rawgit.com/jotform/before-after.js/master/before-after.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment