Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

Понравился материал? Поделись с ним в социальных сетях !


Загрузить материал (5.4 Kb)
Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

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

Дата и время публикации : 18.Мар.17 в 10:13 | Раздел : Прочее для uCoz


Параметр Значение
Дата публик. 18.Мар.17, Суббота, 10:13
Размер файла 5.4 Kb
Адапт. дизайн
Обновления Не производились
Просмотрен 166
Загружен 6

Quotes Rotator - это некий слайдер/ротатор цитат с использованием разнообразных картинок и с неограниченным количеством вкладок. У слайдера используется автозапуск. Индикатор выше, показывает прогресса цитируемости содержимого. Цитата с изображением используется в качестве примера.

Также, можно заместо картинок использовать видео или flash, а сам слайдер можно содержать что угодно, хоть одни картинки. Кстати, css очень коротенький и простенький, поэтому вы сможете с легкостью подогнать его под свой сайт. 



Установка:

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

<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://7uarts.ucoz.org/load1/quotes_rotaror/apple-touch-icon-180x180.png" alt="img01" /> 
<blockquote> 
<p>uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием.</p> 
<footer>Владелец сервиса — ООО «Юкоз Медиа», Россия.</footer> 
</blockquote> 
</div> 
 

<!-- ВТОРОЙ БЛОК -->
<div class="cbp-qtcontent"> 
<img src="http://7uarts.ucoz.org/load1/quotes_rotaror/apple-touch-icon-180x180.png" alt="img02" /> 
<blockquote> 
<p>Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта.</p> 
<footer>Владелец сервиса — ООО «Юкоз Медиа», Россия.</footer> 
</blockquote> 
</div> 


<!-- ТРЕТИЙ БЛОК -->
<div class="cbp-qtcontent"> 
<img src="http://7uarts.ucoz.org/load1/quotes_rotaror/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://7uarts.ucoz.org/load1/quotes_rotaror/apple-touch-icon-180x180.png" alt="img04" /> 
<blockquote> 
<p>uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet.</p> 
<footer>Владелец сервиса — ООО «Юкоз Медиа», Россия.</footer> 
</blockquote> 
</div> 


</div> 
</div> 
</div>

 

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

<script src="/quotes-rotator/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>

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

MiniMenu: крошечное дополнение к меню для uCoz

MiniMenu может добавить крошечную, но уникальную навигацию на ваш сайт. В зависимости от ваших потребностей оно может выполнять роль основного и вс...