Carousel Slider Block for Gutenberg v2.0.6

Адаптивный современный слайдер-карусель для редактора блоков Gutenberg, который позволяет добавлять к слайдам любые блоки.

Вторая версия слайдера-карусели уже здесь! Теперь работа на базе Swiper.js обеспечивает более плавную, быструю и современную работу. Инструкции по обновлению смотрите ниже.

Особенности

- Добавляйте неограниченное количество слайдов.

- Добавляйте блоки на слайды.

- Предварительный просмотр карусели в редакторе.

- Адаптивный дизайн и сенсорное управление.

Настройки

- Слайдов за просмотр

- Слайды для одновременной прокрутки

- Скорость скольжения

- Слайд-дополнение

- Стрелки "Предыдущий/следующий"

- Точечная навигация

- Бесконечная петля скольжения

- Автозапуск

- Адаптивные настройки: слайды для отображения и прокрутки при заданном размере экрана.

- РТЛ

Требования

Рекомендуется PHP 5.6+, WordPress 5.8+ с активным Гутенбергом.

Документация

Выберите блок "Слайдер карусели" в категории "Дизайн". Нажмите кнопку +, расположенную в конце карусели, чтобы добавить слайды. Добавьте любой блок на слайды. Используйте горизонтальную полосу прокрутки для предварительного просмотра слайдов в редакторе.

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

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

Нажмите блок "Карусель" (блок, в который входят все слайды), чтобы отобразить настройки карусели.

Слайдер-карусель, версия 2

Carousel Slider v2 теперь использует Swiper.js вместо Slick. Он более современен, лучше поддерживается и работает более плавно на всех устройствах.

Обновление с предыдущей версии Carousel

- Существующие блоки слайдера-карусели предыдущей версии (v1) по-прежнему будут работать. Вы можете повторно включить их в настройках администратора в разделе "Настройки" → "Слайдер-карусель".

- Чтобы обновить, щелкните устаревший блок слайдера-карусели в редакторе. На панели инструментов блока (плавающая панель, которая появляется над блоком) щелкните значок блока (первая кнопка слева). В раскрывающемся списке выберите "Преобразовать в слайдер-карусель v2". Существующие настройки карусели будут сохранены, но учтите, что дизайн и HTML-разметка изменятся.

- Устаревшие стили не будут применяться к версии 2. Возможно, вам придется настроить собственный CSS.

Необязательно: повторно включите устаревшие блоки.

Вы можете показать/скрыть устаревшие блоки из средства вставки блоков и отключить уведомления об обновлении версии 2 через "Настройки" → "Слайдер-карусель" в меню администратора.

Примечание. Устаревшие блоки продолжат работать, но больше не поддерживаются. Настоятельно рекомендуется выполнить обновление до версии 2 для дальнейшего улучшения и совместимости.

Настройка стилей версии 2

Carousel Slider v2 поддерживает настраиваемый стиль с помощью переменных CSS:

Навигация

- --wp--custom--carousel-block--navigation-size: размер значка стрелки.

- --wp--custom--carousel-block--navigation-sides-offset: расстояние от края

- --wp--custom--carousel-block--navigation-color: цвет стрелки.

- --wp--custom--carousel-block--navigation-hover-color: цвет стрелки при наведении (возврат к цвету навигации)

- --wp--custom--carousel-block--navigation-alignfull-color: цвет стрелки, когда карусель имеет полную ширину.

Разбивка на страницы (точки)

- --wp--custom--carousel-block--pagination-top: смещение сверху

- --wp--custom--carousel-block--pagination-bottom: нижнее смещение

- --wp--custom--carousel-block--pagination-bullet-size: Размер маркера

- --wp--custom--carousel-block--pagination-bullet-active-color: активный цвет маркера.

- --wp--custom--carousel-block--pagination-bullet-inactive-color: неактивный цвет маркера.

- --wp--custom--carousel-block--pagination-bullet-inactive-hover-color: цвет неактивного маркера при наведении (возврат к активному цвету, если установлен)

- --wp--custom--carousel-block--pagination-bullet-active-opacity: активная непрозрачность маркера.

- --wp--custom--carousel-block--pagination-bullet-inactive-opacity: неактивная непрозрачность маркера.

- --wp--custom--carousel-block--pagination-bullet-inactive-hover-opacity: неактивная непрозрачность маркера при наведении (возврат к неактивной непрозрачности, если не установлена)

- --wp--custom--carousel-block--pagination-bullet-horizontal-gap: пространство между маркерами (по горизонтали).

- --wp--custom--carousel-block--pagination-bullet-vertical-gap: пространство между маркерами (по вертикали).

Интервал между блоками

- --wp--custom--carousel-block--image-margin-top: верхнее поле для блоков изображений.

- --wp--custom--carousel-block--image-margin-bottom: нижнее поле для блоков изображений.

- --wp--custom--carousel-block--cover-margin-top: верхнее поле для блоков обложки.

- --wp--custom--carousel-block--cover-margin-bottom: нижнее поле для блоков обложек.

Поддержка JSON темы

Все переменные CSS также можно определить непосредственно внутри файла theme.json вашей темы с помощью ключа settings.custom.

Например:

{
"настройки": {
"обычай": {
"блок-карусель": {
"navigation-size": "22px",
"navigation-color": "000",
"pagination-bullet-active-color": "000"
}
}
}
}