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

Интересный адаптивный слайдер

irbees2008 irbees2008 Опубликовано - 28 - апреля Слайдшоу и анимация
2916 - 0
  • Автор: Codrops
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Вот попался на глаза довольно интересный адаптивный слайдер.И сейчас распишу подробно как его настроить для ng.
Итак приступим .
1.Скачиваем архивВы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с шаблоном.
но сперва посмотрите что бы файлы не заменили другие файлы в вашем шаблоне.
2.Подключаем стили и шрифты в main.tpl пред закрытием тега head,последнее на ваше усмотрение

Код:
<link rel="stylesheet" type="text/css" href="{tpl_url}/css/component.css" />
<script src="{tpl_url}/js/modernizr.custom.js"></script>
3.Теперь сам слайдер ,размещаем там где хотим его видеть
Код:
<div class="slideshow" id="slideshow">
<ol class="slides">
<li class="current">
<div class="description">
<h2>Tilted Content Slideshow</h2>
<p>This slider, as seen on the landing page of the <a href="http://www.thefwa.com/">FWA</a>, plays with 3D perspective and performs some interesting animations on the right-hand side images.</p>
</div>
<div class="tiltview col">
<a href=""><img src="img/1_screen.jpg"/></a>
<a href=""><img src="img/2_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>CSS Animations</h2>
<p>We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called <code>data-effect-in</code> and <code>data-effect-out</code> for every slide. </p>
</div>
<div class="tiltview row">
<a href=""><img src="img/3_mobile.jpg"/></a>
<a href=""><img src="img/4_mobile.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Tilted Items</h2>
<p>The perspective view is achieved by adding a perspective value to the slide list item and tilting a division that contains the two screenshots.</p>
</div>
<div class="tiltview col">
<a href=""><img src="img/5_screen.jpg"/></a>
<a href=""><img src="img/6_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Column or Row</h2>
<p>The items in the tilted container are either laid out in a column or in a row. For some directions we need to adjust the animation delays for the items, since we don't want the items to overlap each other when they move in or out.</p>
</div>
<div class="tiltview row">
<a href=""><img src="img/1_mobile.jpg"/></a>
<a href=""><img src="img/2_mobile.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Responsiveness</h2>
<p>For smaller screens, the items on the right hand side will become less opaque and serve as decoration only. The focus will be on the description which will occupy all the width.</p>
</div>
<div class="tiltview col">
<a href=""><img src="img/3_screen.jpg"/></a>
<a href=""><img src="img/4_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Navigation</h2>
<p>For the "line" navigation we use a little trick to make the clickable area a bit bigger: we add a thick white border to the top and bottom of the span. Since the border is part of the element, it will be part of the clickable zone.</p>
</div>
<div class="tiltview row">
<a href=""><img src="img/5_mobile.jpg"/></a>
<a href=""><img src="img/6_mobile.jpg"/></a>
</div>
</li>
</ol>
</div><!-- /slideshow -->
4.Перед закрытием тега body подключаем скрипты
Код:
<script src="{tpl_url}/js/classie.js"></script>
<script src="{tpl_url}/js/tiltSlider.js"></script>
<script>
new TiltSlider( document.getElementById( 'slideshow' ) );
</script>
5. Ну вот и все настройки вы можете глянуть на источнике,а так по установке спрашивайте в комментах.

Можешь почитать и вот эту статейку "Разделяем комментарии с плагина фэйсбука по новостям"

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

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

Теги

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

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [13]
  • Гости: [12]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 33
  • Генерация страницы: 0.285сек
  • Потребление памяти: 5.217 Mb 
  •   Яндекс.Метрика