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

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

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

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

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

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

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

 Проверяем как работает при разной ширине экрана, скачиваем архив imageslidermaker.zip. Из архива открываем файл example.html в текстовом редакторе notepad++ и копируем блок слайдера:

<div class="ism-slider" data-transition_type="fade" data-play_type="loop" data-buttons="false" id="slider-header">
  <ol>
    <li>
      <img src="/templates/vodkomoto/ism/image/001.jpg">
      <div class="ism-caption ism-caption-0">На катере</div>
    </li>
    <li>
      <img src="/templates/vodkomoto/ism/image/002.jpg">
      <div class="ism-caption ism-caption-0">На автомобиле</div>
    </li>
    <li>
      <img src="/templates/vodkomoto/ism/image/003.jpg">
      <div class="ism-caption ism-caption-0">На мотоцикле</div>
    </li>
    <li>
      <img src="/templates/vodkomoto/ism/image/004.jpg">
      <div class="ism-caption ism-caption-0">На автодоме</div>
    </li>
  </ol>
 </div>

 Открываем index.php шаблона сайта Joomla и после тега </header> вставляем код слайдера, который был скопирован. Для класса header в css необходимо установить position: absolute; дабы слайдер был как фоновое изображение.

 Все настройки слайдера прописаны в первой строке. В случае повторной генерации слайдера с другими настройками они изменятся и изменится файл стилей my-slider.css

 Внизу страницы, перед тегом </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% файла.

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

Комментарии  

0 #1 Жумлавод 12.02.2023 15:53

Спасибо вам! Обыскался везде платные расширения а оказалось что можно все самому сделать - как я понял ничего сложного.
Спасибо за информацию!!! Буду осваивать.

Обновить список комментариев
RSS лента комментариев этой записи

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