Ant - carousel

Компактная, но функциональная CSS-Javascript - карусель, автоматически подстраивается к любой ширине экрана. Может одновременно показывать один или более одного элемента (количество настраивается). Обладает опциями зацикливания (бесконечного цикла) и автоматической прокрутки, которые можно отключить. Если опция зацикливания отключена, автопрокрутка отключается также. Скорость анимации и интервал между прокрутками элементов можно изменять, указав значения в миллисекундах. Навигация осуществляется стрелками, точками навигации, перелистыванием (для тактильных экранов). Любой из элементов навигации можно отключить.

В HTML-разметке можно использовать как теги ul-li, так и div-div (или div-p).

<div class="ant-carousel">
  <div class="ant-carousel-hider">
    <ul class="ant-carousel-list">
      <li class="ant-carousel-element”>Элемент 1</li>
      <li class="ant-carousel-element”>Элемент 2</li>
      ...
      <li class="ant-carousel-element”>Элемент N</li>
    </ul>
  </div>
  <div class="ant-carousel-arrow-left"></div>
  <div class="ant-carousel-arrow-right"></div>
  <div class="ant-carousel-dots"></div>
</div>

Для настройки функциональности карусели используются следующие переменные:

В CSS-стилях нужно указать ширину элемента и максимальную ширину контейнера (с учётом того, что видимых элементов может быть несколько). Например, для трёх видимых элементов с шириной 270 px значения могут быть такими:

.ant-carousel {max-width: 810px; /*макс. ширина контейнера*/}
.ant-carousel-element { width: 270px; /*ширина элемента*/}

Предполагается, что все элементы имеют одинаковую ширину. Программой учитывается ширина только первого элемента. Желательно не использовать CSS-свойство margin, а использовать свойство padding, как на рисунке справа. Иначе при прокрутке могут наблюдаться небольшие рывочки. Зазоров между элементами не предусмотрено.

Разметка

Все элементы построены в горизонтальную линейку (контейнер с CSS-свойством display: flex).При прокрутке влево последний элемент справа клонируется и подставляется первым слева при одновременном смещении линейки влево на ширину элемента (CSS-свойство margin-left изменяется от 0 px до отрицательного значения, равного ширине элемента в пикселях). Далее осуществляется плавная прокрутка всей линейки вправо при помощи CSS-свойства transition с плавным изменением margin-left из отрицательного значения до нуля, после чего последний элемент справа удаляется. Прокрутка вправо происходит в обратном порядке. CSS transition-timing-function применяется значение ease, при желании можно поменять на linear или ease-in-out, внеся исправления в соответствующих местах программы. Если зацикливание отключено, клонирование и перестановка не применяются, вся линейка просто смещается влево или вправо до крайних точек.

Стили, как обычно, подключаются в заголовке. Скрипт карусели можно подключить по наступлению события onload или в конце HTML-разметки.

<html>
<head>
	…
<link rel="stylesheet" href="ant-files/ant-carousel-styles.css">
</head>
<body>
	…
	</footer>
<script src="ant-files/ant-carousel.js"></script>
<script>new Ant()</script>
</body>
</html>

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

<div class="ant-carousel" id=“first”>
	<!-- первая карусель -->
	…
<div class="ant-carousel" id=“second”>
	<!-- вторая карусель -->
	…
<script>new Ant(“first”); new Ant(“second”);</script>

Более подробное описание карусели находится в моём посте на HABRAHABR или на ITnan

Демонстрационный пример

Количество скачиваний:

Проверьте ваш IQ