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

Подключаем интересный вариант слайдера в новость или ваш сайт

irbees2008 irbees2008 Опубликовано - 1 - декабря Слайдшоу и анимация
2984 - 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.Это расписан первый вариант,остальные смотрим исходники и делаем аналогично

Можешь почитать и вот эту статейку "HTML теги address"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 4493 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [43]
  • Гости: [42]
  • Users: [1] ????????? ?????
  • Были сегодня : [5] Google, Яндекс, dankeanke, ????????? ?????, irbees2008
  • SQL запросов: 30
  • Генерация страницы: 0.313сек
  • Потребление памяти: 5.363 Mb 
  •   Яндекс.Метрика