Neatek logo
  • Make great things
  • Less clients, more quality
  • Better more mistakes, than one mistake
  • Principles are more than principles

OwlCarousel2 — Установка центральному элементу класс owl-center

Введение

Часто использую такой инструмент как OwlCarousel2 почти во всех своих проекта (Сайтах) так как он адаптивных, лёгкие и имеет довольно хорошую документацию, легко интегрируется в любой веб-проект. Но бывает такой случай когда нужно что-то сделать именно с центральным элементом в данном слайдере, соответственно я привожу сниппеты для выделения нашего центрального элемента в слайдере, и с помощью CSS мы можем изменять внешний вид наших элементов как нам угодно. Советую в принципе всем данный слайдер.

Отрывки кода для вставки

JavaScript:

// Vladimir Zhelnov // neatek.ru // neatek.pw
// https://owlcarousel2.github.io/OwlCarousel2/
var owl = $('.owl-carousel-2');
owl.owlCarousel({
loop:true,
margin:0,
dots:false,
nav:true,
autoplay: true,
autoplaySpeed: 800,
navText: ['',''], // Тут можно установить текст для наших кнопок "Влево", "Вправо".
items : 1, // IMPORTANT
responsive : {
480 : { items : 1  },
800 : { items : 2  },
1024 : { items : 3 }
}
});
// Function for detect center item FOR 3 ITEMS (Change i==1) for your element
// Функция для определения центрального элемента. В данный момент для 3-х элементов внутри слайдера. 
// Измените количество в "i==1", 
// до нужного вам количества, чтобы точно определять центральный элемент.
function set_owl_center() {
owl.find( ".active" ).removeClass('owl-center');
setTimeout(function(){
owl.find( ".active" ).each(function( i ) {
if(i==1) $(this).addClass('owl-center');
});
}, 80);
}
set_owl_center(); // Init center
owl.on('changed.owl.carousel', function(event) {set_owl_center();}) // On changes

Далее указан HTML код нашего слайдера, в принципе для всех слайдеров на базе Owl он одинаков для всех, и лишь отличается его содержимое.

Далее указан CSS код для произведения действий с нашим центральном элементом слайдера, в этом примере мы устанавливаем всем картинкам прозрачность 50%, далее при переключении на центральный элемент прозрачность исчезает вовсе.

.owl-item img { opacity: 0.5; transition: 0.3s; } /* Применимо ко всем элементам в слайдере */
.owl-carousel-2 .owl-center img { opacity: 1.0; } /* Применимо к центральному элементу */

Оцените данную статью

КолДваТриЧетыреОтлично! (2 оценок, средне: 4,00 из 5)
Загрузка...
Заранее, Спасибо за оценку :)