How to update Splide when browser size is adjusted to new breakpoint

[adamyates91]

Splide currently disappears when the browser size is adjusted to a breakpoint. Is this a bug? How can I force the Splide to still be present when a breakpoint is hit?

Current code below for reference:

`<script>
document.body.onload=()=>{

      // 1. work slider
      var splide = new Splide( '.work',
      {
        slider   : false,
        perMove  : 1,
        perPage  : 2,
        breakpoints: {
        767:  {perPage: 1,},
        },
        gap : 40,
        pagination : false,
        arrows     : false,
      }
      );

      var bar    = splide.root.querySelector( '.my-slider-progress-bar' );

      // update the bar width:
      splide.on( 'mounted move', function () {
        var end = splide.Components.Controller.getEnd() + 1;
        bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
      } );

      splide.mount();

      // 2. services slider
      var splide2 = new Splide( '.services', 
      {
        slider   : false,
        perMove  : 2,
        perPage  : 3,
        breakpoints: {
        1024: {perPage: 2,},
        767:  {perPage: 1,},
        },
        gap : 40,
        pagination : false,
        arrows     : false,
      }
      );
      var bar2    = splide2.root.querySelector( '.my-slider-progress-bar-bottom' );

      // update the bar width:
      splide2.on( 'mounted move', function () {
        var end = splide2.Components.Controller.getEnd() + 1;
        bar2.style.width = String( 100 * ( splide2.index + 1 ) / end ) + '%';
      } );

      splide2.mount();

    }

</script>`

[NaotoshiFujita]

The breakpoints option is working correctly:
https://codesandbox.io/s/center-pdj1x

Disable all your local styles and check the behavior.

[adamyates91]

Thank you. It was a CSS issue. 'display:inherit!important;' on the class solved the issue.