I'm looking to improve the scrolling functionality of this multi-item carousel. Currently, when clicked, it jumps to the next item instead of smoothly transitioning. I am seeking a way to make it transition or ease into the next section smoothly.
<style>
body {
width: 1400px;
}
.Blog {
position: relative;
background-color: #000;
}
.inner {
overflow: hidden;
font-size: 0;
white-space: nowrap;
}
.Blog-item {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display: inline-block;
}
.controlDiv {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
text-align: center;
}
.control {
color: #fff;
font-size: 20px;
display: inline-block;
padding: 4px;
}
</style>
<div class="Blog">
<div class="inner">
<div class="Blog-item" >
<img src="http://placehold.it/727x356?text=1" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=2" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=3" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=4" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=5" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=6" alt="" />
</div>
</div>
<div class="controlDiv">
<a class="control control-left glyphicon glyphicon-menu-left" href=""></a>
<a class="control control-right glyphicon glyphicon-menu-right" href=""></a>
</div>
</div>
<script>
$(document).ready(function () {
$('.control-right').click(function () {
$(this).blur();
$(this).parents('.Blog').find('.Blog-item').first().insertAfter($(this).parents('.Blog').find('.Blog-item').last());
return false;
});
$('.control-left').click(function () {
$(this).blur();
$(this).parents('.Blog').find('.Blog-item').last().insertBefore($(this).parents('.Blog').find('.Blog-item').first());
return false;
});
});
</script>
Check out the fiddle for a live demo: http://jsfiddle.net/bcw8dysawk/z1wo4uy6/3/