Слайдер с первым предметом большой на сове-карусели - PullRequest
Новая
       12

Слайдер с первым предметом большой на сове-карусели

0 голосов
/ 10 сентября 2018

У меня есть слайдер с 3 или более изображениями для загрузки. Этот контент динамический, но мне нужно, чтобы первый элемент всегда имел большой размер, например:

enter image description here

Как я мог сделать это с Совой-Каруселью? Я делаю это с фиксированными размерами, но когда пользователь загружает новое изображение, оно больше не работает и выглядит ужасно.

Спасибо за ваш совет!

1 Ответ

0 голосов
/ 18 сентября 2018

Вы можете сначала попытаться настроить свой CSS следующим образом: 

.owl-carousel{
    display: flex;
    flex-direction: row;
    max-width:100%;
    background-color: #a49e9e;
    height: 100%;
    justify-content: space-between;
}

.size625x488{
    width: 625px;
    height: 488px;
    background-color: #e7e7e7;
    margin: 1%;
}

._2ndColumn{
    width: 50%;
    background-color: #e7e7e7;
    margin: 1%;
    max-height: 100%;
}

.size462x216_1{
    background-color: #696868;
    width: 462px;
    height: 216px;
    margin: 1%;
}

.size462x216_2{
    background-color: #696868;
    width: 462px;
    height: 216px;
    margin: 1%;
    margin-top: 8%;
}

А твой html примерно такой 

<section class="wrapper">
  <div class="owl-carousels owl-themes" id="home-slider2">
    <div class="size625x488"> </div>
    <div class="_2ndColumn">
      <div class="size462x216_1"> </div>
      <div class="size462x216_2"> </div>
    </div>
  </div> <!--Display flex makes it easier to style-->
</section>
...