Адаптация размера слайдера карусели, включая текст и картинки - PullRequest
0 голосов
/ 01 апреля 2020

Я создал новостной слайдер для нашей веб-страницы, используя карусель. Каждый слайд в карусели содержит рисунок (все отдельные рисунки имеют одинаковую ширину), заголовок и текст с индивидуальной длиной. В настоящее время я пытаюсь сделать так, чтобы все слайды автоматически имели одинаковый размер в зависимости от объема текста. Я вроде как добавляю пару пустых строк в поля меньшего размера, однако это сильно зависит от масштаба используемой открытой страницы / устройства и не является разумным решением. Я надеялся, что, возможно, у кого-то может быть идея, как решить эту проблему, поскольку я действительно новичок в html.

Код внутри основного документа:

  <section class="carousel">
    <div class="reel">
      <!-- Beginning   -->
      <article> <a class="twitter-timeline" data-height="420" href="TwitterLink"

          target="_blank"> Tweets by Name</a>
        <script async="" src="TwitterLink" charset="utf-8"></script>
      </article>
      <article> <a href="" class="image featured"><img src="images/News/ImageName.png"></a>
        <header>
          <h3>Some random header</h3>
        </header>
        <p align="justify">some random text<br>
        </p>
      </article>
    </div>
  </section>

и выдержка из файла css

.carousel {
    position: relative;
    overflow: hidden;
    padding: 2em 0 2em 0;
    margin-top: 0;
}

    .carousel .reel {
        white-space: nowrap;
        position: relative;
        -webkit-overflow-scrolling: touch;
        padding: 0 2em 0 2em;
    }

    .carousel article {
        display: inline-block;
        width: 18em;
        background: #fff;
        text-align: center;
        padding: 0 1em 3em 1em;
        margin: 0 2em 0 0;
        white-space: normal;
        opacity: 1.0;
        height: auto;
        -moz-transition: opacity 0.75s ease-in-out;
        -webkit-transition: opacity 0.75s ease-in-out;
        -ms-transition: opacity 0.75s ease-in-out;
        transition: opacity 0.75s ease-in-out;
    }

Заранее спасибо за любую помощь! Чао, Лузия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...