Карусель с использованием Materialize CSS
Materialize CSS — это библиотека компонентов пользовательского интерфейса, созданная и разработанная Google. Это язык дизайна, который сочетает в себе классические принципы успешного дизайна с инновациями и технологиями.
Функции:
- Отзывчивый внешний интерфейс CSS.
- Он не зависит от браузера.
- Расширяемый.
- Его можно использовать бесплатно.
- Его акцент делается на различных действиях и компонентах.
- Требуется использование библиотеки jQuery JavaScript.
В этой статье мы собираемся создать 3D-карусель, используя материализовать CSS, который очень интересен и прост в разработке. Карусель Materialize CSS — надежный и универсальный компонент. Он поддерживает сенсорное управление, что упрощает его использование на мобильных устройствах.
Синтаксис:
HTML
<div class="carousel"> <a class="carousel-item" href="#one!"> <img src=""> </a> <a class="carousel-item" href="#two!"> <img src=""> </a> <a class="carousel-item" href="#three!"> <img src=""> </a> <a class="carousel-item" href="#four!"> <img src=""> </a> <a class="carousel-item" href="#five!"> <img src="" ></a></div> |
jQuery/JavaScript для инициализации:
Javascript
document.addEventListener("DOMContentLoaded", function() { var elems = document.querySelectorAll(".carousel"); var instances = M.Carousel.init(elems, options);}); $(document).ready(function(){ $(".carousel").carousel();}); |
Пример 1: Используя приведенные выше фрагменты кода, мы можем легко создать нашу карусель, указав источник изображений и гиперссылки (при необходимости) для этих изображений. Давайте посмотрим на пример ниже.
Выход:
Ползунок полной ширины: таким же образом мы можем создать ползунок полной ширины, установив для параметра jQuery fullWidth значение true . У нас также могут быть индикаторы, которые отображаются внизу ползунка. Этот ползунок также совместим с сенсорным экраном.
Чтобы создать слайдер такого типа, у нас есть класс « carousel carousel-slider », и внутри этого div мы размещаем изображения, используемые для создания слайдера, как показано ниже.
HTML
<div class="carousel carousel-slider"> <a class="carousel-item" href="#one!"> <img src=""> </a> <a class="carousel-item" href="#two!"> <img src=""> </a> <a class="carousel-item" href="#three!"> <img src=""> </a> <a class="carousel-item" href="#four!"> <img src=""> </a></div> |
Скрипт jQuery будет изменен, как показано ниже.
Javascript
$(".carousel.carousel-slider").carousel({ fullWidth: true}); |
Пример 2:
Выход:
