Сова-карусель с поиском div

я использую owl carousel 2, где я использую центральную функцию. У меня есть 5 элементов для отображения на карусели. Можно ли с помощью jquery добавить классы для поиска определенных div в карусели без добавления идентификаторов или классов в div. http://owlcarousel.owlgraphic.com/demos/center.html

вот мой html

<div class="owl-carousel">
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
</div>

вот мой js

$(document).ready(function () {
$(".owl-carousel").owlCarousel({
    center: true,
    items:5,
    loop:true,
    margin:0,
    responsive:{
        600:{
            items:5
        }
    },
    nav:true

});


});

То, что я хочу, если бы вы могли просмотреть настоящую карусель в прямом эфире, было бы добавлением этих двух классов «a» и «b».

<div class="owl-carousel">
  <div class="product"> Your Content </div>
  <div class="product b"> Your Content </div>
  <div class="product a"> Your Content </div>
  <div class="product center"> Your Content </div>
  <div class="product a"> Your Content </div>
  <div class="product b"> Your Content </div>
  <div class="product"> Your Content </div>
</div>

поэтому я в основном пытаюсь найти div рядом с центром и второй div рядом с центром


javascript html jquery css owl-carousel-2
person jsg    schedule 14.08.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ну вот, проба за 1 минуту:

$("#owlSlider").owlCarousel({
  navigation : false,
  autoPlay:true,
  afterMove : function (elem) {
    var lng = $('.product').length,
        a = [],
        b = [];
    if(!!$('.center').length) {
      $('.a, .b').removeClass('a b');
      a.push($('.center').index()-1>=0?$('.center').index()-1:lng-1);
      a.push($('.center').index()+1<lng?$('.center').index()+1:0);
      b.push($('.center').index()-2>=0?$('.center').index()-2:lng-2);
      b.push($('.center').index()+2<lng?$('.center').index()+2:$('.center').index()+2-lng);
      a.forEach(function(item){
        $('.product:eq('+item+')').addClass('a');
      });
      b.forEach(function(item){
        $('.product:eq('+item+')').addClass('b');
      });
    }
  }
});

Живите здесь: http://codepen.io/raduchiriac/pen/doLQdg?editors=101< /а>

Следующее, что нужно немного оптимизировать, так как это очень-очень уродливо.

person Radu Chiriac    schedule 14.08.2015
comment
будет ли это работать, если карусель будет в движении, поэтому, как только следующий div станет центром, классы вокруг него изменятся - person jsg; 14.08.2015
comment
Вам нужно будет подключиться к обратному вызову afterMove(). Я думаю, это должно работать, как в моем новом отредактированном ответе. - person Radu Chiriac; 14.08.2015