3242
- 0
Вот предлагаю вам интересный слайдер для вашего сайта.Эта реализация украсит ваш сайт.
Итак приступим к установке на ваш сайт
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем и заливаем папки в папку с ваши шаблоном.
2.В хеад main.tpl подключаем стили и шрифты
Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_tpl }}/css/mockup1.css" />
<script src="{{ tpl_tpl }}/js/modernizr.custom.js"></script>Код:
<div class="mockup">
<img class="mockup__img" src="img/mockup.jpg" />
<div id="mobile" class="mobile">
<ul id="slideshow" class="slideshow">
<li class="slideshow__item"><img src="{{ tpl_tpl }}/img/small/1.png" /></li>
<li class="slideshow__item"><img src="{{ tpl_tpl }}/img/small/2.png" /></li>
<li class="slideshow__item"><img src="{{ tpl_tpl }}/img/small/3.png" /></li>
<li class="slideshow__item"><img src="{{ tpl_tpl }}/img/small/4.png" /></li>
</ul>
</div>
<header class="codrops-header">
<h1><span>Mockup</span> Slideshow <i>Анимированное слайдшоу</i></h1>
</header>
</div>
Код:
<script src="{{ tpl_tpl }}/js/classie.js"></script>
<script src="{{ tpl_tpl }}/js/main.js"></script>
<script>
(function() {
new Slideshow( document.getElementById( 'slideshow' ) );
/* Mockup responsiveness */
var body = docElem = window.document.documentElement,
wrap = document.getElementById( 'wrap' ),
mockup = wrap.querySelector( '.mockup' ),
mockupWidth = mockup.offsetWidth;
scaleMockup();
function scaleMockup() {
var wrapWidth = wrap.offsetWidth,
val = wrapWidth / mockupWidth;
mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';
}
window.addEventListener( 'resize', resizeHandler );
function resizeHandler() {
function delayed() {
resize();
resizeTimeout = null;
}
if ( typeof resizeTimeout != 'undefined' ) {
clearTimeout( resizeTimeout );
}
resizeTimeout = setTimeout( delayed, 50 );
}
function resize() {
scaleMockup();
}
})();
</script>Можешь почитать и вот эту статейку "полноэкранный фон на JQuery"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.