• 1894
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Побродив по просторам интернета ,на глаза попался вот этот слайдер,и сейчас мы установим его в вашем шаблоне.
Итак приступим.
1. Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем папки images, css и js в папку с нашим шаблоном.
2.В хеад main.tpl подключаем стили и скрипты

Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/default.css" />
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/component.css" />
<script src="{{ tpl_url }}/js/modernizr.custom.js"></script>
3.Перед закрытием тега body добавляем скрипты
Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{{ tpl_url }}/js/jquery.cbpFWSlider.min.js"></script>
<script>
$( function() {
/*
- how to call the plugin:
$( selector ).cbpFWSlider( [options] );
- options:
{
// default transition speed (ms)
speed : 500,
// default transition easing
easing : 'ease'
}
- destroy:
$( selector ).cbpFWSlider( 'destroy' );
*/
$( '#cbp-fwslider' ).cbpFWSlider();
} );
</script>
Если jquery уже подключен в шаблоне то второй раз подключать не надо.
4.Ну и сам код слайдера добавляем туда где хотим его видеть
Код:
<div id="cbp-fwslider" class="cbp-fwslider">
<ul>
<li><a href="#"><img src="{{ tpl_url }}/images/1.jpg" alt="img01"/></a></li>
<li><a href="#"><img src="{{ tpl_url }}/images/2.jpg" alt="img02"/></a></li>
<li><a href="#"><img src="{{ tpl_url }}/images/3.jpg" alt="img03"/></a></li>
<li><a href="#"><img src="{{ tpl_url }}/images/4.jpg" alt="img04"/></a></li>
<li><a href="#"><img src="{{ tpl_url }}/images/5.jpg" alt="img05"/></a></li>
</ul>
</div>
5.Ну вы можете подключить слайдер через плагин xnews подробнее здесь https://ngcmshak.ru/nastroika-plaginov/vyvodim-v-slaider-novosti-s-pomoszyu-plagina-xnews.html"]Выводим в слайдер новости с помощью плагина xnews[/url]
Вот и все пользуемся.

Можешь почитать и вот эту статейку "Notepad++ "

mistakes

Это тоже интересно

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

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element