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

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

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

Можешь почитать и вот эту статейку "Плагин NSM - добавление новостей с сайта"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 3785 дней
  • Новостей: 561
  • Комменты: 254
  • Зарегистрированно : 619
  • Онлайн всего: [40]
  • Гости: [39]
  • Поисковики: [1] Google
  • Были сегодня : [3] dankeanke, Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.33сек
  • Потребление памяти: 5.165 Mb 
  •   яндекс.ћетрика