Слайдер “Quotes Rotator” для uCoz
29.09.2016 181 0 Milan_Shubin_

Слайдер “Quotes Rotator” для uCoz

Слайдер “Quotes Rotator” для uCoz-на первый взгляд может показаться,что данный скрипт прост как валенок,как с внешней стороны,так и с технической,выразимся так.На самом деле слайдер представляет собой некий генератор цитат с использованием разных изображений и безмерным количеством вкладок.Слайдер имеет автоматический пуск генерации.Вверху слайдера можно увидеть индикатор загрузки следующего слайдера.И еще со стороны скелета слайдера он имеет очень легкий и простой код,который не сильно загрузит ответ вашего сайта

Установка:Для начала скачиваете архив с нашего сайта и папку quotes-rotator загружаете в свой файловый менеджер

Далее между и подключаете:

Код
<link rel="stylesheet" type="text/css" href="/quotes-rotator/component.css" />  
<script src="/quotes-rotator/modernizr.custom.js"></script>


Код вывод слайдера,ставим где угодно

Код
<div class="main">  
<div id="cbp-qtrotator" class="cbp-qtrotator">  
<div class="cbp-qtcontent">  
<img src="http://webmaster-ucoz.ru/w-u/favicons/apple-touch-icon-180x180.png" alt="img01" />  
<blockquote>  
<p>uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием.</p>  
<footer>Владелец сервиса — ООО «Юкоз Медиа», Россия.</footer>  
</blockquote>  
</div>  
<div class="cbp-qtcontent">  
<img src="http://webmaster-ucoz.ru/w-u/favicons/apple-touch-icon-180x180.png" alt="img02" />  
<blockquote>  
<p>Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта.</p>  
<footer>Владелец сервиса — ООО «Юкоз Медиа», Россия.</footer>  
</blockquote>  
</div>  
<div class="cbp-qtcontent">  
<img src="http://webmaster-ucoz.ru/w-u/favicons/apple-touch-icon-180x180.png" alt="img03" />  
<blockquote>  
<p>К 2014 году на его основе было создано более 20 млн страничек (из них активны были около 1 млн), на отдельных доменах работали 54 тыс. сайтов.</p>  
<footer>Владелец сервиса — ООО «Юкоз Медиа», Россия.</footer>  
</blockquote>  
</div>  
<div class="cbp-qtcontent">  
<img src="http://webmaster-ucoz.ru/w-u/favicons/apple-touch-icon-180x180.png" alt="img04" />  
<blockquote>  
<p>uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet.</p>  
<footer>Владелец сервиса — ООО «Юкоз Медиа», Россия.</footer>  
</blockquote>  
</div>  
</div>  
</div>  
</div>


Перед тегом в нижней части сайта вставляете код:

Код
<script src="http://tympanus.net/Blueprints/QuotesRotator/js/jquery.cbpQTRotator.min.js"></script>  
  <script>  
  $( function() {  
  /*  
  - how to call the plugin:  
  $( selector ).cbpQTRotator( [options]);  
  - options:  
  {  
  // default transition speed (ms)  
  speed : 700,  
  // default transition easing  
  easing : 'ease',  
  // rotator interval (ms)  
  interval : 8000  
  }  
  - destroy:  
  $( selector ).cbpQTRotator( 'destroy' );  
  */  

  $( '#cbp-qtrotator' ).cbpQTRotator();  

  } );  
  </script>
Поблагодарить автора Автор: Milan_Shubin_
Комментарии (0)
Добавить комментарий
Прокомментировать