SwiperJS outside the Bootstrap container

Place the following CSS in the project:

.swiper-overflow-container {
    overflow-x: hidden;

    .container {
        overflow: visible;
    }

    .swiper-container {
        overflow: visible;
    }
}

The HTML could be like:

<div class="swiper-overflow-container">
    <div class="container">
        <div class="swiper-container">
            <!-- Required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">
                    <div class="item">
                        <p>First slide</p>
                    </div>
                </div>
                
                <div class="swiper-slide">
                    <div class="item">
                        <p>Second slide</p>
                    </div>
                </div>

                ...
            </div>
        </div>
    </div>
</div>
                        

Simple z-index

A while back I came across some nice z-index articles. When using a z-index I mostly give it a high value. But what if we have a couple of z-indexes with high values…

With the following code it’s possible to have a good overview of all the elements which will be using a z-index.

$z-index: (
    modal              : 200,
    share              : 150,
    navigation         : 100,
    footer             : 90,    
);

@function z-index($key) {
    @return map-get($z-index, $key);
}

@mixin z-index($key) {
    z-index: z-index($key);
}

Scroll margin top

With scroll-margin-top it’s possible to automatically scroll before the selector.

h3 {
  scroll-margin-top: 100px;
}

Smooth scroll behavior

To get some smooth scrolling on your page, just simply add the following code to your stylesheet. With this small piece of code the movement will be smooth instead of a more static behavior.

html {
  scroll-behavior: smooth;
}