Как добавить многостолбцовый текст переменной длины в качестве слайда в карусель slick.js - PullRequest
Новая
       6

Как добавить многостолбцовый текст переменной длины в качестве слайда в карусель slick.js

0 голосов
/ 15 февраля 2019

Для проекта мне нужно создать слайдер, который берет изображения, локальные видео и текст, который будет загружен из файла json.Слайды имеют фиксированную высоту, и содержание должно измениться, чтобы соответствовать этому.Текст будет многостраничным документом и должен разделяться на несколько столбцов при достижении высоты.

Я использую скользкий ползунок в качестве основы с атрибутом переменной ширины.Элемент text использует стили столбцов.Пример можно найти здесь .Работает только в Firefox. 

$(".your-class").slick({
  dots: false,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});
.text-container {
  height: 600px;
  width: 1000px;

}
.text-item {
  max-height: 100%;
  text-align: justify;
  column-count: auto;
  column-width: 300px;
  column-fill: auto;
}
<div class="your-class">
  <div class="text-container">
    <div class="text-item">
      --Long text that doesn't fit into one column--
    </div>
  </div>
  <img class="item" alt="" src="https://picsum.photos/200/300" />
  <img class="item" alt="" src="https://picsum.photos/400/300" />
  <img class="item" alt="" src="https://picsum.photos/600/300" />
</div>

Без ширины в текстовом контейнере следующий слайд начинается с ширины столбца вместо текстового блока.Как заставить slick.js использовать полный многостолбцовый текст, не зная полной ширины?

...