MasterSlider staff - слайдер карусель для uCoz
827материалов
228тем на форуме
3003комментария
6152пользователя

MasterSlider staff - слайдер карусель для uCoz


Невероятно красивый и простой слайдер-карусель под названием "MasterSlider staff carousel".

Приступим к установке:
Для начала загружаем архив и заливаем папку masterslider в корень файлового менеджера вашего сайта.

Теперь в <head> страницы, на которой будет слайдер, вставим css:
Код
<link rel='stylesheet' id='ms-main-css' href='/masterslider/staff/masterslider.main.css' type='text/css' media='all' />

А перед </body> подключим js-библиотеку:
Код
<script type='text/javascript' src='/masterslider/iversion/masterslider.min.js'></script>

Это сам html-код слайдера. Вставьте туда, где хотите видеть слайдер.
Код
<!-- MasterSlider -->  
  <div id="P_MS547130220a757" class="master-slider-parent ms-staff-carousel ms-round ms-parent-id-32" style="max-width:1000px;" >  

  <!-- slides -->  
  <div id="ms-staff-1" class="master-slider ms-skin-default" >  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/staff/slides/1.jpg" />  
  <div class="ms-info"><h3 style="text-align: center;">Lillian W. Reed</h3>  
  <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/staff/slides/2.jpg" />  
  <div class="ms-info"><h3 style="text-align: center;">Terry O. Jackson</h3>  
  <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/staff/slides/3.jpg" />  
  <div class="ms-info"><h3 style="text-align: center;">Gabriel K. Wood</h3>  
  <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/staff/slides/4.jpg" />  
  <div class="ms-info"><h3 style="text-align: center;">Lori M. Walmsley</h3>  
  <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/staff/slides/5.jpg" />  
  <div class="ms-info"><h3 style="text-align: center;">Luis A. Butcher</h3>  
  <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/staff/slides/6.jpg" />  
  <div class="ms-info"><h3 style="text-align: center;">Edith J. Shuster</h3>  
  <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/staff/slides/7.jpg" />  
  <div class="ms-info"><h3 style="text-align: center;">John L. Diaz</h3>  
  <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>  
  </div>  

  </div>  
  <!-- END slides -->  

  </div>  
   
  <script type="text/javascript">  
  (function ( $ ) {  
  "use strict";  

  $(function () {  
  var masterslider_a757 = new MasterSlider();  

  // slider controls  
  masterslider_a757.control('arrows' ,{ autohide:true, overVideo:true });  
  masterslider_a757.control('slideinfo' ,{ autohide:false, overVideo:true, dir:'h', align:'bottom',inset:false , margin:10 });  
  // slider setup  
  masterslider_a757.setup("ms-staff-1", {  
  width : 240,  
  height : 240,  
  space : 35,  
  start : 1,  
  grabCursor : true,  
  swipe : true,  
  mouse : true,  
  layout : "partialview",  
  wheel : false,  
  autoplay : false,  
  instantStartLayers:false,  
  loop : true,  
  shuffle : false,  
  preload : 4,  
  heightLimit : true,  
  autoHeight : false,  
  smoothHeight : true,  
  endPause : false,  
  overPause : true,  
  fillMode : "fill",  
  centerControls : true,  
  layersMode : "center",  
  hideLayers : false,  
  fullscreenMargin: 0,  
  speed : 20,  
  dir : "h",  
  parallaxMode : 'swipe',  
  view : "focus"  
  });  
   
  });  
  })(jQuery);  
  </script>  
  <!-- END MasterSlider -->

Рассмотрим код подробнее:
Во-первых, в самом главном диве прописан стиль max-width:1000px
Код
<div id="P_MS547130220a757" class="master-slider-parent ms-staff-carousel ms-round ms-parent-id-32" style="max-width:1000px;" >

Это ширина слайдера.

Обратите внимание на класс ms-round, присвоенный главному блоку слайдера
Код
<div id="P_MS547130220a757" class="master-slider-parent ms-staff-carousel ms-round ms-parent-id-32" style="max-width:1000px;" >

Он делает картинки круглыми. Если его удалить, картинки станут квадратными:
Код
<div id="P_MS547130220a757" class="master-slider-parent ms-staff-carousel ms-parent-id-32" style="max-width:1000px;" > // теперь картинки квадратные

атрибут data-delay="3" в диве с классом ms-slide определяет, как долго слайд будет активен. Иными словами, цифра 3 - это количество секунд, спустя которые сменится слайд.
Код
<div class="ms-slide" data-delay="3" data-fill-mode="fill" >

За стрелки отвечает эта строка в js-коде:
Код
masterslider_a757.control('arrows' ,{ autohide:true, overVideo:true });

Можно её удалить, если хотите убрать стрелки со слайдера. Атрибут autohide скрывает стрелки, когда вы отводите курсор от слайдера.

Эта строка отвечает за текст под слайдами:
Код
masterslider_a757.control('slideinfo' ,{ autohide:false, overVideo:true, dir:'h', align:'bottom',inset:false , margin:10 });

Атрибут autohide со значением false означает, что текст не исчезает, когда вы отводите курсор от слайдера.

И ещё несколько настроек слайдера:
space : 35, - размер расстояния между слайдами.
autoplay : false, - автосмена слайдов.
loop : true, - круговое листание, переход с последнего слайда на первый.
shuffle : false, - перемешивание слайдов. Слайды идут в случайном порядке.
overPause : true, - будет ли слайдер вставать на паузу, если направить на него курсором.
speed : 20, - скорость смены слайдов.
view : "focus" - стиль слайдера. Можете выбрать из трёх вариантов:
  • focus - активный слайд больше остальных
  • fadeBasic - все слайды одинакового размера, а неактивные слайды полупрозрачны
  • wave - размеры слайдов в стиле "лесенки"

На этом всё. Спасибо за внимание.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 29.11.2014 в 22:06
Материал просмотрен: 2318 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта