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

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

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

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

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Обновленное

Теги

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

Статистика

  • Caйту: 4801 день
  • Новостей: 613
  • Комменты: 257
  • Зарегистрированно : 744
  • Онлайн всего: [20]
  • Гости: [20]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 31
  • Генерация страницы: 0.261сек
  • Потребление памяти: 5.170 Mb 
  •   Яндекс.Метрика