MasterSlider iversion - слайдер внутри айфона для ucoz
827материалов
228тем на форуме
3004комментария
6159пользователей

MasterSlider iversion - слайдер внутри айфона для ucoz


Изумительный вид и изысканная смена слайдов внутри айфона. Знакомьтесь, новый MasterSlider iversion.

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

Теперь в <head> страницы, на которой будет слайдер, вставим css:
Код
<link rel='stylesheet' id='ms-main-css' href='/masterslider/iversion/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="site_topslider">  
   
  <div id="P_MS546fa8867f347" class="master-slider-parent ms-phone-template ms-parent-id-50" style="max-width:258px;" >  
   
  <div class="ms-phone-cont"><img src="/masterslider/iversion/common/phone.png" class="ms-phone-bg" />  
  <div class="ms-lt-slider-cont">  
  <!-- slides -->  
  <div id="ms-iversion" 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/iversion/slides/1.jpg" />  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/iversion/slides/2.jpg" />  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/iversion/slides/3.jpg" />  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/iversion/slides/4.jpg" />  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/iversion/slides/5.jpg" />  
  </div>  

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

  </div>  
  </div>  
  </div>  
   
  <script>  
  (function ( $ ) {  
  "use strict";  

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

  // slider controls  
  masterslider_f347.control('arrows' ,{ autohide:true, overVideo:true });  
  masterslider_f347.control('bullets' ,{ autohide:true, overVideo:true, dir:'h', align:'bottom', space:5 , margin:10 });  
  masterslider_f347.control('circletimer',{ autohide:false, overVideo:true, color:'#FFFFFF', radius:4, stroke:9 });  
  // slider setup  
  masterslider_f347.setup("ms-iversion", {  
  width : 258,  
  height : 456,  
  space : 2,  
  start : 1,  
  grabCursor : true,  
  swipe : true,  
  mouse : true,  
  layout : "boxed",  
  wheel : false,  
  autoplay : true,  
  instantStartLayers:false,  
  loop : false,  
  shuffle : false,  
  preload : 2,  
  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 : "basic"  
  });  
   
  });  
  })(jQuery);  
  </script>  
   
  </div>  
  <!-- END MasterSlider -->

Горизонтальный слайдер
<!-- MasterSlider -->  
  <div id="site_topslider" class="" >  

  <div id="P_MS547123c1d3eac" class="master-slider-parent ms-phone-template ms-phone-land ms-parent-id-52" style="max-width:456px;" >  
   
  <div class="ms-phone-cont"><img src="/masterslider/iversion/common/phone-land.png" class="ms-phone-bg" /><div class="ms-lt-slider-cont">  
  <!-- slides -->  
  <div id="ms-iversion-land" 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/iversion/slides/1-land.jpg" />  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/iversion/slides/2-land.jpg" />  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/iversion/slides/3-land.jpg" />  
  </div>  

  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/iversion/slides/4-land.jpg" />  
  </div>  
   
  <div class="ms-slide" data-delay="3" data-fill-mode="fill" >  
  <img src="/masterslider/iversion/common/blank.gif" alt="" title="" data-src="/masterslider/iversion/slides/5-land.jpg" />  
  </div>  

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

  </div>  
  </div>  
  </div>  
   
  <script>  
  (function ( $ ) {  
  "use strict";  

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

  // slider controls  
  masterslider_3eac.control('arrows' ,{ autohide:true, overVideo:true });  
  masterslider_3eac.control('bullets' ,{ autohide:true, overVideo:true, dir:'h', align:'bottom', space:5 , margin:10 });  
  masterslider_3eac.control('circletimer',{ autohide:false, overVideo:true, color:'#FFFFFF', radius:4, stroke:9 });  
  // slider setup  
  masterslider_3eac.setup("ms-iversion-land", {  
  width : 456,  
  height : 258,  
  space : 2,  
  start : 1,  
  grabCursor : true,  
  swipe : true,  
  mouse : true,  
  layout : "boxed",  
  wheel : false,  
  autoplay : false,  
  instantStartLayers:false,  
  loop : false,  
  shuffle : false,  
  preload : 3,  
  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 : "mask"  
  });  
   
  });  
  })(jQuery);  
  </script>  
   
</div>  
<!-- END MasterSlider -->

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

Взглянем на часть js-кода:
Код
// slider controls  
  masterslider_f347.control('arrows' ,{ autohide:true, overVideo:true });  
  masterslider_f347.control('bullets' ,{ autohide:true, overVideo:true, dir:'h', align:'bottom', space:5 , margin:10 });  
  masterslider_f347.control('circletimer',{ autohide:false, overVideo:true, color:'#FFFFFF', radius:4, stroke:9 });

Первая строка отвечает за стрелки по бокам слайдера. Атрибут autohide скрывает стрелки, как только вы уберете курсор от слайдера. Если хотите убрать стрелки - просто удалите строку.

Вторая строка выводит кружки, показывающие количество слайдов. Также можно удалить или изменить значение autohide:false для того, чтобы они не скрывались.

И ещё несколько настроек слайдера:
autoplay : true - автосмена слайдов.
speed : 20 - скорость смены слайда.
loop : false - будет ли слайдер прокручиваться заново, когда слайды закончатся.
view : "basic" - эффект смены слайдов. Имеется 4 эффекта: basic, fade, wave и mask.

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

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

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

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

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


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