Как я могу уменьшить количество строк в следующем коде - PullRequest
0 голосов
/ 05 июня 2019

Я использую этот код для двух ползунков Owl-carousl. Я использую два ползунка. Но ползунок проверяет ширину экрана перед его появлением. В зависимости от размера экрана он также контролирует количество отображаемых элементов. Он работает нормально.Но я хочу уменьшить и удалить дублирующиеся строки кода в этом.

$( document ).ready(function() {
    if ($(window).width() < 1025) { 
        $('.owl-carousel').owlCarousel({
           loop:false,
           nav:true,
           dots: false,
           margin:15,
           items:3,
           navText:true,
           responsive:{
             0:{
               items:1,   
             },
             600:{
               items:2, 
             },
             992:{
               items:2,
               stagePadding: 150
             },
             1000:{
               items:2,
               stagePadding:0
             }  
           }
         });
    }

    else { 
     var owl = $('.owl-carousel');
      owl.owlCarousel({
        loop:false,
        margin:10,
        dots: false,
        nav:false,
        items: 1,
        responsive:{
             1200:{
               items:2,
               stagePadding:0
             },
             1400:{
               items:2,
               stagePadding:0
             },
             1600:{
               items:2,
               stagePadding:150
             },              
             1900:{
               items:2,
               stagePadding: 150
             }
           }
        });

        // Custom OwlCarousl Button
      $('.NextBtn').click(function() {
        owl.trigger('next.owl.carousel');
      });
      $('.PreviousBtn').click(function() {
        owl.trigger('prev.owl.carousel');
      });
    }
});

1 Ответ

0 голосов
/ 05 июня 2019

Вы имеете в виду это?

var small = $(window).width() < 1025;
var parms = {
    loop: false,
    nav: true,
    dots: false,
    margin: small ? 15 : 10,
    items: small ? 3 : 1,
    navText: small,
    responsive: {
         0: {items: 1 },
       600: {items: 2 },
       992: {items: 2, stagePadding: 150},
      1000: {items: 2, stagePadding: 0},
      1200: {items: 2, stagePadding: 0},
      1400: {items: 2, stagePadding: 0},
      1600: {items: 2, stagePadding: 150},
      1900: {items: 2, stagePadding: 150}
    }
  }
$(document).ready(function() {
  $('.owl-carousel').owlCarousel(parms);
  if (!small) {
    // Custom OwlCarousl Button
    $('.NextBtn').click(function() {
      owl.trigger('next.owl.carousel');
    });
    $('.PreviousBtn').click(function() {
      owl.trigger('prev.owl.carousel');
    });
  }
});
...