Адаптивная карусель изображений в ноде (field image & FlexSlider 2)

​​Небольшой пример, как подключить карусель изображений для поля типа image на странице материала.

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

Для начала стоит определиться с библиотекой, которую будем использовать. На просторах интернета их много (google Вам в помощь). Мои поиски привели меня к FlexSlider 2 
Что понравилось мне в нем:

• возможность самостоятельно указывать селекторы для слайдов.
• адаптивность
• поддержка сенсорных экранов
• ...

Скачиваем последнюю версию FlexSlider2. В архиве библиотеки нас интересует только один файл -  jquery.flexslider-min.js. Помещаем его в папку со скриптами в вашей теме ("js" или "script" или еще как-то иначе). Там же создаем новый скрипт "flex.js" - в нем мы и будем подключать адаптивную карусель изображений. Ниже приведу код скрипта с комментариями:

(function ($) { 
$(document).ready(function() { 
 //ищем контейнер по имени поля с картинками 
 //причем можно активировать карусель в зависимости от количества картинок
 if($('div.field-name-field-images div.field-item').length>1){
  var flex = $('div.field-name-field-images');
 //добавим новые классы flex.addClass('flexslider');
 flex.find('div.field-items').addClass('slides'); 
//запуск карусели 
flex.flexslider({
 animation: "slide",
 itemWidth: 150, // ширина слайда 
 itemMargin: 0, 
 selector: ".slides > .field-item", // селектор для слайда 
 slideshow: false, //автопроигрывание 
 directionNav: true, // кнопки Next Prew 
 controlNav: false, // pager 
 animationLoop: false, // зацикливание прокрутки (петля) 
 move: 3
}); 
} 
});
})(jQuery);

Список параметров для слайдера можно просмотреть тут.

Теперь осталось только подключить наш скрипт и библиотеку на нужных страницах.

Для этого в template Вашей темы добавим хук hook_preprocess_node:

/*
* Implements hook_preprocess_node().
* @ xandeadx.ru/blog/drupal/254 
*/
function THEMENAME_preprocess_node(&$variables) {
 if($variables['view_mode'] == 'full' && $variables['node'] -> type == 'event'){
   drupal_add_js(path_to_theme() . '/js/jquery.flexslider-min.js');
   drupal_add_js(path_to_theme() . '/js/flex.js'); 
  } 
}

Если Все сделать правильно, то на странице ноды (тип event) загрузится скрипт и активирует адаптивную карусель.  Кнопки next и prew flexslider создаст автоматически. Теперь дело за css.

Небольшой фрагмент приведу ниже:

.field.flexslider{
  position: relative; // обязательно
}
 
.flex-direction-nav{
    list-style:none;
    margin: 0;
    padding: 0;
}
    
.flex-direction-nav .flex-disabled{
    display:none; //обязательно
  }
    
 .flex-direction-nav a {
    width: 30px;
    height: 30px;
    margin: -20px 0 0;
    display: block;
    background: image-url("bg_direction_nav.png") no-repeat 0 0; //картинка для кнопок next/prew
    position: absolute;
    top: 50%;
    cursor: pointer;
    text-indent: -9999px;
    opacity:0.8;
  }

.flex-direction-nav a:hover{
    opacity:1;
  }

.flex-prev {
    left: 0;
  }
​
.flex-next {
    background-position: 100% 0;
    right: 0;
  }