Cacher is the code snippet organizer for pro developers

/*
 * @Properties - свойства for(i in train){ console.log([i])}
 * @Methods - методы      for(i in train.style){ console.log([i])};
 * @developments - события
*/

var i = 0;

var doc = document;
var buttBack = doc.querySelector("#callery .bottons .back");
var buttForward = doc.querySelector("#callery .bottons .forward");

/*array*/
var image = doc.querySelectorAll("#callery #photos img");
// image[0].style.width = "869px";
photos.style.marginLeft = "0px";
photos.style.width = image[0].width * image.length  + "px";




// buttBack.onclick = function(){
// 	image[i].style.display = 'none';
// 	i--;

// 	if (i < 0) {i = image.length - 1;};

// 	image[i].style.display = 'block';
// }


// buttForward.onclick = function(){
// 	image[i].style.display = 'none';
	
// 	i++;

// 	if (i >= image.length) {i = 0;};

// 	image[i].style.display = 'block';

// }

// callery.scrollLeft += 869
var f = 10;
function scroll(){
	if (f < image[0].width) {
		callery.scrollLeft = f + 2 ;
		f += 10;
	}
	setTimeout(scroll, 5);
	f++;
}
	



// var h = parseFloat(photos.style.width);

// function scroll(){
// 	if (image[0].width <= parseFloat(photos.style.width)) {
		
// 		callery.scrollLeft += f;

    
// 	if (i < 0) { 

//         setTimeout(scroll, 1000);
// 	}

// 	i++;
// 	}
// };



var g = 0;

buttBack.onclick = function(){
	g--;
	if (photos.style.marginLeft != "0px") photos.style.marginLeft = parseFloat(photos.style.marginLeft) - -image[0].width + "px";
	if (photos.style.marginLeft === "0px") g = 0; 
	 // photos.style.marginLeft = -image[0].width * image.length + image[0].width + "px";
}



buttForward.onclick = function(){
	g++;
	if (g <= image.length) photos.style.marginLeft = -image[0].width * g + "px";
	if (g >= image.length) photos.style.marginLeft = "0px";
	if (photos.style.marginLeft === "0px") g = 0;
}