Js карусель: Как сделать Адаптивное слайд-шоу или Карусель

179 просмотров

Карусель · Bootstrap v4.6

Посмотреть на GitHub Оригинал

Компонент слайд-шоу для циклического просмотра элементов — изображений или текстовых слайдов — например, карусели.

Как это работает

Карусель — это слайд-шоу для циклического просмотра серии контента, созданного с помощью преобразований CSS 3D и небольшого количества JavaScript. Он работает с серией изображений, текста или пользовательской разметки. Он также включает поддержку предыдущего/следующего элементов управления и индикаторов.

В браузерах, где поддерживается API видимости страницы, карусель не будет скользить, когда веб-страница не видна пользователю (например, когда браузер вкладка неактивна, окно браузера свернуто и т.д.).

Имейте в виду, что вложенные карусели не поддерживаются, а карусели обычно не соответствуют стандартам доступности.

И, наконец, если Вы создаете наш JavaScript из исходного кода, он требует util.js.

Пример

Карусели не нормализуют автоматически размеры слайдов. Таким образом, Вам может потребоваться использовать дополнительные утилиты или настраиваемые стили для соответствующего размера содержимого.

Класс .active необходимо добавить к одному из слайдов , иначе карусель не будет видна. Также не забудьте установить уникальный id в .carousel для дополнительных элементов управления, особенно если Вы используете несколько каруселей на одной странице. Элементы управления и индикаторы должны иметь атрибут

Только слайды

Вот карусель только со слайдами. Обратите внимание на наличие .d-block и .w-100 на изображениях карусели, чтобы предотвратить выравнивание изображений по умолчанию в браузере.

PlaceholderПервый слайд

PlaceholderВторой слайд

PlaceholderТретий слайд

<div data-ride="carousel">
  <div>
    <div>
        <img src=". .." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
</div>

С элементами управления

Добавление предыдущего и следующего элементов управления. Мы рекомендуем использовать элементы <button>, но вы также можете использовать элементы <a> c role="button".

PlaceholderПервый слайд

PlaceholderВторой слайд

PlaceholderТретий слайд

<div data-ride="carousel">
  <div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <button type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Предыдущий</span>
  </button>
  <button type="button" data-target="#carouselExampleControls" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Следующий</span>
  </button>
</div>

С индикаторами

Вы также можете добавить индикаторы в карусель вместе с элементами управления.

PlaceholderПервый слайд

PlaceholderВторой слайд

PlaceholderТретий слайд

<div data-ride="carousel">
  <ol>
    <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <button type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Предыдущий</span>
  </button>
  <button type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Следующий</span>
  </button>
</div>

С подписями

Легко добавляйте подписи к слайдам с помощью элемента . carousel-caption внутри любого .carousel-item. Их можно легко скрыть на небольших окнах просмотра, как показано ниже, с помощью дополнительных утилит дисплея. Сначала мы скрываем их с помощью .d-none и возвращаем их на устройства среднего размера с помощью .d-md-block.

Метка первого слайда

Некоторый репрезентативный заполнитель для первого слайда.

Метка второго слайда

Некоторый репрезентативный заполнитель для второго слайда.

Метка третьего слайда

Некоторый репрезентативный заполнитель для третьего слайда.

<div data-ride="carousel">
  <ol>
    <li data-target="#carouselExampleCaptions" data-slide-to="0"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div>
    <div>
      <img src=". .." alt="...">
      <div>
        <h5>Метка первого слайда</h5>
        <p>Некоторый репрезентативный заполнитель для первого слайда.</p>
      </div>
    </div>
    <div>
      <img src="..." alt="...">
      <div>
        <h5>Метка второго слайда</h5>
        <p>Некоторый репрезентативный заполнитель для второго слайда.</p>
      </div>
    </div>
    <div>
      <img src="..." alt="...">
      <div>
        <h5>Метка третьего слайда</h5>
        <p>Некоторый репрезентативный заполнитель для третьего слайда.</p>
      </div>
    </div>
  </div>
  <button type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Предыдущий</span>
  </button>
  <button type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Следующий</span>
  </button>
</div>

