how to reduce slides in mobile using loryjs | Javascript

Question

I am using loryjs in my project due to simple code, dependency-free. Everything is working fine except it responsiveness

it shows 4 slides in desktop and 4 slides in mobile(with reduced width),

I want it to show 4 slides in desktop and slides in mobile how can I achieve this

Answer 1

User Breakpoints
for example:

const options = [
    {
      breakpoint: null,
      settings: {
        infinite: 1,
      },
    },
    {
      breakpoint: '(min-width: 43.75em)',
      settings: {
        infinite: 2,
      },
    },
    {
      breakpoint: '(min-width: 75em)',
      settings: {
        infinite: 4,
      },
    },
  ];

Maybe this link will help you

Here is code which I used in Slick Carousel to make it responsive

slideConfig = {
    'slidesToShow': 5,
    'slidesToScroll': 5,
    'dots' : true,
    'infinite': false,
    'responsive': [
      {
        breakpoint: 1050,
        settings: {
          'slidesToShow': 3,
          'slidesToScroll': 3,
        }
      },
      {
        breakpoint: 600,
        settings: {
          'slidesToShow': 2,
          'slidesToScroll': 2,
        }
      },
    ],

  };