//////////// Cмещение блока с картинками ////////////
let left = 0
////////////////////////////////////////////////////////
/////////////////////////// значение счетчика картинока //////////
let numberCounter = 1
//////////////////////////////////////////////////////////////////
//////////////// Главные объекты сайта //////////////////
let slider = document.querySelector('.slider')
let buttonNext = document.querySelector('.buttonNext')
let buttonBack = document.querySelector('.buttonBack')
let counter = document.querySelector('#counter')
/////////////////////////////////////////////////////////
/////////////// Стандартное значение счетчика картинок /////////////
counter.innerHTML = numberCounter + '/4';
////////////////////////////////////////////////////////////////////
//////////// Логика кнопок ///////////////////////////////////////
buttonNext.addEventListener('click', function(){
left += 700; /// смещение блока с картинками /////
numberCounter += 1; ///////// значение счетчика картинок ////////
counter.innerHTML = numberCounter /////
if(left > 2100){
left = 0;
}
if(numberCounter > 4){
numberCounter = 1;
}
slider.style.left = -left + 'px'; /// смещение блока с картинками ////////
counter.innerHTML = numberCounter + '/4'; /////// добавление в счетчик картинок /////////
})
buttonBack.addEventListener('click', function(){
left -= 700;
numberCounter -= 1;
if(left < 0){
left= 2100;
}
if(numberCounter < 1){
numberCounter = 4;
}
slider.style.left = -left + 'px'
counter.innerHTML = numberCounter + '/4';
})
///////////////////////////////////////////////////////////////////////
//////////////////// Значение меню выбора темы //////////////
let cars = document.querySelector('#cars') // 0 (index) //
let sea = document.querySelector('#sea') // 1 (index) //
let desert = document.querySelector('#desert') // 2 (index) //
let forest = document.querySelector('#forest') // 3 (index) //
//////////////////////////////////////////////////////////
/////////////////// Выбор темы ///////////////////////
const select = document.querySelector('.select')
//////////////////////////////////////////////////////
///////// Стандартное значение выбора темы/////////
select.selectedIndex = 0
select.style.background = 'red'
///////////////////////////////////////////////
///////////// условия для выбора значение в select ////////////////////
select.onchange = function() {
if (select.selectedIndex == 0){
select.style.background = 'red'
}
else if (select.selectedIndex == 1){
select.style.background = '#1E90FF'
}
else if (select.selectedIndex == 2){
select.style.background = '#F0E68C'
}
else if (select.selectedIndex == 3){
select.style.background = '#008000'
}
}
/////////////////////////////////////////////////////////////////////////