Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Отслеживание второго активного слайда (https://javascript.ru/forum/misc/69573-otslezhivanie-vtorogo-aktivnogo-slajjda.html)

рони 04.07.2017 15:19

Цитата:

Сообщение от sergey24
но если листаем влево, то и стиль присваивается левому (из 3) слайду. Если листаем вправо, то правому

в каком браузере проблемы с постом 21?

sergey24 04.07.2017 15:32

рони,
Прошу прощения использовал "translate.owl.carousel" вместо "translated.owl.carousel". Из-за этого проблемы были. Премного благодарен Вам:)

laimas 04.07.2017 15:38

Цитата:

Сообщение от sergey24
использовал "translate.owl.carousel" вместо "translated.owl.carousel"

Это разные события. Можно и так события обрабатывать/определять.

var itm; 
$(".owl-carousel").owlCarousel({
    items: 3,
    nav: true,
    loop: true,
    dots: false,
    onInitialized: function(e) {
        itm = $(e.target).find(".owl-item")
        itm.eq(e.item.index + 1).addClass('red')
    },
    onDrag: function(e) {
        itm.removeClass('red')
    },
    onTranslated: function(e) {
        itm.eq(e.item.index + 1).addClass('red')
    }
})

рони 04.07.2017 15:41

sergey24,
c "translate.owl.carousel" можно так
$(function() {
    $(".owl-carousel").owlCarousel({  loop: true,
        startPosition: -1,
        items: 3,
        nav: true,
        navText: ['<img src="/left.png" alt="" />', '<img src="/right.png" alt="" />'],
        dots: false
    }).on({"translated.owl.carousel": setCls, "translate.owl.carousel" : remCls});

    function setCls() {
        $(".owl-item").filter(".active").eq(1).addClass("red")
    }
    function remCls() {
        $(".owl-item").removeClass("red")
    }
    setCls()
});

рони 04.07.2017 15:49

laimas,
хорошо бы onDrag продублировать в onTranslate

рони 04.07.2017 15:55

laimas,
итого
$(function() {
var itm;
$(".owl-carousel").owlCarousel({
    startPosition: -1,
    items: 3,
    nav: true,
    loop: true,
    dots: false,
    onInitialized: function(e) {
        itm = $(e.target).find(".owl-item")
        itm.eq(e.item.index + 1).addClass('red')
    },
    onDrag: function(e) {
        itm.removeClass('red')
    },
    onTranslate: function(e) {
        itm.removeClass('red')
    },
    onTranslated: function(e) {
        itm.eq(e.item.index + 1).addClass('red')
    }
})
});


спасибо так проще, а то не видел что есть Callback, делал через Event

laimas 04.07.2017 15:58

Цитата:

Сообщение от рони
хорошо бы onDrag продублировать в onTranslate

Это триггерами лучше делать, так как и для кнопок назад/вперед тоже самое нужно.

рони 04.07.2017 16:03

Цитата:

Сообщение от laimas
Это триггерами лучше делать

:-?

laimas 04.07.2017 16:16

рони,
попробуйте под всеми браузерами проверить. Я сталкивался с тем, что в этом слайдере, за версию сказать не могу, не помню, событие onTranslate не всегда означает начало действия, по крайней мере были глюки в FF. Вот и думаю, что раз описать, а затем триггером одно объявленное обрабатывать.

рони 04.07.2017 16:24

Цитата:

Сообщение от laimas
попробуйте под всеми браузерами проверить

проверил пост№46, ничего не заметил


Часовой пояс GMT +3, время: 13:52.