#errorBlock { display: none; } /* это скрипт работающей шапки, на случай отказа от бутстрапа nav{ background: #000; padding: 15px 10px; color: #fff; font-family: 'Segoe UI', sans-serif; text-align: center; } nav li{ display: inline-block; vertical-align: top; } nav a{ color: #fff; padding: 5px 10px; text-decoration: none; border: 1px solid transparent; transition: 0.3s; } nav a:hover{ border: 1px solid #fff; } input[type="checkbox"] { display: none; } nav label { display: none; border: 1px solid #fff; padding: 5px 10px; cursor: pointer; transition: 0.3s; } nav label:hover{ color: #f00; border: 1px solid #f00; } @media screen and (max-width: 500px) { nav label{ display: inline-block; } nav > ul { display: none; } input[type="checkbox"]:checked ~ label + ul { display: block; } } */ /*Ниже стили для слайдера*/ #viewport { width: 100%; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-align: center; } #slidewrapper { position: relative; width: calc(100% * 28); /*28- изменить цифру при добавлении в слайдер фото*/ -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: cubic-bezier(.67,.01,.23,1); -o-transition-timing-function: cubic-bezier(.67,.01,.23,1); transition-timing-function: cubic-bezier(.67,.01,.23,1); } #slidewrapper, #slidewrapper ul, #slidewrapper li { margin: 0; padding: 0; } .slide { width: calc(100%/28); /*28- изменить цифру при добавлении в слайдер фото*/ list-style: none; display: inline; float: left; } .slide-img { width: 100%; } #prev-btn, #next-btn { position: absolute; width: 25px; height: 25px; background-color: #fff; border-radius: 50%; top: calc(50% - 25px); } #prev-btn:hover, #next-btn:hover { cursor: pointer; } #prev-btn { left: 20px; } #next-btn { right: 20px; } #nav-btns { position: absolute; width: 100%; bottom: 20px; padding: 0; margin: 0; text-align: center; } .slide-nav-btn { position: relative; display: inline-block; list-style: none; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; margin: 3px; } .slide-nav-btn:hover { cursor: pointer; }