Перекрестное затухание

Добавьте . carousel-fade в свою карусель, чтобы анимировать слайды с плавным переходом вместо слайда. В зависимости от содержимого вашей карусели (например, слайды, содержащие только текст), вы можете добавить .bg-body или какой-нибудь пользовательский CSS к .carousel-item для правильного плавного перехода.

PlaceholderПервый слайд

PlaceholderВторой слайд

PlaceholderТретий слайд

<div data-ride="carousel">
  <div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <button type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Предыдущий</span>
  </button>
  <button type="button" data-target="#carouselExampleFade" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Следующий</span>
  </button>
</div>

Индивидуальный интервал

. carousel-item

Добавьте data-interval="" в .carousel-item, чтобы изменить время задержки между автоматическим циклическим переходом к следующему элементу.

PlaceholderПервый слайд

PlaceholderВторой слайд

PlaceholderТретий слайд

<div data-ride="carousel">
  <div>
    <div data-interval="10000">
      <img src="..." alt="...">
    </div>
    <div data-interval="2000">
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <button type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Предыдущий</span>
  </button>
  <button type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Следующий</span>
  </button>
</div>

Отключить сенсорное смахивание

Карусели поддерживают смахивание влево / вправо на устройствах с сенсорным экраном для перемещения между слайдами. Это можно отключить с помощью атрибута data-touch. Пример ниже также не включает атрибут data-ride и имеет data-interval="false", поэтому он не запускается автоматически.

PlaceholderFirst slide

PlaceholderSecond slide

PlaceholderThird slide

<div data-touch="false" data-interval="false">
  <div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <button type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Предыдущий</span>
  </button>
  <button type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Следующий</span>
  </button>
</div>

Применение

Через атрибуты данных

Используйте атрибуты данных, чтобы легко контролировать положение карусели. data-slide принимает ключевые слова prev или next, которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы, используйте data-slide-to, чтобы передать необработанный индекс слайда в карусель data-slide-to="2", который сдвигает положение слайда на конкретный индекс, начинающийся с 0.

Атрибут data-ride="carousel" используется для пометки карусели как анимированной, начиная с загрузки страницы. Если Вы не используете data-ride="carousel" для инициализации карусели, Вам придется инициализировать ее самостоятельно. Его нельзя использовать в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели.

Через JavaScript

Вызов карусели вручную с помощью:

$('.carousel').carousel()

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-interval="".

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения. Кроме того, вызов метода переходного компонента будет проигнорирован.

Дополнительную информацию см. в нашей документации по JavaScript.

Инициализирует карусель необязательным параметром object и начинает циклический просмотр элементов.

$('.carousel').carousel({
  interval: 2000
})

Перебирает элементы карусели слева направо.

Останавливает карусель от циклического перебора элементов.

Циклически переключает карусель на определенный кадр (на основе 0, аналогично массиву). Возврат к вызывающей стороне до того, как целевой элемент будет показан (то есть до того, как произойдет событие slid.bs.carousel).

Переход к предыдущему элементу. Возврат к вызывающему абоненту до того, как будет показан предыдущий элемент (то есть до того, как произойдет событие slid. bs.carousel).

Переход к следующему элементу. Возврат к вызывающей стороне до того, как будет показан следующий элемент (т.е. до того, как произойдет событие slid.bs.carousel).

Разрушает карусель элемента.

Не циклически переходите к следующей карусели, если страница не отображается или карусель или ее родительский элемент не видны. Возврат к вызывающей стороне до того, как будет показан следующий элемент (т.е. до того, как произойдет событие slid.bs.carousel).

Циклически переключает карусель на определенный кадр (на основе 0, аналогично массиву). Возврат к вызывающей стороне до того, как будет показан следующий элемент (т.е. до того, как произойдет событие slid.bs.carousel).

События

Класс карусели Bootstrap предоставляет два события для подключения к функциональности карусели. Оба события имеют следующие дополнительные свойства:

• direction: Направление, в котором движется карусель ("влево" или "вправо").
• relatedTarget: Элемент DOM, который вставляется на место в качестве активного элемента.
• from: Индекс текущего элемента
• to: Индекс следующего элемента

