Tiny Carousel Horizontal Slider — простая карусель для сайта

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

Для этих целей очень удобен плагин карусели Tiny Carousel Horizontal Slider (есть также версия этого плагина, в которую добавлена возможность поставить ссылки на изображения — Tiny carousel horizontal slider plus).

Установить эту карусель на сайт очень просто. Устанавливаем плагин. Заходим в меню: Настройки — Tiny сarousel, и на появившейся странице нажимаем Add New (добавить новую).

car2

Далее настраиваем карусель:

  • Image width (отображаемая ширина каждой картинки на сайте);
  • Image height (высота картинки);
  • Controls (показывать стрелки справа и слева от карусели; для этого надо установить значение True);
  • Auto interval (нужна ли пауза между движением картинок);
  • Interval time (продолжительность паузы в миллисекундах);
  • Animation Duration (продолжительность анимации (движения картинки) в миллисекундах);
  • Random display (показывать картинки в случайном порядке);
  • Image folder location (папка с картинками). Плагин не позволяет загружать картинки на сайт. Вам нужно самостоятельно создать новую папку на хостинге (или использовать существующую) и указать путь к ней. Например, если вы в корне сайта создали папку carusel и загрузили картинки в нее, то в этом поле нужно указать — carusel/.

После выполнения настроек для их сохранения жмем Update Details.

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

car3

В самом плагине может оказаться недостаточно настроек, например, нельзя указать цвет стрелок или убрать рамку вокруг карусели. Если вы разбираетесь в css, то такие настройки довольно легко изменить. Для этого нужно открыть файл плагина tiny-carousel-horizontal-slider.php (он находится в папке plugins/tiny-carousel-horizontal-slider) и там найти нужные вам свойства и откорректировать их.

Оцените статью
Делаем сайт своими руками
Добавить комментарии