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

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

irbees2008 irbees2008 Опубликовано - 27 - декабря Слайдшоу и анимация
3856 - 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 тег br /"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

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

Теги

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

Статистика

  • Caйту: 4077 дней
  • Новостей: 564
  • Комменты: 256
  • Зарегистрированно : 644
  • Онлайн всего: [3]
  • Гости: [3]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 32
  • Генерация страницы: 0.369сек
  • Потребление памяти: 5.167 Mb 
  •   Яндекс.Метрика