Hot Swipe Carousel - Расширение Joomla

Hot Swipe Carousel - модуль, вращающий слайды, содержащие любую HTML информацию (изображения, текст и т.д.), он позволяет пользователям перетаскивать их на экране влево или вправо. Данный модуль позволяет создать до 20 слайдов. Так же можно использовать несколько экземпляров модуля на одной странице. Каждый слайд может содержать дополнительный заголовок. Вы можете включать и отключать навигационные элементы, такие как стрелки влево/вправо и точки. Модуль на 100% отзывчивый, благодаря чему изменяет свою ширину в соответствии с доступным экранным пространством. Кроме того, на маленьких экранах, где текст не может уместиться внутри изображения, он будет перенесен под изображением.

 

Описание расширения

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

Этот модуль Joomla позволяет создавать до 20 слайдов. Можно использовать несколько экземпляров этого модуля на той же странице. Как вы можете видеть в демо, модуль используется дважды для основного слайдера на верхней части страницы, и карусель Testimonials в нижней части экрана.

Каждый слайд может содержать дополнительный заголовок и любое содержимое HTML. Вы можете включать и отключать навигационные элементы, такие как стрелки влево / вправо и точек. Как вы, вероятно, предполагали, этот модуль 100% адаптивный. Он изменит свою ширину в зависимости от доступного пространства экрана. Кроме того, она изменит расположение на маленьких экранах, где текстовый блок не может поместиться внутри изображения. Текстовый блок будет перемещен ниже изображения на экранах, которые имеют ширину меньше, чем 600px (вы можете изменить пределы путем редактирования файла CSS).

Опции Hot Swipe Carousel:

Свойства модуля:

• Unique ID - Если вам нужно несколько экземпляров этого модуля на той же странице, каждый экземпляр должен иметь разные идентификаторы.
• Load jQuery and No Conflict Mode - Эти параметры должны быть отключены, если вы уже подгружаете JQuery в шаблон.
• Slides On Screen - Эти параметры должны быть отключены, если вы уже используете JQuery.
• Slide Width - Если вы выбрали Нестандартная ширина для параметра Slides On Screen вы можете ввести ширину слайдов здесь. Введите значение и единицы измерения, например, в 23% или 250px.
• Slide Margin - Если вы выбрали Нестандартная ширина для параметра Slides On Screen вы можете ввести маржу между слайдами здесь. Введите значение и единицы измерения, например, в 2% или 20px.
• Text Box Width - Если ваши слайды имеют текстовые блоки, это будет ширина блока в процентах. По умолчанию для экранов меньшего размера, чем 1024px, этот параметр будет автоматически устанавливается на 70%. Кроме того, для экранов меньшего размера, чем 600px, этот блок будет перемещен ниже изображения.
• Text Box Horizontal Position - Если выбран Full Width, только один слайд будет отображаться на экране одновременно. Если выбран вариант Custom Width, несколько слайдов будет отображаться на экране одновременно, и вы можете определить ширину слайдов и поля ниже.
• Center Text Box Horizontally - Включите эту опцию, если вы хотите чтоб текстовый блок автоматически центрировался на всех размерах экрана.
• Text Box Vertical Position - положение с верхней стороны границ модуля в пикселях. По умолчанию для экранов меньшего размера, чем 1024px, этот параметр будет автоматически установлен на 10px.
• Text Box Padding - Значение для заполнения внутри текстового блока в процентах.

Стилизация модуля:

• Text Box Background Color - Цвет фона текстового блока в формате RGB.
• Text Box Transparency - введите значение от 0 (полная прозрачность) и 1 (отсутствие прозрачности), чтобы установить прозрачность текстового блока.
• Text Color - Выберите цвет текста внутри текстового блока.
• Heading Text Size - Установить размер заголовков внутри текстового блока.
• Text Size - Установить размер обычного текста внутри текстового блока.

Навигация:

• Navigation Arrows - включение или отключение влево/вправо кнопки навигации (стрелки).
• Navigation Dots - Включение или отключение интерактивные точки, которые показывают количество слайдов и активный слайд.

Свойства анимации:

• Pause Between Slides - Введите значение в миллисекундах. Он будет использоваться для времени паузы между вращением слайдов. В примере, введите 5000 для паузы в 5 секунд на каждый слайд.

Настройки для каждого слайда:

Есть 20 слотов для ваших слайдов. Каждый слот может содержать различные изображения и HTML, который будет отображаться в окне содержимого.

• Publish This Slide - Слайд будет опубликован только если этот параметр включен.
• Select an Image - Эта кнопка открывает всплывающее окно, где вы можете загрузить и/или выбрать изображение для этого слайда.
• Image Alt Text - Alt текст, который описывает слайд-изображение.
• Slide Heading - текст заголовка вашего слайда. Он будет отображаться в окне содержимого.
• Slide Text - Текст или любой HTML-код для слайда. Оно также будет отображаться в окне содержимого.
• Slide Priority - Слайды с более высоким приоритетом отображаются перед слайдам с более низким приоритетом. В примере, слайд с значением приоритета 3 будет отображаться перед горкой с значением приоритета 7.

Поддержка для Retina экранов

Начиная с версии 3.5.1, модуль Hot Swipe Carousel поддерживает Retina экраны (экраны с двойной плотностью пикселей) в слайдах изображений и для изображений внутри текста слайда. Если вы хотите использовать эту функцию, вам необходимо подготовить две версии ваших изображений (нормальных и двойное разрешение). В примере, если у вас есть изображение с именем, как myimage.jpg, модуль будет проверять, если изображение myimage-2x.jpg существует в той же папке. Он будет показывать вместо этого изображение нормальное разрешение изображения, но только на Retina (двойная плотность пикселей) экранов. Так как нет особого значения показывать изображения с удвоенным разрешением на обычных экранах с одной плотностью пикселей. Модуль будет заботиться, чтобы показать соответствующие изображения на различных экранах.