4268
- 0
Побродив по просторам интернета ,на глаза попался вот этот слайдер,и сейчас мы установим его в вашем шаблоне.
Итак приступим.
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>Код:
<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>
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>
Вот и все пользуемся.
Можешь почитать и вот эту статейку "С Наступающим Новым 2015 Годом"
Это тоже интересно
15.01.15Верстаем на Twitter Bootstrap
15.10.14Добавляем статус аськи на сайт
29.06.17Будем фиксировать менюшку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.