Как поставить стрелки по бокам?
Нужно поставить стрелки справа и слева посередине баннера, но они находится под баннером
Делал без 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> |
<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; } |
.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; }
Дополнительно:
#slider{ margin: 0 auto; position: relative; } #controls { height: 50px; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } |
#slider{ margin: 0 auto; position: relative; } #controls { height: 50px; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; }
Ответы:
Absolute кнопкам
Relative контейнеру
- Не работает, всё на своих местах осталось
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления стрелок по бокам вам необходимо использовать специальные символы или иконки. Вот несколько способов, как это можно сделать:
1. Используя символы:
- Для стрелки влево можно использовать символ < или <
- Для стрелки вправо можно использовать символ > или >
Пример использования символов в HTML:
<div> <span>< Назад</span> <span>Вперед ></span> </div>
2. Используя иконки:
Вы также можете использовать иконки из библиотеки иконок, такой как Font Awesome или Material Icons. Вам нужно будет подключить соответствующий файл CSS и использовать классы иконок для добавления стрелок.
Пример использования иконок из Font Awesome в HTML:
<div> <i class="fas fa-arrow-left"></i> <i class="fas fa-arrow-right"></i> </div>
3. Используя CSS:
Вы также можете создать собственные стили для стрелок с помощью CSS. Например, вы можете создать псевдоэлементы before и after и стилизовать их как стрелки.
Пример использования CSS для создания стрелок:
.arrow { position: relative; } .arrow::before { content: ""; position: absolute; right: -10px; }
Надеюсь, эти способы помогут вам добавить стрелки по бокам на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.