Создать карусель изображений на JavaScript теперь легко!

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

Давайте изучим элемент управления JavaScript Carousel и его богатые возможности на примерах кода.

Содержание

Обзор
Основные возможности
Создание слайдов
Кнопки навигации
Кнопка воспроизведения/паузы
Индикаторы
Анимация и переходы
Пользовательские анимации
Соответствие стандарту WAI-ARIA и доступность клавиатуры
Ссылка
Заключение
Похожие блоги

Обзор

Элемент управления «Карусель» обеспечивает гибкость при создании слайдов и настройке их внешнего вида. Вы также можете пользоваться стандартными веб-функциями, такими как доступность, взаимодействие с клавиатурой и события.

Основные возможности

Ниже перечислены ключевые особенности элемента управления JavaScript Carousel:

Простота создания слайдов
Кнопки навигации
Кнопка воспроизведения/паузы
Индикаторы
Анимация и переходы
Соответствие стандарту WAI-ARIA и доступность клавиатуры

Создание слайдов

В элементе управления JavaScript Carousel вы можете легко создавать слайды и оформлять их содержимое. Затем назначьте их шаблону элементов карусели, чтобы отобразить их в виде слайд-шоу. Обратитесь к следующему примеру кода.

Import { Carousel } from “@syncfusion/ej2-navigations”;

const carouselObj = new Carousel({
 items: [
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/cardinal.png” alt=”cardinal” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Cardinal</figcaption></figure>’ },
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/hunei.png” alt=”kingfisher” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Kingfisher</figcaption></figure>’ },
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/costa-rica.png” alt=”keel-billed-toucan” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Keel-billed-toucan</figcaption></figure>’ },
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png” alt=”yellow-warbler” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Yellow-warbler</figcaption></figure>’ },
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/bee-eater.png” alt=”bee-eater” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Bee-eater</figcaption></figure>’ }
 ]
});
carouselObj.appendTo(“#carousel”);

Вход в полноэкранный режим Выход из полноэкранного режима

Кнопки навигации

Вы можете вручную выполнять переходы между слайдами с помощью кнопок навигации «Предыдущий» и «Следующий». Вы можете показывать или скрывать кнопки с помощью свойства buttonsVisibility с любым из следующих значений:

Hidden : Скрывает кнопки навигации.
Visible : Показывает кнопки навигатора.
VisibleOnHover : Отображает кнопки навигатора только при наведении мыши на карусель.

Используйте параметры шаблона для настройки кнопок навигации.

Для отображения кнопок навигации при наведении мыши на элемент управления «Карусель» см. следующий пример кода.

Import { Carousel } from “@syncfusion/ej2-navigations”; 
const carouselObj: Carousel = new Carousel({  
  buttonsVisibility: “VisibleOnHover”,  
  items: [
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/cardinal.png” alt=”cardinal” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Cardinal</figcaption></figure>’ },
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/hunei.png” alt=”kingfisher” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Kingfisher</figcaption></figure>’ },
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/costa-rica.png” alt=”keel-billed-toucan” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Keel-billed-toucan</figcaption></figure>’ },
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png” alt=”yellow-warbler” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Yellow-warbler</figcaption></figure>’ },
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/bee-eater.png” alt=”bee-eater” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Bee-eater</figcaption></figure>’ }  
  ]});
carouselObj.appendTo(“#carousel”);

Вход в полноэкранный режим Выход из полноэкранного режима

Кнопка воспроизведения/паузы

Кнопка воспроизведения используется для управления функцией автовоспроизведения слайдов. Вы можете показать или скрыть и настроить кнопку воспроизведения с помощью свойств showPlayButton и playButtonTemplate соответственно.

См. следующее изображение.

Индикаторы

Индикаторы помогают нам отображать общее количество слайдов и активный в данный момент слайд в «Карусели». Вы можете показывать или скрывать индикаторы с помощью свойства showIndicators. Отображать предварительный просмотр слайда или миниатюры в индикаторах с помощью свойства indicatorsTemplate.

См. следующее изображение.

Примечание: Для получения более подробной информации обратитесь к примерам шаблонов в элементе управления JavaScript Carousel.

Анимация и переходы

Вы можете наслаждаться переходами при навигации по слайдам с помощью встроенных эффектов анимации слайдов и перекрестного перехода.

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

Вы можете включить или отключить бесконечные переходы слайдов с помощью свойства loop.

Вы также можете использовать свойство pauseOnHover для воспроизведения или приостановки слайдов при наведении указателя мыши на элемент «Карусель».

Пользовательские анимации

Помимо встроенных эффектов анимации слайдов, вы также можете настроить эффекты анимации.

Примечание: Для получения более подробной информации обратитесь к пользовательской анимации в документации JavaScript Carousel.

Соответствие стандарту WAI-ARIA и доступность клавиатуры

Элемент управления «Карусель» был создан на основе спецификаций, ролей, состояний и свойств WAI-ARIA. Он также имеет поддержку клавиатуры. Это будет полезно для людей, использующих вспомогательные устройства.

Вы можете легко взаимодействовать с элементом управления JavaScript «Карусель», используя следующие сочетания клавиш:

Клавиша	Функциональные возможности
Клавиши со стрелками	Перемещение между слайдами.
Главная	Переход к первому слайду.
Конец	Переход к последнему слайду.
Пробел	Воспроизведение или приостановка переходов слайдов.
Enter	Выполнение соответствующего действия при наведении фокуса.

Ссылка

Для получения более подробной информации обратитесь к документации «Начало работы с элементом управления JavaScript Carousel» и онлайн-демонстрациям.

Заключение

Спасибо за чтение! В этом блоге мы рассмотрели основные возможности нашего элемента управления JavaScript Carousel. Элемент управления «Карусель» также доступен в наших платформах Angular, Blazor, React, Vue, ASP.NET (Core и MVC), WinForms, WPF, Xamarin и UWP. Используйте его в своем приложении и наслаждайтесь удобной навигацией по слайдам!

Если вы уже являетесь пользователем Syncfusion, вы можете загрузить настройку продукта или загрузить бесплатную 30-дневную пробную версию, чтобы оценить наши продукты.

По вопросам обращайтесь к нам через форумы поддержки, портал поддержки или портал обратной связи. Мы будем рады помочь вам в любое время!