jquery-beforeafter-slider
Version:
A responsive, touch-enabled, and highly customizable jQuery plugin to compare two images with a slider.
47 lines (37 loc) • 1.73 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example 1 :: jQuery BeforeAfter Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="./../dist/beforeafter.jquery.min.js"></script>
</head>
<body>
<h1 style="text-align:center;">jQuery BeforeAfter Slider</h1>
<h2 style="text-align:center;">Example 1</h2>
<div style="max-width:96%; margin: 36px auto;">
<div class="beforeAfter">
<img src="./city-578174_1280.jpg" alt="Before">
<img src="./city-573775_1280.jpg" alt="After">
</div>
</div>
<script>
$('.beforeAfter').beforeAfter();
</script>
<code>Codes:<pre style="background-color:#000;color:#fff; padding: 8px;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="./../dist/beforeafter.jquery.min.js"></script>
<div class="beforeAfter">
<img src="./city-578174_1280.jpg" alt="Before">
<img src="./city-573775_1280.jpg" alt="After">
</div>
<script>
$('.beforeAfter').beforeAfter();
</script>
</pre></code>
<p style="text-align:center;">Author: <a href="https://mamedul.github.io/jquery-beforeafter-slider/">MAMEDUL ISLAM</a><br>
Credits: <a href="https://github.com/mamedul/jquery-beforeafter-slider" target="_blank">jQuery BeforeAfter Slider</a> plugin by <a href="https://mamedul.github.io/">MAMEDUL</a></p>
</body>
</html>