Почему не правильно слайдер bootstrap?

Вот отрывок кода jQuery

$('.features-slaider').slick({
         infinite: true,
         slidesToShow: 4,
         slidesToScroll: 1,

         responsive: [
    {
      breakpoint: 991,
      settings: {
        slidesToShow: 2,
        prevArrow: '<button class="str-l str"></button>',
        nextArrow: '<button class="str-r str"></button>',  
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        prevArrow: '<button class="str-l str"></button>',
        nextArrow: '<button class="str-r str"></button>',  
        slidesToScroll: 1
      }
    }
  ]    
       });

Когда я ввожу breakpoint: 991, то слайдер начинает работать только когда экран 977px и меньше.
Но как только я ввожу breakpoint: 1007, то все работает когда экран 991px и меньше .
В чем может быть проблема? Подскажите пожалуйста, боду очень благодарен )