Cara Membuat Slider Perbandingan Gambar Responsif Dengan CSS dan Javascript

Slider Perbandingan Gambar adalah cara yang bagus untuk menyajikan gambar sebelum dan sesudah perubahan, terutama terjadi ketika perbedaan yang sangat kecil. Slider perbandingan bukanlah hal yang baru. Bahkan ada implementasi CSS murni yang merupakan karya master sejati. Slider ini dibuat oleh Ege Görgülü Slider ini dapat digunakan di mana saja karena memiliki tampilan responsif.

Pertama Siapkan file HTML seperti ini, anda bisa mengubah url gambarnya.

<div class="ba-slider">
<img src="http://i.imgur.com/BIHN8KQ.jpg">
<div class="resize">
<img src="http://i.imgur.com/nS6dvpq.jpg">
</div>
<span class="handle"></span>
</div> 

Kemudian kita tambahkan css.

.ba-slider {
position: relative;
overflow: hidden;
}
 
.ba-slider img {
width: 100%;
display:block;
}
 
.ba-slider .resize {
position: absolute;
top:0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
} 

Untuk mengatur agar responsif tambahkan, javascript.

// Call & init
$(document).ready(function(){
$('.ba-slider').each(function(){
var cur = $(this);
// Adjust the slider
var width = cur.width()+'px';
cur.find('.resize img').css('width', width);
});
});

Tambahkan interaksi

.handle {
position:absolute;
left:50%;
top:0;
bottom:0;
width:4px;
margin-left:-2px;
 
background: rgba(0,0,0,.5);
cursor: ew-resize;
}
 
.handle:after {
position: absolute;
top: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
 
content:'\21d4';
color:white;
font-weight:bold;
font-size:36px;
text-align:center;
line-height:64px;
background: #ffb800; /* @orange */
border:1px solid #e6a600; /* darken(@orange, 5%) */
border-radius: 50%;
transition:all 0.3s ease;
box-shadow:
0 2px 6px rgba(0,0,0,.3),
inset 0 2px 0 rgba(255,255,255,.5),
inset 0 60px 50px -30px #ffd466; /* lighten(@orange, 20%)*/
}
 
.handle.draggable:after {
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
line-height:50px;
font-size:30px;
} 

Tambahkan javascript berikut.

function drags(dragElement, resizeElement, container) {
// Initialize the dragging event on mousedown.
dragElement.on('mousedown touchstart', function(e) {
dragElement.addClass('draggable');
resizeElement.addClass('resizable');
// Check if it's a mouse or touch event and pass along the correct value
var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
// Get the initial position
var dragWidth = dragElement.outerWidth(),
posX = dragElement.offset().left + dragWidth - startX,
containerOffset = container.offset().left,
containerWidth = container.outerWidth();
// Set limits
minLeft = containerOffset + 10;
maxLeft = containerOffset + containerWidth - dragWidth - 10;
// Calculate the dragging distance on mousemove.
dragElement.parents().on("mousemove touchmove", function(e) {
// Check if it's a mouse or touch event and pass along the correct value
var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
leftValue = moveX + posX - dragWidth;
// Prevent going off limits
if ( leftValue < minLeft) {
leftValue = minLeft;
} else if (leftValue > maxLeft) {
leftValue = maxLeft;
}
// Translate the handle's left value to masked divs width.
widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
// Set the new values for the slider and the handle.
// Bind mouseup events to stop dragging.
$('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function () {
$(this).removeClass('draggable');
resizeElement.removeClass('resizable');
});
$('.resizable').css('width', widthValue);
}).on('mouseup touchend touchcancel', function(){
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
e.preventDefault();
}).on('mouseup touchend touchcancel', function(e){
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
} 

Terakhir untuk memanggil fungsi drag.

// Call & init
$(document).ready(function(){
$('.ba-slider').each(function(){
var cur = $(this);
// Adjust the slider
var width = cur.width()+'px';
cur.find('.resize img').css('width', width);
// Bind dragging events
drags(cur.find('.handle'), cur.find('.resize'), cur);
});
});
 
// Update sliders on resize.
// We all do it: i.imgur.com/YkbaV.gif
$(window).resize(function(){
$('.ba-slider').each(function(){
var cur = $(this);
var width = cur.width()+'px';
cur.find('.resize img').css('width', width);
});
}); 

Selesai, kita tinggal menyimpan dan melihat hasilnya. Semoga tutorial ini membantu.