Слайдер создает динамику на сайте и вызывают ощущение, что на сайте что-то происходит. Этим он привлекает внимание и подталкивает к дальнейшему просмотра контента сайта.
Можно купить и установить расширение, можно нанять программиста, но можно и самостоятельно бесплатно установить слайдер в шаблон Joomla, а сэкономленные средства вложить в пиво.
Первым делом идем на сайт-генератор слайдеров, где создаем свой слайдер для сайта.
Для своего сайта, для header настройки слайдера я выбрал такие:
Настройки устанавливаются для каждого слайда индивидуально!
Проверяем как работает при разной ширине экрана, скачиваем архив 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% файла.
Комментарии
Спасибо за информацию!!!
RSS лента комментариев этой записи