EvanBrown,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.roulette-inner img.active{
border: 5px solid #FF00FF;
border-radius: 3px;
}
.roulette-inner{
display: flex;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
$(function() {
var option = {
speed: 2,
duration: 3,
stopImageNumber: 0
};
$("#go").click(function() {
var len = $(".roulette-inner img").length;
var width = $(".roulette-inner img:first").width();
var widthTotall = len * width;
$('#go').prop('disabled', true);
option.stopImageNumber = Math.random() * len|0;
$(".roulette-inner img").removeClass("active");
$("#config").text(JSON.stringify(option));
$({
left: 0
}).animate({
left: widthTotall * option.speed
}, {
duration: option.duration * 1000,
easing: "easeOutCirc",
step: function(a) {
$(".roulette-inner").css("transform", "translateX(-" + (a % widthTotall)+ "px)");
},
complete: function() {
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");
$('#go').prop('disabled', false);
}
});
})
});
</script>
</head>
<body>
<div class="roulette" style="overflow: hidden; height: 300px; width: 1000px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 10000px;">
<img src="https://picsum.photos/100/100?1">
<img src="https://picsum.photos/100/100?2">
<img src="https://picsum.photos/100/100?3">
<img src="https://picsum.photos/100/100?4">
<img src="https://picsum.photos/100/100?5">
<img src="https://picsum.photos/100/100?6">
<img src="https://picsum.photos/100/100?7">
<img src="https://picsum.photos/100/100?8">
<img src="https://picsum.photos/100/100?9">
</div>
</div>
</br>
<div class=button style="position: relative; height: 150px; wigth: 1000px;">
<button id="go" class="btn btn-primary py-3 px-4">Lets Start</button>
</div>
<div id="config"></div>
</body>
</html>