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

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

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

Можешь почитать и вот эту статейку "Сервис социального замка,социальных кнопок и плюшек для вашего сайта."

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

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Обновленное

Теги

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

Статистика

  • Caйту: 3297 дней
  • Новостей: 539
  • Комменты: 252
  • Зарегистрированно : 569
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.148сек
  • Потребление памяти: 4.935 Mb 
  •   яндекс.ћетрика