Меню

blazing responsive slider настройка

Blazing Responsive Slider

Бесплатный модуль адаптивного слайдера.

Этот слайдер отлично отображается как на компьютерах, так и на мобильных устройствах. 20 картинок, 27 эффектов переходов, возможность использования заголовков и ссылок, множество настроек, бесплатность — вот лишь некоторые его преимущества.

Настройки модуля Blazing Responsive Slider

Вкратце рассмотрю основные настройки этого абсолютно бесплатного модуля для создания адаптивного слайдера на Joomla 3.

Во вкладке «Модуль» располагаются следующие параметры:

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

Autoplay on mobile device — то же самое, но на мобильных устройствах. Видимо, создатели этого расширения Joomla 3 предусмотрительно подумали об этом, так как интернет на мобильных часто ограничен по трафику. Очень удобно.

Effects on slide — к какому из слайдеров будет применяться эффект перехода (к предыдущему, следующему или случайно).

Slides as link — будет ли каждая картинка в слайдере использоваться как ссылка.

Slide Duration — время в миллисекундах, на протяжении которого будет отображаться один слайд.

Animation Duration — сколько будет длиться эффект перехода.

Columns for images transitions — число колонок при трансформации (смене) изображений.

Rows for images transitions — то же самое только применительно к горизонтальным линиям.

Choose FX Effects — здесь можно выбрать, какие из 27 эффектов перехода между слайдами будут использоваться. У меня выбраны все существующие.

Grid Difference

Height — высота изображения (указывается в процентах относительно общего размера экрана).

Min. height — минимальная высота изображения в пикселях.

Pause on Hover — пауза при наведении.

Loader — элемент, показывающий время до загрузки следующего слайда (можно выбрать Bar — линия наверху, Pie — круглый загрузчик в левом нижнем углу или вообще отказаться от лоадера).

Bar direction — определяем направление движения линии лоадера (по умолчанию: слева направо). Работает только при выборе параметра Bar в предыдущем пункте.

Bar position — где расположится лоадер (если выбран Bar): наверху, внизу, справа или слева.

Pie diameter — диаметр круга загрузки в пикселях (используется если в качестве лоадера был выбран Pie).

Pie position — выбираем, где будет располагаться этот «загрузочный пирог»: справа наверху, слева наверху и т.д.

Loader color — цвет «бегущей» линии лоадера.

Loader background color — цвет фона лоадера.

Loader opacity — полупрозрачность лоадера (от 0 до 1).

Loader padding — отступ между линией загрузки и её фоном (указывается в пикселях).

Loader stroke — толщина всего лоадера в пикселях.

Navigation — здесь имеются ввиду только стрелки, листающие слайды вперёд или назад. Выбираем, отображать их или нет.

Navigation Hover — если активировать этот параметр, то стрелки будут появляться только при наведении курсора мыши.

Mobile Navigation Hover — то же самое только для мобильных устройств.

Play/Pause — показывать ли эту кнопку.

Opacity on grid — полупрозрачность на сетке. Сложновато вот так просто объяснить. Сам оставляю по умолчанию.

Читайте также:  epson l366 сброс настроек

Pagination — отображать ли нумерацию страниц (квадратики внизу).

Pause on click — слайдер останавливается, если по одной из картинок в нём кликнули.

Portrait mode — этот параметр позволяет запретить обрезку картинки (так называемый портретный режим). используя его в этом бесплатном адаптивном слайдере, придётся подгонять изображения для должного его отображения.

Slide caption bottom space — расстояние между надписью и слайдом.

Slide caption width — какой процент от общей ширины слайдера будет занимать надпись (по умолчанию — 50%).

Caption background color — цвет фона под надписью.

Caption Background opacity — полупрозрачность фона под надписью (от 0 до 1).

Caption text color — цвет самой надписи.

Caption padding — отступ от текста до края рамки надписи.

Caption Fx — выбираем, какие эффекты смены надписи будут использоваться на представленном демо выбран fadeln).

