jquery-beforeafter-slider
Version:
A responsive, touch-enabled, and highly customizable jQuery plugin to compare two images with a slider.
80 lines (70 loc) • 2.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 2 :: 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>
<!--<script src="https://unpkg.com/jquery-beforeafter-slider/beforeafter.jquery.js"></script>-->
</head>
<body>
<h1 style="text-align:center;">jQuery BeforeAfter Slider</h1>
<h2 style="text-align:center;">Example 2</h2>
<div style="max-width:96%; margin: 24px 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({
movable: true,
clickMove: true,
position: 60,
separatorColor: 'red',
bulletColor: 'red',
onMoveStart: function(e) {
console.log(event.target);
},
onMoving: function() {
console.log(event.target);
},
onMoveEnd: function() {
console.log(event.target);
},
});
</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({
movable: true,
clickMove: true,
position: 60,
separatorColor: 'red',
bulletColor: 'red',
onMoveStart: function(e) {
console.log(event.target);
},
onMoving: function() {
console.log(event.target);
},
onMoveEnd: function() {
console.log(event.target);
},
});
</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>