Prepare swiper slides width with bootstrap grid to prevent layout jump on page load

SASS Swiper + Bootstrap slides mixin

@use "sass:map";

@mixin preset-slides-width($configuration: (), $gutter: $grid-gutter-width) {
  @if type-of($gutter) == 'string' {
    @error 'The second parameter of mixin must be a number. String is provided.';
  }

  width: 100%;
  margin-right: $gutter;

  @each $breakpoint, $count in $configuration {
    $mediaValue: $breakpoint;
    @if type-of($breakpoint) == 'string' {
      $mediaValue: map.get($grid-breakpoints, $breakpoint);
      @if ($mediaValue == null) {
        @error ('Breakpoint with name "' + #{$breakpoint} + '" was not found at grid breakpoints list');
      }
    }

    @media screen and (min-width: $mediaValue) {
      width: calc((100% - #{$gutter * ($count - 1)}) / #{$count});
    }
  }
}

// Example usage
.my-swiper-slider {
  .swiper-slide {
    @include preset-slides-width(('sm': 2, 'md': 3, 'xl': 4), 32px);
  }
}