Buttons hover color — цвет навигационных кнопок при наведении курсора мыши.

Borders color — цвет их же рамки.

Responsive fullwidth fix — адаптивная полноэкранность. При включении слайдер расширится до размера всего экрана вне зависимости от того, в какой позиции он находится.

Всего в бесплатном адаптивном модуле Blazing Responsive Slider для Joomla 3 можно использовать 20 изображений (слайдов). Их можно выбрать и настроить во вкладках «Slides 1-10» и «Slides 11-20». Там мы выбираем картинку. Затем, если надо, вводим ссылку. Выбираем, как она будет открываться: в том же окне или в новом. Определяем надо ли отображать кнопку «Read More». И в поле Slide caption вводим сам заголовок слайда.

источник

Слайдер ResponsiveSlides. Установка и настройка

От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и на очереди у нас простой адаптивный слайдер — ResponsiveSlides.js. Попробуем познакомиться с документацией, а также установить и настроить слайдер ResponsiveSlides.js.

Итак, друзья, сегодня у нас на очереди один из моих любимых слайдеров — это слайдер ResponsiveSlides.js. Судя по названию, слайдер изначально адаптивный, и это на самом деле так, что является безусловным плюсом сегодня.

Кроме того, плагин ResponsiveSlides.js — это легковес. Текущая его версия (на момент написания статьи это версия 1.55) весит всего несколько килобайт. Что же мы получаем взамен расхода столь малого количества трафика? Полноценный слайдер, который имеет все необходимое: большое кол-во настроек, красивый эффект смены слайдов, элементы управления слайдами, ну и само-собой, адаптивность и совсем небольшой вес плагина.

Попробуем установить слайдер. Для этого нам необходимо скачать его с GitHub или же можете взять архив из исходников к уроку. Документация официального сайта подсказывает нам, что для работы слайдера необходима библиотека jQuery и, собственно, сам плагин responsiveslides.js (или его сжатая версия responsiveslides.min.js). Давайте подключим их.

Читайте также:  как сбросить настройки kde

Изучите основы JavaScript на практическом примере по созданию веб-приложения

источник

Blazing Responsive Slider — бесплатный модуль адаптивного слайдера для Joomla 3

Оценка на JED: в целом — 67 , функциональность — 78 , удобство использования — 91 , документация — 85 .

Сегодня я расскажу ещё об одном адаптивном слайдере для сайта на CMS Joomla 3. При достаточно разнообразном функционале и надёжности он полностью бесплатен. Несмотря на не самые высокие оценки в JED, на мой вкус, этот модуль очень даже неплох. Думаю, что такие оценки связаны прежде всего с неочевидными настройками, в которых придётся покопаться, чтобы понять, как они работают. Но это и к лучшему: чем менее популярен модуль, тем он уникальнее выглядит и интереснее само его использование.

Этот слайдер отлично отображается как на компьютерах, так и на мобильных устройствах. 20 картинок, 27 эффектов переходов, возможность использования заголовков и ссылок, множество настроек, бесплатность — вот лишь некоторые его преимущества.

Демо модуля Blazing Responsive Slider

Скриншоты настроек модуля Blazing Responsive Slider

Настройки модуля Blazing Responsive Slider

Вкратце рассмотрю основные настройки этого абсолютно бесплатного модуля для создания адаптивного слайдера на Joomla 3.

Во вкладке «Модуль» располагаются следующие параметры:

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

Autoplay on mobile device — то же самое, но на мобильных устройствах. Видимо, создатели этого расширения Joomla 3 предусмотрительно подумали об этом, так как интернет на мобильных часто ограничен по трафику. Очень удобно.

Effects on slide — к какому из слайдеров будет применяться эффект перехода (к предыдущему, следующему или случайно).

Slides as link — будет ли каждая картинка в слайдере использоваться как ссылка.

Slide Duration — время в миллисекундах, на протяжении которого будет отображаться один слайд.

Animation Duration — сколько будет длиться эффект перехода.

Columns for images transitions — число колонок при трансформации (смене) изображений.

