<div class="container">
	<div class="dots">
		<span class="dot dot1 active"></span><span class="dot dot2"></span>
		<span class="dot dot3"></span><span class="dot dot4"></span>
	</div>
	<div class="inner">
	<div><div class="box box1"></div></div>
	<div><div class="box box2"></div></div>
	<div><div class="box box3"></div></div>
	<div><div class="box box4"></div></div>
		</div>
</div>
html, body { height: 100%; background: #2A2D2D;}
* { box-sizing: border-box;}
body {  display: flex; justify-content: center; align-items: center;}

.container { width: 500px; height: 260px; position: relative; overflow: hidden;}
.inner {position: relative; width: 100%; height: 100%;  transition: all .8s ease-in-out;}

.box{ position: absolute; width: 100%; height: 100%;}
.box1 { left:0; background-image: url(https://unsplash.it/500/260/?random=1);}
.box2 { left:100%; background-image: url(https://unsplash.it/500/260/?random=2);}
.box3 { left:200%; background-image: url(https://unsplash.it/500/260/?random=3);}
.box4 { left:300%; background-image: url(https://unsplash.it/500/260/?random=4);}

.dots { position: absolute; bottom:10px; width: 100%; text-align: center; z-index:10; font-size: 0;}
.dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: .6; display:inline-block; margin:8px; cursor: pointer;}
.dot:hover, .dot.active {opacity: 1}
.dots.to1:hover + .inner { transform: translateX(0);}
.dots.to2:hover + .inner { transform: translateX(-500px);}
.dots.to3:hover + .inner { transform: translateX(-1000px);}
.dots.to4:hover + .inner { transform: translateX(-1500px);}
var $dots = $('.dots');

$('.dot').on('mouseenter', function(){
	var idx = $(this).index()+1;
	$dots.attr('class','dots to'+idx);
	$(this).addClass('active').siblings().removeClass('active');
})
Rerun