Hello. Recently I received a code, it works on the site, but for some reason when I put it on my site it no longer works. Please look can find something. I'm breaking my head for the second day.
html code:
var gallery = { cnt: 0, container: document.getElementById("container_image"), timer: null, rds: "btn1", pos: 0, top: 1, init: function(i) { this.cnt = i; this.container.style.width = i * 700 + "px"; this.timer = setInterval(function() { gallery.start(); }, 1500); }, start: function() { if (this.top == 1) { this.pos = 0; this.top += 1; document.getElementById("btn1").style.backgroundColor = "red"; document.getElementById("btn2").style.backgroundColor = "green"; document.getElementById("btn3").style.backgroundColor = "green"; } else if (this.top == 2) { this.pos -= 350 * 2; this.top += 1; document.getElementById("btn1").style.backgroundColor = "green"; document.getElementById("btn2").style.backgroundColor = "red"; document.getElementById("btn3").style.backgroundColor = "green"; } else if (this.top == 3) { this.pos -= 350 * 2; this.top = 1; document.getElementById("btn1").style.backgroundColor = "green"; document.getElementById("btn2").style.backgroundColor = "green"; document.getElementById("btn3").style.backgroundColor = "red"; } this.container.style.left = this.pos + "px"; }, slide: function(event) { var e = event || window.event; var target = e.target; if (target.tagName.toLowerCase() != "span") return; var id_click = target.id; var pos = document.getElementById(id_click).offsetLeft; if (id_click == "btn1") pos = 0; else if (id_click == "btn2") pos -= 526 * 2; else if (id_click == "btn3") pos -= 593 * 3; else pos = 247; this.container.style.left = pos + "px"; } } #container { position: absolute; margin: 0 auto; width: 780px; height: 280px; padding-left: 160px; } .prev { float: left; width: 5%; height: 50%; background: red; cursor: pointer; } .photo { float: left; width: 780px; height: 280px; background: yellow; overflow: hidden; } .next { float: left; width: 5%; height: 50%; background: red; cursor: pointer; } .prev:hover, .next:hover { background: green; } .container-photo { width: 780px; height: 280px; -webkit-transition: all 1s; transition: all 1s; position: relative; } .image-block { width: 780px; height: 280px; float: left; background: pink; z-index: 1; } .clear { clear: both; } .rds { padding: 10px; line-height: 150%; width: 100%; text-align: center; } .rds-bl { width: 15px; height: 15px; border-radius: 50%; cursor: pointer; margin: 4px; background: green; display: inline-block; } <!DOCTYPE HTML> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>--------------------</title> <meta charset="utf-8"> <link rel="icon" href="images/icon.png" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="container/swap.css"> <script type="text/javascript" src="container/swap.js"></script> <script> window.onload = function() { gallery.init(3); } </script> </head> <body> <div id="container"> <div class="photo"> <div class="container-photo" id="container_image"> <div class="image-block" id="image_block"> <span>Здесь может быть image, ссылки и прочее #1</span> </div> <div class="image-block"> <span>Здесь может быть image, ссылки и прочее #2</span> </div> <div class="image-block"> <span>Здесь может быть image, ссылки и прочее #3</span> </div> <div class="clear"></div> </div> </div> <div class="clear"></div> <div class="rds" onclick="gallery.slide(event)"> <span class="rds-bl" id="btn1"></span> <span class="rds-bl" id="btn2"></span> <span class="rds-bl" id="btn3"></span> </div> </div> </body> </html> Here is a screen from the site: 
But nothing revolves on the site, nothing happens. If you expand the block, it turns out that all the display blocks are built vertically.
