Как сделать что бы при определенном размере экрана выполнялся код (JS)?

Question

[Artyom Arutyunyann]

Здравствуйте, вопрос следующий, есть "слайдер" в котором 3 картинки , объяснить мне тяжело лучше гляньте код.

<div class="slider">
<div class="band">
<img src="img1" alt="">
<img src="img2" alt="">
<img src="img3" alt="">
<img src="img4" alt="">
<img src="img5" alt="">
<img src="img6" alt="">
</div>
</div>

.slider{
max-width: 1200px;
margin: 0 auto;
border: 5px solid red;
}

.band{
max-width: 2400px;
}

.band img{
float: left;
}

.band::after{
content: '';
display: block;
clear: both;
}

Там еще стрелочки, думаю понятно будет это.
В JS нахожу все через всем известный "querySelector", и пишу следующий код.

var cNum = 0;
function cRight(){
	cNum = cNum + 400;// width одной картинке
	if(cNum == 1600){
		cNum = 0;
	}
	cBand.style.left = '-' + cNum + 'px';
}

function cLeft(){
	cNum = cNum - 400; // width одной картинке
	if(cNum < 0){
		cNum = 0;
	}
	cBand.style.left = '-' + cNum + 'px';
}

Так вот мой вопрос, можно ли при размере экрана 1200px, сделать так что бы картинок в экране было 2 и как...?

ps если найдете ошибку в коде(HTML , CSS) извините писал тут , а вот Js скопировал у себя.
Заранее спасибо.

Comments

[ediboba]

Вот тут решение Тык

[Rerurk]

Картинок 6 же а не 3 ? А если из будет 40 ? Что будете делать? На все писать теги?