Карусель с несколькими рядами CSS Сетка - PullRequest
Новая
       10

Карусель с несколькими рядами CSS Сетка

0 голосов
/ 20 января 2020

Я пытаюсь сделать слайдер, подобный показанному на фотографии ниже, с CSS Grid и, возможно, JavaScript, но понятия не имею, как это сделать. В нем должно быть 4 карточки или фотографии с текстом, по которому можно щелкнуть по отдельности и связать с другой веб-страницей, но должны быть стрелки, позволяющие одновременно видеть четыре из этих изображений, а затем скользить по четырем другим изображениям.

Я попробовал с Bootstrap, но это не работает, потому что у меня не может быть двух рядов на одной и той же карусели, а также мне это не нравится, потому что я не могу поместить точные измерения заполнения, которые я хочу, в мой дизайн. Можно ли сделать это?

Дизайн слайд-шоу

enter image description here

1 Ответ

0 голосов
/ 20 января 2020

Из моих ограниченных знаний я могу дать вам css, и это все, извините. 

<style type="text/css">
.content,
.content1,
.content2,
.content3 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div,
.content1 div,
.content2 div,
.content3 div {
    height: 50%;
    width: 300px;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}
.yellow {
    background: yellow;
}
/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
</style>


<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
  <div class="yellow">4</div>
</div>

Это гибкая упаковка css; ему нужно будет go внутри контейнера div, с заданной высотой и шириной, заставить его разделиться на два ряда.

Я знаю, что это не все, но вы могли бы разбираться с этим с помощью JS et c и после того, как вы определите, какой ящик в JS, и дадите им идентификаторы, вы можете приступить к заполнению полей или что-то еще.

Надеюсь, вы получите свои плоды, удачи!

...