Хаки и Скрипты Next Generation CMS : Слайдшоу и анимация : Подключаем интересный вариант слайдера в новость или ваш сайт

irbees2008 Опубликовано - 1 - декабря Слайдшоу и анимация

Адаптировал: 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.Это расписан первый вариант,остальные смотрим исходники и делаем аналогично

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

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

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