Главная

Tuesday, 3 March 2015

Master Slider - мастер среди слайдеров!

Всем привет.

Слайдеры прочно вошли в жизнь web-дизайнера. Штука удобная и информативная, поэтому они присутствуют на многих сайтах, форумах и блогах. В основном все слайдеры отличаются друг от друга как переходами между самими слайдами, так и способом проявления (создания) очередного слайда. Правда? Точно так.

Я тоже так думал до недавних пор. Пока не встретил Master Slider. Ребята, это просто монстр по возможностям среди конструкторов слайдеров . Чего стоит хотя бы тот факт что этот Slider имеет свое API. Круто? Еще бы. Методы, свойства и события – все как полагается в ООП.

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

А теперь внимание - Master Slider умеет работать со слоями! С возможностью добавления в слой любого HTML содержимого: текста, изображения, видео.


Основные характеристики на языке оригинала (не самая последняя версия):
  • Fully responsive and resizeable.
  • Fullscreen, Full-width and boxed layout support.
  • Touch swipe gesture in touch devices and desktop browsers.
  • Cross browser Chrome, FireFox, Safari, Opera, IE8+
  • SEO Friendly you can use heading (h1, h2, ...) elements for layers/captions in markup and all included images in slider will index by search engines.
  • Super smooth hardware accelerated CSS3 transitions with fallback jQuery animations in old browsers.
  • Unlimited layers/captions over slides and unlimited hardware CSS3 transitions (with jQuery fallback)
  • Option of adding hotspots over each slide to show related tooltip while mouse is over it.
  • 25+ ready to use and customizable templates included.
  • Six ultra smooth touch/mouse interactive transitions:
    1. Slide move transition
    2. 3D Flow move transition
    3. 3D wave move transition
    4. Mask move transition
    5. Fade transition
    6. Scale transition
  • HD Video Backgrounds
  • Smart preloading
  • Vertical and horizontal direction supported for touch/mouse swipe moves.
  • Option to specify End Transition with different timing and easing for each layer.
  • Option to use Youtube and Vimeo videos as slide background.
  • Option to use Youtube and Vimeo videos as slide layer (with custom cover image)
  • Flickr plugin included.
  • Option to add lightbox link to each slide.
  • AutoHeight mode (Slider adapts its height size to each slide height)
  • Option to enable shuffle slide ordering.
  • Option to specify first slide.
  • Option to set continuous sliding mode (loop).
  • Multiple instances of slider in one page.
  • Autoplay with mouse over pause option.
  • Option to specify End-Pause for autoplay slide show.
  • Option to set link to each slide.
  • Option to set space between slides.
  • 5 alignment methods for aligning background in slide (fit, fill, stretch, tile, centre)
  • Vertical and horizontal thumb list control included (with touch support)
  • Instant slider initialization, Visitors don't have to wait for all images.
  • Easy to locate layers over slides by using CSS.
  • Fully customizable layout via CSS and HTML.
  • Valid, optimized and easy to use markup.
  • Built-in powerful API with detailed documentation.
  • Built with obejcte oriented JavaScript.
  • +20 customisation options.
  • Detailed documentation.
  • Easy installation document is included.
  • Layered PSD files are included.
  • Free lifetime support.
  • Free lifetime updates.
На данный момент существует Master Slider как jQuery-версия так и версия для фанатов WordPress. Обе версии платные.  Даже фанатам WordPress повезло чуть больше, разработчик для ознакомления предлагает и бесплатную версию своего Master Slider, правда уж очень усеченную по возможностям.  Не сможете оценить всего полета мысли!)

Варианты всевозможных переходов можно оценить визуально и тут же получить часть кода, который за это отвечает.



Ваш слайд может содержать в себе и горячие точки (hotspot), что может быть востребовано в интернет магазинах.


Первое построение своего слайдера можно начать с выбора шаблона. Сколько их в последней версии я не знаю, но год назад их было два десятка. Каждый шаблон ниже демонстрации содержит блок HTML-кода, блок JavaScript и блок Required Files где перечислены необходимые файлы JS-скриптов и таблицы CSS-стилей. Т.е. первый слайдер собирается очень быстро. Но если вы хотите экзотики для своего web-сайта, то вам следует обратится к документации по Master Slider.


Повторюсь. Самая отличительная черта Master Slider от других слайдеров, на мой взгляд , это умением работать со слоями. Слои могут быть разных типов: текст, картинка, видео и hotspot. Вот здесь я вам собрал небольшой пример такого слайдера из шаблона. jQuery-версия. Полюбуйтесь!



2 comments:

А что вы думаете по этому поводу?