Question

我正在将这段代码用于两个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');
      });
    }
});

Answer 1

你是这个意思吗？

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');
    });
  }
});

如何减少以下代码中的行数

1 个答案: