How can I show only a certain amount of steps on progress-indicator?

Question

I currently have this code below for a progress-indicator. Is there a way I can show only 3 steps at a time and use arrows to navigate to see steps 4, 5, 6, etc.? Whenever I add more steps, the number of points keeps growing on the progress indicator. This would be a problem when dealing with a lot of steps as the progress-indicator would get crowded.

update: I have tried adding in-line styling for max-width and overflow-x to both the "slds-progress" and "slds-progress__list" divs.

<div class="slds-region_small slds-has-overflow" style="margin-top: 1%; margin-bottom:1%">
                <div class="slds-progress" style="max-width: 50%; overflow-x:scroll;">
                    <ol class="slds-progress__list">
                        <li class="slds-progress__item slds-is-active" value="1">
                            <div class="iconBox">
                                <lightning-icon 
                                    icon-name="utility:email" 
                                    title="email"
                                    id="email"
                                ></lightning-icon>
                                <span class="slds-assistive-text">Step 1 - Active</span>
                            </div>
                        </li>
                        <li class="slds-progress__item" value="2">
                            <div class="iconBox">
                                    <lightning-icon 
                                    icon-name="utility:task" 
                                    title="task">
                                    </lightning-icon>
                                <span class="slds-assistive-text">Step 2</span>
                            </div>
                        </li>

                        <li class="slds-progress__item" value="3">
                            <div class="iconBox">
                                    <lightning-icon 
                                    icon-name="utility:error" 
                                    title="error">
                                    </lightning-icon>
                                <span class="slds-assistive-text">Step 3</span>
                            </div>
                        </li>

                        <li class="slds-progress__item" value="4">
                            <div class="iconBox">
                                    <lightning-icon 
                                    icon-name="utility:task" 
                                    title="task">
                                <span class="slds-assistive-text">Step 4 </span>
                            </div>
                        </li>

                        <li class="slds-progress__item" value="5">
                            <div class="iconBox">
                                    <lightning-icon 
                                    icon-name="utility:task" 
                                    title="task">
                                <span class="slds-assistive-text">Step 5 </span>
                            </div>
                        </li>
                    </ol>
                    <div class="slds-progress-bar slds-progress-bar_x-small" 
                        aria-valuemin="0" 
                        aria-valuemax="100" 
                        aria-valuenow="0" 
                        role="progressbar" 
                        style="color:rgb(8, 102, 8);">
                    <span class="slds-progress-bar__value" style="width:0%">
                        <span class="slds-assistive-text">Progress: 0%</span>
                    </span>
                    </div>
                </div>
            </div>

Answer 1

the SLDS Blueprints have an example for handling this type of scenario:

in a nutshell, you can set a max width to your path component alongside a CSS overflow Property, that way, you can scroll through a set number of steps in your path indicator.

example css properties:

max-width: some-width;
overflow-x: auto;