Как присвоить класс кнопкам next/prev в плагине owl.carousel?

Question

[Максим]

Как присвоить класс кнопкам next/prev, в плагине owl.carousel?

Если это последний слайд, присвоить класс кнопке next, если первый то prev

Подскажите как

Comments

[OVK2015]

При создании самой карусели вешаете обработчик на onInitialized. Ну а в нем уже добавляете классы кот. нужны

[Максим]

я немного не понимаю куда вешать обработчик, подскажете?

[OVK2015]

maxnrg33:
На "Ответить" нажимайте,- иначе не видно, что пишете.

owl = $('#owl-carousel');
    owl.owlCarousel
    ({
      items: 5,
      nav: true,
// Остальные настройки .....
      	onInitialized: carouselInitialized
    });
...
function carouselInitialized(event)
{
$('.owl-prev').addClass('classNameToPrevButton');
$('.owl-next').addClass('classNameToNextButton');
}

+ Библиотека, конечно, хорошая,- но с документацией там путаница. От версии к версии много различий в синтаксисе. Код выше для версии 2.0.0

[Максим]

OVK2015: спасибо, попробую

[Максим]

OVK2015: пишу такую строчку, в консоли пишет нет "event"
может ещё подскажете как узнать кол-во слайдов в карусели и какой текущий слайд?

function carouselInitialized(event)
{
var items = event.item.count;

[OVK2015]

maxnrg33:

пишу такую строчку, в консоли пишет нет "event"

Согласен. function carouselInitialized(event),- тут event не нужен. По привычке написал

может ещё подскажете как узнать кол-во слайдов в карусели и какой текущий слайд?

owl.on('changed.owl.carousel', function(event)
{
console.log('Всего: ' + event.item.count + ' Текущий: ' + event.item.index)
})

Хотя, не видя вашего кода,- как лучше этот обработчик использовать

Answer 1

[doctorcat]

Owl Carousel Version 2.0.0 beta.2.4

var carouselka = $('.popular-carousel'); // присваиваем идентификатор карусели переменной carouselka
    carouselka.owlCarousel({ // инициализируем карусель с параметрами
	        items:1, // 1 слайд.
            nav:true, // показать навигацию
            navText: ["<a class='sl-left-arrow'></a>","<a class='sl-right-arrow'></a>"]  // Custom'ная навигация. 
        
	});
    carouselka.on('changed.owl.carousel', function(event) {        
        if (event.item.index == 0) // проверяем если текущий слайд 0, то:
            {
                alert("первый слайды"); 
                $(".owl-prev").addClass("klass_pervomu"); // вешаем левой стрелке класс klass_pervomu
                alert("первый слайд");    
            }
        if (event.item.index == event.item.count-1) //тут проверяем условие event.page.count - Содержит в себе количество слайдов
            {
                $(".owl-next").addClass("klass_poslednemu");  //Добавляем класс klass_poslednemu
                alert("последний слайд");        
            }    
    });

Comments

[doctorcat]

Извиняюсь перед профессионалами, сам новичёк в этом деле. Но проверил - это работает :)

[OVK2015]

doctorcat: В какой версии работает?

[doctorcat]

2.0.0-beta.2.4

[OVK2015]

doctorcat: Понятно. Код, конечно работает,- вопросов нет. Только в alert`ах он не кол-во слайдов выводит, а кол-во страниц. Что есть, не много другое. :)

function callback(event) {
    // Provided by the core
    var element   = event.target;         // DOM element, in this example .owl-carousel
    var name      = event.type;           // Name of the event, in this example dragged
    var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index;     // Position of the current item
    // Provided by the navigation plugin
    var pages     = event.page.count;     // Number of pages
    var page      = event.page.index;     // Position of the current page
    var size      = event.page.size;      // Number of items per page
}

[doctorcat]

я этот слайдер прикручивал недавно, так же смотрел видеоуроки по js и вот сегодня наткнулся на такой вопрос, зашёл на ту страницу откуда вы мне дали ссылку и сделал код, вполне рабочий проверил прям на странице слайдера своего. Чуть переписал код чтобы через переменную вызывалась и понятнее людям было :) Ну и дальше, заметил что там нужно вычитать единицу, а до этого я хотел унарно сделать плюс а именно " event.item.index++ == event.item.count " задать в условии. Но этот код не сработал, я думаю подставлю ещё значения свойств этого объекта и поэксперементирую, потом и скопипастил такой код чуть не туда указывающий, но вопрос то остался. Раз уж мы здесь. "event.item.index++ == event.item.count" - почему это условие не сработало? :))

[OVK2015]

doctorcat:

зашёл на ту страницу откуда вы мне дали ссылку

Какую ссылку? Вроде не давал.

event.item.index++

Не работает так присваивание. Так присваивание сработает:
(event.item.index++) == event.item.count
Но для owl,- это не выход. Он клонирует слайды справа и слева от видимых. Добавьте этот код,- увидите

owl.on('changed.owl.carousel', function(event) 
{
console.log('Всего: ' + event.item.count + ' Текущий: ' + event.item.index) 
})

На "Ответить" нажимайте,- иначе не видно, что пишете.

[Максим]

doctorcat: у меня присваиваются классы только после того как нажал на кнопку вперёд или назад.. а мне нужно чтобы когда сайт загрузился, классы уже присвоилось. изначально ведь карусель стоит на первом слайде, пробовал написать owl.on('initialized.owl.carousel', function(event) { ... но оно не работает