Нужно поставить стрелки справа и слева посередине баннера, но они находится под баннером
Делал без JS
Код:
HTML:
<body>
<nav class="navbar">
<div class="container">
<a href="#" class="navbar-brand">Город мастеров</a>
<div class="navbar-wrap">
<ul class="navbar-menu">
<li><a href="#">О нас</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="C:/Users/Denis/Desktop/Site/catalog/catalog.html">Каталог</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<p class="numberphone"> 8 (383) 375-20-55 <span class="hour">c 9 – 18 </span></p>
<a href="#" class="callback">Записаться на замер</a>
</div>
</nav>
<div class="all">
<input checked type="radio" name="respond" id="desktop">
<article id="slider">
<input checked type="radio" name="slider" id="switch1">
<input type="radio" name="slider" id="switch2">
<div id="slides">
<div id="overflow">
<div class="image">
<article>
<section id="main_banner">
<div class="container">
<div class="inner_banner">
<h1>Мы снизили цены!<br>Спешите оформить<br>заказ прямо сейчас!</h1>
<a href="#" class="btn btn_next">Узнать подробнее</a>
</div>
</div>
</section>
</article>
<article>
<section id="main_banner">
<div class="container">
<div class="inner_banner">
<h1>Мы снизили цены!<br>Спешите оформить<br>заказ прямо сейчас!</h1>
<a href="#" class="btn btn_next">Узнать подробнее</a>
</div>
</div>
</section>
</article>
</div>
</div>
</div>
<div id="controls">
<label for="switch1"></label>
<label for="switch2"></label>
</div>
</article>
</div>
</body>
CSS:
.navbar {
width: 100%;
height: 70px;
box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}
.navbar .container {
height: inherit;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-menu {
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
}
.navbar-menu li {
display: inline-block;
}
.navbar-menu li a {
display: inline-block;
color: #000;
opacity: 0.6;
text-decoration: none;
padding: 10px;
transition: all .07s ease-in-out;
}
.navbar-menu li a:hover {
opacity: 1;
}
.navbar-wrap {
display: flex;
flex-flow: row nowrap;
}
.callback {
margin-left: 20px;
padding: 12px 40px;
background-color: coral;
border-radius: 100px;
color: #fff;
text-decoration: none;
transition: all .1s ease-out;
}
.callback:hover {
transform: scale(1.04);
color: #fff;
}
.navbar-brand {
font-weight: 700;
font-size: 26px;
text-decoration: none;
color: #000;
}
.navbar-brand:hover {
color: coral;
transition: all .10s ease-in-out;
}
.numberphone {
text-decoration: none;
margin-top: 17px;
}
body {
position: relative;
font-family: 'Noto Sans', sans-serif;
font-size: 16px;
line-height: 1.4;
color: #000;
min-width: 320px;
overflow-x: hidden;
height: auto;
}
#main_banner {
padding: 95px 0;
background-repeat: no-repeat;
background-position: bottom right;
background-image: url(banner.png);
position: relative;
}
#main_banner .inner_banner >h1{
margin-bottom: 50px;
color: #000;
font-size: 57px;
font-weight: 600;
min-width: 838px;
line-height: 60px;
}
#main_banner .inner_banner >.btn{
padding: 9px 15px;
font-size: 24px;
}
.btn {
font-style: 16px;
color: white;
font-weight: 500;
padding: 9px 24px;
background-color: #000;
border-radius: 10px;
text-decoration: none;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.btn:hover {
background-color: #000;
color: #000;
}
.btn.btn_next {
background-color: rgb(255, 129, 25);
}
.btn.btn_next:hover {
background-color:rgb(255, 104, 49);
}
.container {
width: 85%;
margin: 0 auto;
}
#slider{
margin: 0 auto;
}
#slides article{
width: 20%;
float: left;
}
#slides .image{
width: 500%;
line-height: 0;
position: relative;
}
#overflow{
width: 100%;
overflow: hidden;
}
article img{
width: 100%;
}
#desktop:checked ~ #slider{
max-width: 1920px;
}
#switch1:checked ~ #controls label:nth-child(5),
#switch2:checked ~ #controls label:nth-child(1),
#switch5:checked ~ #controls label:nth-child(4){
background: url('prev.png') no-repeat;
float: left;
display: block;
height: 68px;
width: 68px;
margin-bottom: 300px;
position: absolute;
}
#switch1:checked ~ #controls label:nth-child(2),
#switch2:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(1){
background: url('next.png') no-repeat;
float: right;
margin-bottom: 300px;
display: block;
height: 68px;
width: 68px;
position: absolute;
}
label, a{
cursor: pointer;
}
.all input{
display: none;
}
#switch1:checked ~ #slides .image{
margin-left: 0;
margin-bottom: -25%;
}
#switch2:checked ~ #slides .image{
margin-left: -100%;
margin-bottom: -25%;
}
#slides {
position: relative;
}
#active label{
border-radius: 10px;
display: inline-block;
width: 15px;
height: 15px;
background: #bbb;
}
#controls{
position: relative;
width: 100%;
height: 50px;
}
#active label:hover{
background: #76c8ff;
border-color: #777 !important;
}
#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3),
#switch4:checked ~ #active label:nth-child(4),
#switch5:checked ~ #active label:nth-child(5){
background: #18a3dd;
border-color: #18a3dd !important;
}
#slides .image{
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.image {
position: relative;
}
#controls label:hover{
opacity: 0.6;
}
#controls label{
transition: opacity 0.2s ease-out;
}
