Слайдер. Смена изображений

[batcave]

Здравствуйте. Проблема такая. Слайдер работает по нажатию на кнопки. Каждая кнопка - определенное изображение. Смена изображений осуществляется через css transition. Если нажать на кнопку во время того как происходит плавная смена - картинка поменяется резко. Можно ли запретить смену изображения во время перехода? Или лучше так чтобы нажатие на кнопку во время изменения создавало такой же плавный переход. Все реализовано одним дивом. Подозреваю что в этом случае может помочь только лишь еще один внутренний див

<div id="slider"></div>

<div id="buttons">
	<div class="button" data-num="1"></div>
	<div class="button" data-num="2"></div>
	<div class="button" data-num="3"></div>
</div>

* {
	margin: 0;
	padding: 0;
}
#slider {
	margin: 50px auto;
	width: 500px;
	height: 500px;
	border: 1px solid black;
	background-image: url(../images/1.jpg);
	transition: 1s;
	
}
#buttons {
	margin: 0 auto;
	width: 300px;
	height: 50px;
}
.button {
	float: left;
	margin-left: 10px;
	width: 50px;
	height: 30px;
	border: 1px solid black;
}

var buttons = document.getElementById('buttons');

for (var i = 0; i < buttons.children.length; i++) {
	buttons.children[i].addEventListener('click', changePic);	
}

function changePic() {
	document.getElementById('slider').style.backgroundImage = 'url(images/'+this.dataset.num+'.jpg)';
}