Слайдер создает динамику на сайте и вызывают ощущение, что на сайте что-то происходит. Этим он привлекает внимание и подталкивает к дальнейшему просмотра контента сайта.
Можно купить и установить расширение, можно нанять программиста, но можно и самостоятельно бесплатно установить слайдер в шаблон Joomla, а сэкономленные средства вложить в пиво.
Первым делом идем на сайт-генератор слайдеров, где создаем свой слайдер для сайта.
Для своего сайта, для header настройки слайдера я выбрал такие:
Настройки устанавливаются для каждого слайда индивидуально!
Проверяем как работает при разной ширине экрана, скачиваем архив imageslidermaker.zip. Из архива открываем файл example.html в текстовом редакторе notepad++ и копируем блок слайдера:
Открываем index.php шаблона сайта Joomla и после тега </header> вставляем код слайдера, который был скопирован. Для класса header в css необходимо установить position: absolute; дабы слайдер был как фоновое изображение.
Все настройки слайдера прописаны в первой строке. В случае повторной генерации слайдера с другими настройками они изменятся и изменится файл стилей my-slider.css
Файл ism-2.2.min.js не меняется, и похоже на то, что в нем содержатся все возможные настройки.
Внизу страницы, перед тегом </html> добавляем загрузку скрипта и стилей слайдера. Обрати внимание на пути – у тебя они будут другими!
<link rel="stylesheet" href="ism/css/my-slider.css"/> <script src="ism/js/ism-2.2.min.js"></script>
Я сделал проще: содержимое файла ism-2.2.min.js добавил в template.js, а my-slider.css добавил в template.css, удалив ненужные мне стили – около 50% файла.
В случае добавления новых изображений для слайдера необходимо не только изменить html код, но и добавить новые стили в css: .ism-slide-0 – это первый слайд.
Используя .webp можно сократить размер файла фото на 20-30%
Комментарии
Спасибо за информацию!!!
RSS лента комментариев этой записи