Хаки и Скрипты Next Generation CMS

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

irbees2008 irbees2008 Опубликовано - 27 - декабря Слайдшоу и анимация
2978 - 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
Вот и все пользуемся.

Можешь почитать и вот эту статейку "HTML теги address"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [8]
  • Гости: [7]
  • Поисковики: [1] Google
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 32
  • Генерация страницы: 0.128сек
  • Потребление памяти: 4.942 Mb 
  •   яндекс.ћетрика