Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Шаблоны » Скрипты » Слайдеры » MasterSlider staff слайдер от uGarts

MasterSlider staff слайдер от uGarts

Опубликовал: artCreative™
Категория: Слайдеры
Дата:Вторник, 25 Ноября 2014 в 21:26

1 голос

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

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

Теперь в head страницы, на которой будет слайдер, вставим css:

Код

А перед /body подключим js-библиотеку:

Код

Это сам html-код слайдера. Вставьте туда, где хотите видеть слайдер.

Код

<div id="P_MS547130220a757" class="master-slider-parent ms-staff-carousel ms-round ms-parent-id-32" style="max-width:1000px;" >

  
  <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/staff/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/staff/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/staff/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/staff/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/staff/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/staff/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/staff/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>
  

  </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>

Рассмотрим код подробнее:
Во-первых, в самом главном диве прописан стиль max-width:1000px

Код

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

Обратите внимание на класс ms-round, присвоенный главному блоку слайдера

Код

Он делает картинки круглыми. Если его удалить, картинки станут квадратными:

Код

<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 - это количество секунд, спустя которые сменится слайд.

Код

За стрелки отвечает эта строка в 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 - размеры слайдов в стиле "лесенки"

На этом всё! Огромное спасибо ресурсу uGarts и его администрации!

Автор файла: UGARTS

Ссылка на источник материала

Ссылка на ДЕМО

Ссылка на материал

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1755 | Комментариев: 2 | Скачали: 7 « Назад

Теги материала: Слайдер, MasterSlider, uGarts, Staff, от, слайдеры

Комментарии пользователей

Порядок вывода комментариев:

Like 0
Цитировать

Написано 18 Декабря 2014 в 17:29
Комментарий №1

r3zonance

Поставил, все хорошо работает, потом просто исчез...

Like 0
Цитировать

Написано 18 Декабря 2014 в 19:46
Комментарий №2

artCreative™

Сомневаюсь, что он сам по себе испарился. На демо странице стоит и не пропадает. Попробуйте поставить еще раз и не изменять после этого какой либо код на странице со слайдером.

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Шаблоны » Скрипты » Слайдеры » MasterSlider staff слайдер от uGarts

MasterSlider staff слайдер от uGarts

Комментарии пользователей