Rows for images transitions — то же самое только применительно к горизонтальным линиям.

Columns for sliced images transitions

Rows for sliced images transitions

Choose FX Effects — здесь можно выбрать, какие из 27 эффектов перехода между слайдами будут использоваться. У меня выбраны все существующие.

Grid Difference

Height — высота изображения (указывается в процентах относительно общего размера экрана).

Min. height — минимальная высота изображения в пикселях.

Pause on Hover — пауза при наведении.

Loader — элемент, показывающий время до загрузки следующего слайда (можно выбрать Bar — линия наверху, Pie — круглый загрузчик в левом нижнем углу или вообще отказаться от лоадера).

Bar direction — определяем направление движения линии лоадера (по умолчанию: слева направо). Работает только при выборе параметра Bar в предыдущем пункте.

Bar position — где расположится лоадер (если выбран Bar): наверху, внизу, справа или слева.

Читайте также:  как настроить планшет престижио на заводские настройки

Pie diameter — диаметр круга загрузки в пикселях (используется если в качестве лоадера был выбран Pie).

Pie position — выбираем, где будет располагаться этот «загрузочный пирог»: справа наверху, слева наверху и т.д.

Loader color — цвет «бегущей» линии лоадера.

Loader background color — цвет фона лоадера.

Loader opacity — полупрозрачность лоадера (от 0 до 1).

Loader padding — отступ между линией загрузки и её фоном (указывается в пикселях).

Loader stroke — толщина всего лоадера в пикселях.

Navigation — здесь имеются ввиду только стрелки, листающие слайды вперёд или назад. Выбираем, отображать их или нет.

Navigation Hover — если активировать этот параметр, то стрелки будут появляться только при наведении курсора мыши.

Mobile Navigation Hover — то же самое только для мобильных устройств.

Play/Pause — показывать ли эту кнопку.

Opacity on grid — полупрозрачность на сетке. Сложновато вот так просто объяснить. Сам оставляю по умолчанию.

Pagination — отображать ли нумерацию страниц (квадратики внизу).

Pause on click — слайдер останавливается, если по одной из картинок в нём кликнули.

Portrait mode — этот параметр позволяет запретить обрезку картинки (так называемый портретный режим). используя его в этом бесплатном адаптивном слайдере, придётся подгонять изображения для должного его отображения.

Slide caption bottom space — расстояние между надписью и слайдом.

Slide caption width — какой процент от общей ширины слайдера будет занимать надпись (по умолчанию — 50%).

Caption background color — цвет фона под надписью.

Caption Background opacity — полупрозрачность фона под надписью (от 0 до 1).

Caption text color — цвет самой надписи.

Caption padding — отступ от текста до края рамки надписи.

Caption Fx — выбираем, какие эффекты смены надписи будут использоваться на представленном демо выбран fadeln).

Buttons hover color — цвет навигационных кнопок при наведении курсора мыши.

Borders color — цвет их же рамки.

Responsive fullwidth fix — адаптивная полноэкранность. При включении слайдер расширится до размера всего экрана вне зависимости от того, в какой позиции он находится.

Всего в бесплатном адаптивном модуле Blazing Responsive Slider для Joomla 3 можно использовать 20 изображений (слайдов). Их можно выбрать и настроить во вкладках «Slides 1-10» и «Slides 11-20». Там мы выбираем картинку. Затем, если надо, вводим ссылку. Выбираем, как она будет открываться: в том же окне или в новом. Определяем надо ли отображать кнопку «Read More». И в поле Slide caption вводим сам заголовок слайда.

Ссылки Blazing Responsive Slider — модуля бесплатного адаптивного слайдера

Официальное демо модуля Blazing Responsive SliderBlazing Responsive Slider

Страница модуля Blazing Responsive Slider в официальном каталоге расширений Joomla

Скачать модуль Blazing Responsive Slider с официального сайта

Скачать модуль Blazing Responsive Slider по прямой ссылке

источник

Добавить комментарий

Adblock
detector