Все события карусели запускаются в самой карусели (т.е. в <div>).

$('#myCarousel').on('slide.bs.carousel', function () {
  // сделайте что-нибудь...
})

Изменить продолжительность перехода

Длительность перехода . carousel-item может быть изменена с помощью переменной Sass $carousel-transition перед компиляцией или пользовательскими стилями, если Вы используете скомпилированный CSS. Если применяется несколько переходов, убедитесь, что сначала определен переход преобразования (например, transition: transform 2s ease, opacity .5s ease-out).

🔥 7 потрясающих библиотек каруселей JavaScript

Привет всем 👋

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

^{Источник: css-tricks. com}

Начнем!

1. Glide.js

Слайдер и карусель JavaScript ES6 без зависимостей. Он легкий, гибкий и быстрый. Предназначен для скольжения. Не меньше, не больше.

Ссылка: glidejs.com
Демо: glidejs.com/docs

2. Splide

Splide — это легкий, мощный и гибкий слайдер и карусель, написанный на чистом JavaScript без каких-либо зависимостей. Он небольшого размера, менее 29КБ (11 КБ в сжатом виде). Он также имеет такие функции, как гибкий и расширяемый, несколько слайдов, адаптивные и поддерживающие точки останова, прием относительных единиц CSS, таких как vw, %, rem и т. д.

Демонстрация: splidejs.com/thumbnail-slider

3. Swiper

Swiper — это самый современный бесплатный мобильный сенсорный слайдер с аппаратным ускорением переходов и потрясающим собственным поведением. Он предназначен для использования на мобильных веб-сайтах, мобильных веб-приложениях и мобильных нативных/гибридных приложениях, но мы также можем использовать его на рабочем столе в качестве слайдера-карусели.

Ссылка: swiperjs.com
Демонстрация: swiperjs.com/demos

4. Flickity

Flickity — это великолепная сенсорная, отзывчивая библиотека каруселей с возможностью перелистывания. Его легко использовать. Flickity делает карусели, галереи и слайдеры живыми и легкими.

Ссылка: flickity.metafizzy.co
Демонстрация: flickity.metafizzy.co/#feature-showcase

5. Glider.js

Невероятно быстрый, невероятно маленький, полностью отзывчивый, удобный для мобильных устройств, свободный от зависимостей собственный прокручиваемый список с элементами управления пейджингом. Glider.js сохраняет возможность использовать встроенную прокрутку, создавая естественное ощущение на любом устройстве с сенсорным экраном, при этом обеспечивая базовую эстетику и функциональность карусели (отлично подходит для рабочего стола!)

Ссылка: nickpiscitelli. github.io/Glider.js
Демо: nickpiscitelli.github.io/Glider.js/#demos

7. Embla Carousel

Легкая карусельная библиотека с плавным движением и высокой точностью пролистывания. Создавайте потрясающие карусели, расширяя Embla Carousel собственными CSS и JavaScript.

Ссылка: embla-carousel.com
Демо: embla-carousel.com/examples/basic

7. Tiny Slider 2

Крошечный слайдер для любых целей, вдохновленный Owl Carousel. Owl Carousel был карусельным слайдером на основе jQuery, который сейчас УСТАРЕЛ. Крошечный слайдер имеет удивительные функции, такие как цикл, перемотка назад, слайдер, желоб, отзывчивость, отложенная загрузка и многое другое.

Ссылка: ganlanyuan.github.io/tiny-slider
Демонстрация: ganlanyuan.github.io/tiny-slider/demo

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

Есть ли другая независимая карусельная библиотека JavaScript, которую вы хотели бы использовать для этой цели? Пожалуйста, добавьте их в комментариях ниже. Это очень помогло бы.

Если вам понравилась эта статья, обязательно поставьте ❤.

Приятного программирования!

10+ каруселей JavaScript (последняя коллекция)

JavaScript | Обновлено 4 марта 2022 г.

Последняя и уникальная коллекция отобранных вручную бесплатных примеров каруселей JavaScript с кодами. Обновлено в марте 2022 года.