Сова Карусель использует один скрипт jQuery для 2 или более разделов - PullRequest
Новая
       38

Сова Карусель использует один скрипт jQuery для 2 или более разделов

0 голосов
/ 02 июля 2018

Может кто-нибудь знать, как изменить мой скрипт jQuery, чтобы иметь 3 элемента и 4 элемента в разных разделах страницы? Теоретически в разделе «Сервис» у меня есть 4 предмета, а в разделе «Блог» - 3 предмета.

Теперь, если я использую этот скрипт, в моем разделе блога будет 4 элемента, и они искажены. Могу ли я использовать вариант с селектором детей? Как это профессионально закодировать? 

$('.owl-carousel').owlCarousel({
    loop:true,
    responsiveClass:true,
    dots:true,
    responsive:{
        0:{
            items:1,
            nav: true,
            dots:true
        },
        600:{
            items:2,
            nav:true,
            dots:true
        },
        1000:{
            items:4,
            nav: true,
            loop:false,
            dots:true
        }
    }
});

1 Ответ

0 голосов
/ 11 июля 2018

Я должен был сделать это. Добавьте класс owl-3 или owl-4 к соответствующей карусели и вместо этого инициализируйте этот код. 

/* Set up owl-3 and owl-4 */
jQuery(document).ready(function(){
  if (jQuery('.owl-4').length) {
  // https://owlcarousel2.github.io/OwlCarousel2/docs
  jQuery('.owl-4').owlCarousel({
    loop:true,
    margin:30,
    nav:true,
    navText:["",""],
    dots:false,
    responsive:{
      0:{
        items:1
      },
      576:{
        items:2
      },
      768:{
        items:3
      },
      1000:{
        items:4
      }
    }
  });
}
if (jQuery('.owl-3').length) {
  jQuery('.owl-3').owlCarousel({
    loop:true,
    margin:30,
    nav:true,
    navText : ["",""],
    dots:false,
    responsive:{
      0:{
        items:1
      },
      576:{
        items:2
      },
      992:{
        items:3
      }
    }
  });    
 }
}
...