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

<link rel="stylesheet" type="text/css" href="{{ tpl_tpl }}/css/mockup1.css" />
		<script src="{{ tpl_tpl }}/js/modernizr.custom.js"></script>

<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>

<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>