Пример

HTML

<button id="click1">none</button>

<div id="colect_imgs">
	<div class="imgs_slide">
		<img class="" src="https://historytime.ru/wp-content/uploads/2016/10/%D0%B2%D0%BE%D0%BB%D0%BA-770x481.jpg">
	</div>
	<div class="imgs_slide">
		<img class="" src="http://www.astromeridian.ru/assets/images/sonnik/volk.jpg">
	</div>
	<div class="imgs_slide">
		<img class="" src="http://лесные.рф/upload/000/u1/de/d3/volk-photo-bigger.jpg">
	</div>
</div>

CSS

#colect_imgs {
	height: 130px;
	width: 750px;
	border: 2px solid black;
	position: relative;
}

.imgs_slide {
	width: 250px;
	height: 130px;
	float: left;
	display: block;
	overflow: hidden;
}

.imgs_slide img {
	//position: absolute;
	display: block;
	width: 250px;
	height: 130px;
}

JavaScript

var collection_imgs = document.getElementsByClassName('imgs_slide');
var click1 = document.getElementById('click1');
var j = 0;

function delayedAlert() { setTimeout(zaderjka, 1000); }

function zaderjka(){
	if (collection_imgs[j].style.width == "0px") {
		collection_imgs[j].style.cssText='display: none;';
	}
	return j++;
}

function slidesOut(){
	var i;
  (function next(n){
    if(n<0) {
    	zaderjka();
    	return;
    }
    collection_imgs[n].style.cssText=' width: 0px; transition: 1s;';
    setTimeout(next, 860, --n);
  })(collection_imgs.length - 1);
}

click1.onclick = slidesOut;