3 слайдера в одном компоненте

 
Компонент представляет собой слайдер изображений, фактически состоящий из трех разных видов слайдеров: 
  • Стандартная листалка изображений (имеет 17 различных эффектов переходов) 
  • Адаптивная листалка изображений, растягивается на всю ширину контейнера (имеет 14 различных эффектов переходов) 
  • Листалка с эффектами для изображений с прозрачным фоном - png (имеет 5 различных эффектов) 
ИТОГО Вашему вниманию представляем слайдер который потенциально умеет показать 36 различных эффектов. 

Основные возможности компонента: 

  • Выбор инфоблока и свойства для указания изображения; 
  • Полная поддержка адаптивности и ресайза изображений; (для одного из выбранных слайдеров); 
  • Возможность задать ширину для стрелок навигации, а также ширину самого слайдера; 
  • Эффекты слайдеров работают на мобильных устройствах; 

КОМПОНЕНТ ПОДДЕРЖИВАЕТ КОМПОЗИТНЫЙ РЕЖИМ БИТРИКС. 

Данная опция включается в настройках компонента.

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

  • Инфоблок - выбор инфоблока откуда брать данные об изображениях;
  • Брать картинки из: - выбор свойства выбранного инфоблока где хранятся данные об изображении;
  • Тип слайдера - выбор типа слайдера. Каждый из трех типов слайдера отличается своим набором эффектов
    • Стандартный слайдер с эффектами - имеет 17 возможных эффектов смены слайдов;
    • В полную ширину экрана - имеет 14 возможных эффектов смены слайдов; Верстка данного типа слайдера построена на манер адаптивной, он заполняет всю ширину контейнера в котором находится.
    • Эффекты для прозрачных изображений - имеет 5 возможных эффектов смены слайдов.
  • Ширина изображения - размер в пикселях для блока изображений слайдера
  • Ширина панели навигации - размер в пикселях для контейнера с панелями навигации. 
    • Если ширина панели навигации больше чем ширина изображения, то стрелки навигации показываются по бокам изображения. 
    • Если ширина панели навигации меньше чем ширина изображения, то стрелки навигации показываются под изображением. Для корректного отображения стрелок нужно подкорректировать настройку высоты изображения.
  • Высота изображения с учетом эффекта - параметр который устанавливает принудительно высоту контейнера с изображением. 
    • p/s/ Несмотря на то, что изображение масштабируется автоматически по заданной ширине, зачастую необходимо увеличить контейнер с высотой, так как некоторые эффекты смены слайдов таковы что следующее изображение вылетает снизу или сбоку, при этом необходимо место чтобы было видно откуда появляется изображение. Для этих целей и необходима данная настройка высоты
  • Поддержка композитного режима - понятно из названия. Если Ваш сайт спроектирован с учетом композитного режима Вам не нужно править шаблон компонента. Достаточно установить "галочку" в настройках компонента.
  • Чекбокс "Включить генерацию URL" - если включен, то появляются поля позволяющие указать откуда брать ссылку, из настроек инфоблока или из свойства инфоблока (выбираются свойства типа Строка). 
  • Чекбокс "Открывать ссылки в новом окне" - из названия полагем понятно. 
Ниже на скриншоте показано каким образом задаются ширины контейнеров в слайдерах.

И напоследок самое интересное. 

Для демонстрации всех возмоных эффектов и слайдов можно перейти на ДЕМО страницу и поиграться.
Загрузка

Coderoid - это группа профессиональных разработчиков, специализирующихся в первую очередь на разработке модулей для CMS Bitrix. 
Также у нас можно заказать разработку сайта на Bitrix, доработку существующего сайта, переработку используемых модулей на сайте, а также любые консультации по внедрению Bitrix в компании.
 

На правах рекламы