Slides will have fixed- width and it will maintain that size without shrinking or Scaling. It give you full control over the layout shift.

Script
Copy Components
Documentation
Video Tutorial

Step #1

Copy the following code in <head> tag of page settings

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.1/dist/css/splide-core.min.css">

Step #2

Copy the following code and place at before </body> tag in page settings


<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.1/dist/js/splide.min.js"></script>

<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var progressSlider = new Splide( '#progress-bar-slider', {
      type   : 'loop',
      perMove: 1,
      perPage: 3,
      gap: '2%',
      padding: {right: '10%'},
      speed: 800,
      easing: 'cubic-bezier(.22,.48,.23,.92)',
      //fixedWidth : '20rem',
      pagination: false,
      focus: 1,
      breakpoints: {
        991: {
        	perPage: 2,
          padding: { right: '10%' },
        },
        767: {
        	perPage: 1,
          padding: { right: '10%' },
        },
        477: {
          perPage: 1,
          padding: { right: '10%' },
        },
      },
      classes: {
        prev  : 'splide__arrow--prev',
        next  : 'splide__arrow--next',
        pagination: 'splide__pagination',
        page: 'splide__pagination__page is-outlined',
      },
    });
    
    var bar    = progressSlider.root.querySelector( '.splide__progress__bar' );
    
    
  // Update the bar width:
  progressSlider.on( 'mounted move', function () {
    var end = progressSlider.Components.Controller.getEnd() + 1;
    bar.style.width = String( 100 * ( progressSlider.index + 1 ) / end ) + '%';
  });
  
    progressSlider.mount();
  });
</script>


<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.1/dist/js/splide.min.js"></script>

<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var progressSlider = new Splide( '#progress-bar-slider', {
      type   : 'loop',
      perMove: 1,
      perPage: 3,
      gap: '2%',
      padding: {right: '10%'},
      speed: 800,
      easing: 'cubic-bezier(.22,.48,.23,.92)',
      //fixedWidth : '20rem',
      pagination: false,
      focus: 1,
      breakpoints: {
        991: {
        	perPage: 2,
          padding: { right: '10%' },
        },
        767: {
        	perPage: 1,
          padding: { right: '10%' },
        },
        477: {
          perPage: 1,
          padding: { right: '10%' },
        },
      },
      classes: {
        prev  : 'splide__arrow--prev',
        next  : 'splide__arrow--next',
        pagination: 'splide__pagination',
        page: 'splide__pagination__page is-outlined',
      },
    });
    
    var bar    = progressSlider.root.querySelector( '.splide__progress__bar' );
    
    
  // Update the bar width:
  progressSlider.on( 'mounted move', function () {
    var end = progressSlider.Components.Controller.getEnd() + 1;
    bar.style.width = String( 100 * ( progressSlider.index + 1 ) / end ) + '%';
  });
  
    progressSlider.mount();
  });
</script>

Click to copy!

Step #3

Copy this slider to your webflow project 😉

Static:

Copy and paste this Static Slider directly on Webflow

Copy this example

CMS / Ecommerce ready

Copy and paste this CMS Ready Slider directly on Webflow

Copy this example

Step #4 (Optional)

Below is a list of attributes and options that are used to create this slider functionality.

If you are a person who understand by watching video's then we got you covered goto next step.

type
If you dont want the slider to be looping around then you can remove that attribute from the code.
'slide'
A carousel with the slide transition
'loop'
A carousel with infinite slides
'fade'
A carousel with the fade transition. This does not support the perPage option
perPage
Determines the number of slides to display in a page. You can adjust these based on each screen width/breakpoint.
perMove
Determines the number of slides to move at once
gap
The gap between slides. The CSS format is acceptable (px, rem, % and etc)
padding
Sets padding left/right or top/bottom of the carousel. The CSS format is acceptable.
This is especially used to create the effect where last slide is peaking out a little bit.
// By number (px)
padding: 10

// By the CSS format
padding: '1rem'

// Specifies each value for a horizontal carousel
padding: { left: 10, right: 20 }
padding: { left: '1rem', right: '2rem' }

// Specifies each value for a vertical carousel
padding: { top: 10, bottom: 20 }
focus
Determines which slide should be active if the carousel has multiple slides in a page.
pagination
Determines whether to create pagination (indicator dots) or not
speed
The transition speed in milliseconds. If 0, the carousel immediately jumps to the target slide.
easing
The timing function for the CSS transition, such as linear, ease or cubic-bezier().
The best and easiest way is to copy this value from Webflow (Any Transition ease value you want.)
classes
This attribute is an object and is used to define custom elements for slider-arrows, pagination-dots and etc..
‍
- If you are using custom arrows and pagination element as in this example please make sure that you add the classes as below.
classes: {

// Add classes for arrows.

arrows: 'splide__arrows your-class-arrows',
arrow : 'splide__arrow your-class-arrow',
prev : 'splide__arrow--prev your-class-prev',
next : 'splide__arrow--next your-class-next',

// Add classes for pagination.
‍
pagination: 'splide__pagination your-class-pagination', // container
page : 'splide__pagination__page your-class-page', // each button

},
breakpoints
This attribute is to make adjustments to other breakpoints if you want. You can adjust how many slides should be visible on the mobile and etc...
‍
We have used the Webflow breakpoints in the code so that its easy for you to understand.

This example reduces the number of slides under : 640px {This property act as max-width in css media queries.}
{

  perPage: 4,
  breakpoints: {
     640: {
        perPage: 2,
     },
   }
}