отзывчивая опция owl-carousel-o не работает Angular 7.2.9 - PullRequest
Новая
       10

отзывчивая опция owl-carousel-o не работает Angular 7.2.9

0 голосов
/ 15 января 2020

customer-review.component.ts 

customOptionsforslider = {
    loop: false,
    nav: true,
    dots: false,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    lazyLoad: true,
    margin: 30,
    smartSpeed: 500,
    autoplayTimeout: 1000,
    autoplayHoverPause: true,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1.25,
      },
      576: {
        items: 2.25,
      },
      768: {
        items: 3,
      },
      1024: {
        items: 4,
      },
      1280: {
        items: 4,
      },
    },

  };

customer-review.component. html

<owl-carousel-o [options]="customOptionsforslider"></owl-carousel-o>

style.s css

@import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';

слайдер дисплея с отзывчивым устройством не работает. Дисплей слайдера работает только <768 устройство, которое я использовал owl-carousel-o, потому что нам нужен слайдер без jQuery</p>

1 Ответ

0 голосов
/ 15 января 2020

Об отзывчивой настройке Настройка отзывчивого очень проста. Структура адаптивного варианта: 

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
});

Живой пример: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

...