это мой первый пост, надеюсь, я соблюдаю все правила. Если нет, прости!
Я пытаюсь создать адаптивный дизайн сайта со следующими характеристиками:
1. Большое фоновое изображение, которое не меняется
2. набор (еще не определенная сумма) радио (?) Кнопок ниже
-> кнопки должны быть взаимоисключающими
3. наложение изображения на некоторый текст, который изменяется при нажатии соответствующей радиокнопки
4. в мобильном режиме одновременно должны отображаться только две кнопки и появляются две стрелки для переключения между всеми возможными кнопками.
Моя проблема начинается с 4):
- У меня нет ни малейшего представления, с чего начать
- Я не знаю, есть ли название для этого типа поведения, о котором я просто никогда не слышал (что делает гугление немного сложным ^^)
Я думал о Flex-коробках, но все, что я мог сделать, это обернуть кнопки, но это не то же самое, что скрыть их.
Я также думал о том, чтобы заставить кнопки просто исчезать (отображение: нет), но я не очень уверен, как это сделать. (возможно, добавив дополнительные правила для классов начальной загрузки?)
Вдобавок ко всему, дизайн должен быть выложен таким образом, чтобы клиент мог решить, сколько кнопок будет, например. У меня нет возможности узнать заранее, сколько их, и я не могу сгруппировать их, добавив определенные классы.
Мой вопрос, увы, такой: могу ли я динамически вставлять переключатели на страницы слайдера, которые я могу прокручивать, но только если он находится на маленьком экране? (я думаю, это не простой вопрос CSS)
изменить: указанный вопрос
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://kit.fontawesome.com/82bfdd8cdc.js"></script>
</head>
<body>
<div class="">
<div class="bg-screen">
<img src="img/test.jfif" alt=" " class="bg-screen-img">
<div class="bg-screen-textarea">
</div>
<p class="bg-screen-text dummy"></p>
<div class="radio">
<label>
<input type="radio" name="radio" />
<div class="radio-box box-1">
<i class="fas fa-socks fa-3x"></i>
<span>Choice 1</span>
</div>
<div class="bg-screen-text text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla at volutpat diam ut venenatis tellus. Odio ut sem nulla pharetra diam sit
amet. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</div>
</label>
<label>
<input type="radio" name="radio" />
<div class="radio-box box-2">
<i class="fas fa-user-tie fa-3x"></i>
<span>Choice 2</span>
</div>
<div class="bg-screen-text text-2">Sit amet facilisis magna etiam tempor orci eu lobortis. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat.
</div>
</label>
<label>
<input type="radio" name="radio" />
<div class="radio-box box-3">
<i class="fas fa-building fa-3x"></i>
<span>Choice 3</span>
</div>
<p class="bg-screen-text text-3">Risus ultricies tristique nulla aliquet enim tortor at auctor urna.</p>
</label>
<label>
<input type="radio" name="radio" />
<div class="radio-box box-4">
<i class="fas fa-building fa-3x"></i>
<span>Choice 4</span>
</div>
<p class="bg-screen-text text-4">Fringilla ut morbi tincidunt augue. Velit euismod in pellentesque massa placerat duis ultricies lacus. </p>
</label>
<label>
<input type="radio" name="radio" />
<div class="radio-box box-5">
<i class="fas fa-building fa-3x"></i>
<span>Choice 5</span>
</div>
<p class="bg-screen-text text-5">Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam.</p>
</label>
</div>
</div>
</div>
</body>
</html>
input {
display: none;
}
input+div{
background: rgba(76, 175, 80, 0.3);
border: 1px solid grey;
}
input:checked+div {
background-color: green;
}
label {
display: inline-block;
margin: 0 1%;
}
/*removing clickability of text itself inside the labels for the radio-buttons*/
label span {
/* Firefox */
-moz-user-select: none;
/* Internet Explorer */
-ms-user-select: none;
/* KHTML browsers (e.g. Konqueror) */
-khtml-user-select: none;
/* Chrome, Safari, and Opera */
-webkit-user-select: none;
/* Disable Android and iOS callouts*/
-webkit-touch-callout: none;
}
label div i{
margin: 15% auto;
}
input:checked~.bg-screen-text {
display: inline-block;
margin: -25% 10%;
text-align: center;
color: white;
}
.bg-screen{
width: 100%;
text-align: center;
}
.bg-screen-img{
margin: 3% 7%;
height: 25%;
background-color: grey;
}
.bg-screen-text {
display: none;
position: absolute;
text-align: center;
left: 7%;
right:7%;
margin: 0 10%;
}
.radio {
position: relative;
top: -150px;
margin: 3% 7%;
text-align: center;
}
.radio-box {
position: relative;
height: 170px;
width: 170px;
display: inline-block;
text-align: center;
}
.radio-box span {
position: absolute;
transform: translate(0, 90px);
left: 0;
right: 0;
}