Breakpoints on VARIABLE WIDTH and MULTIPLE SLIDES TO SCROLL

[roughiain]

The ability to set the number of slides to show for different widths

document.addEventListener('DOMContentLoaded', function () {
        var multiSlides = document.querySelector('.js_multislides');

        lory(multiSlides, {
            infinite: 4,
            slidesToScroll: 4
            breakpoints[
                   {
                        width:600px,
                       slidesToShow:3
                   },
                  {
                       width:320px,
                       slidesToShow:1,
                       slidesToScroll:1
                  }]

        });
    });

[nstanard]

@rougiain

Will have to look into this. In the next few months I will be working on Lory 2.0. My plan is to go through all existing features and options and smooth them all out. I will see about adding this to the feature planning I put together but in the end will side with whatever decision Max makes on this requested feature.

[jimmaaay]

I know this is an old thread but I had a similar issue and thought my solution might be useful to someone else with the issue

import { lory } from 'lory.js';
import isEqual from 'lodash.isequal';


const carousel = document.querySelector('.home-box__carousel');


if (carousel != null) {

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

  const getValidOption = () => {
    return options.reduce((ret, obj) => {
      if (obj.breakpoint == null || ret === false || window.matchMedia(obj.breakpoint).matches) return obj.settings;
      return ret;
    }, false);
  }

  let carouselOptions = getValidOption();
  

  const loryCarousel = lory(carousel, carouselOptions);

  carousel.addEventListener('on.lory.resize', () => {
    const newOptions = getValidOption();
    if (isEqual(carouselOptions, newOptions)) return;
    carouselOptions = newOptions;
    loryCarousel.setup();
  });

}

.js_slide{ 
  width: 100%;
}

@media (min-width:43.75em) {

  .js_slide{ 
    width: 50%;
  }

}

@media (min-width:75em) {
  
  .js_slide{ 
    width: 25%;
  }
  
}

[hernimen]

any news?

[darith27]

Any updates on this feature?