Обновлено 20.11.2023:
На данный момент рекомендую использовать библиотеку Tiny Slider 2 и модуль TinySlider
Итак, у нас есть поле с несколькими изображениями. И мы хотим украсить нашу страничку, оформив вывод в горизонтальную карусель изображений.
Для начала стоит определиться с библиотекой, которую будем использовать. На просторах интернета их много (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;
}Альтернативный вариант - модуль Flexslider
- 26.11.2014
- 38 просмотров
