Слайдер для шаблона сайта Joomla

 Слайдер создает динамику на сайте и вызывают ощущение, что на сайте что-то происходит. Этим он привлекает внимание и подталкивает к дальнейшему просмотра контента сайта.

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

 Первым делом идем на сайт-генератор слайдеров, где создаем свой слайдер для сайта.

 Для своего сайта, для header настройки слайдера я выбрал такие:

Настройка слайдера на сайте: width:responsitive; height:160px

 Настройки устанавливаются для каждого слайда индивидуально!

 Проверяем как работает при разной ширине экрана, скачиваем архив 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%

slider joomla nemplate, слайдер для сайта, шаблон, css, js