• 1373
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Вот предлагаю вам интересный слайдер для вашего сайта.Эта реализация украсит ваш сайт.
Итак приступим к установке на ваш сайт
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>
3.Вот сам код нашего слайдера ,его помещаем туда где хотим видеть
Код:
<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>
4.Перед закрытием тега body подключаем скрипты
Код:
<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>
5.Это расписан первый вариант,остальные смотрим исходники и делаем аналогично

Можешь почитать и вот эту статейку "С Днём Победы !"

mistakes

Это тоже интересно

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

Ваше мнение

Вы нашли что искали?
Результаты

Облако тегов

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