First, check my video tutorial if you want to learn how to use Swiper with Oxygen : How To Use Swiper With Oxygen

SwiperJS is the most popular Slider library for a reason.
Whilst it offers ton of options for customization, it can be a little bit tricky to use.

Here are some valuable tips, that can be useful even if you don't use Oxygen (actually most of them are used in the new Breakdance Builder)

• Arrows outside the slider
• Better selectors
• Custom CSS variables
• Size and aspect ratio
• Custom navigation arrows
• Adding your own transition animations
• The Parallax Trick
• Continuous Looping Effect
• Swiper with GSAP
• Some fun examples

Moving the arrows outside the slider

When using the default structure, the arrows will always be on top of the slider.

The common mistake is to move the arrows by changing their current right and left CSS properties. By doing so, they can be outside the container, but you will have to deal with the media-queries to change their positions for each breakpoints.

Better selectors

To keep the default style, you should always use the default selectors:

const swiper = new Swiper('.swiper', {
    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },
    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

But if you plan to have more than one slider in a page, don't forget to add a unique class or ID:

const swiper = new Swiper('.swiper-container-1 .swiper', {
    // If we need pagination
    pagination: {
        el: '.swiper-container-1 .swiper-pagination',
    },
    // Navigation arrows
    navigation: {
        nextEl: '.swiper-container-1 .swiper-button-next',
        prevEl: '.swiper-container-1 .swiper-button-prev',
    },
});

Custom CSS variables

Swiper has some ready-made CSS variable so you can easily style some of his components.

Apply them to the :root if you want all your sliders to have the same style, or to their main containers.

Here are the CSS variables with their default values:

.swiper-container-1 {
    --swiper-theme-color: #007aff;

    --swiper-navigation-size: 44px;
    --swiper-navigation-color: var(--swiper-theme-color);

    --swiper-pagination-color: var(--swiper-theme-color);
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-vertical-gap: 6px;
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-width: 8px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-inactive-color: black;
    --swiper-pagination-bullet-inactive-opacity: .2;
    --swiper-pagination-bullet-horizontal-gap: 4px;

    --swiper-preloader-color: var(--swiper-theme-color);
    --swiper-virtual-size: 80px;
}

Size and Aspect ratio

There are different way to set the size of a slider.

If you want it to be 400px high all the time, whatever the resolution, and use some media-queries if you want to be smaller/bigger is smaller resolutions.

.swiper {
    width: 100%;
    height: 400px;
}

If you prefer to have a specific aspect ratio, you have to set the height to auto:

.swiper {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9
}

if you want your content to have a specific aspect ratio, like all square, then you set :

.swiper {
    width: 100%;
    height: auto;
}

.swiper-slide {
    aspect-ratio: 1
}

note that the aspect-ratio CSS property is not supported by some old browsers. You can use the padding trick instead.

Custom navigation arrows

The navigation arrows are very minimalist and kind of trouble to customize.
So instead of using the inbuild arrows, we can use our own SVG files, or better, the Oxygen Icon element :

In that case, we must use our own classes, instead of the default ones:

// Navigation arrows
navigation: {
    nextEl: '.my-cool-arrow-next',
    prevEl: '.my-cool-arrow-prev',
}

But you have to deal with the positioning by yourself, as swiper won't apply any styling.

.my-cool-arrow-prev {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translatey(-50%);
    z-index: 10;
    cursor: pointer;
}

.my-cool-arrow-next {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translatey(-50%);
    z-index: 10;
    cursor: pointer;
}

I have centered them vertically, as the same position of the swiper default one, but actually you can put them anywhere you want. There is no limitation in term of styling and positioning.

You can see plenty of examples in my DEZIGN4FUN slider set

Adding your own transition animations

With only few classes, we can control and customize the transition animations

/* the default style of each slide */
.swiper-slide {}

/* the active slide */
.swiper-slide-active {}

/* the slide just next to the active slide */
.swiper-slide-next {}

/* the slide before the active slide */
.swiper-slide-prev {}

/* same classes but for the duplicate slides, when in loop mode */

.swiper-slide-duplicate-active {}
.swiper-slide-duplicate-next {}
.swiper-slide-duplicate-prev {}

Important

1 - You must use the -duplicate- classes (see example below) when you are in loop mode, or your animation won't work properly

2 - Do not modify these classes directly! It might not always work as expected. Instead, style and animate their content.

DON'T DO THAT: .swiper-slide { opacity: 0.1 }

DO THAT: .swiper-slide img { opacity: 0.1 }

Example :

The following code will set all the slides with an opacity of 0.1
The active slide will have an opacity of 1
The next and previous slides will have an opacity of 1 and will be grey.

.swiper-slide img {
    opacity: 0.1;
    transition: .3s ease all
}

.swiper-slide-active img,
.swiper-slide-duplicate-active img {
    opacity: 1
}

.swiper-slide-next img,
.swiper-slide-duplicate-next img {
    filter: grayscale(100%);
    opacity: 1;
}

.swiper-slide-prev img,
.swiper-slide-duplicate-prev img {
    filter: grayscale(100%);
    opacity: 1;
}

Notice the difference between the 2 following sliders:
- The first one has the default settings, which means that the active slide is the first one on the left.
- The second one has the option centeredSlides:true, which means that the active slide is centered.

The Parallax Trick

We can make some parallax effects with Swiper ( https://swiperjs.com/swiper-api#parallax ) but this little trick is not about that.

Check the 2 following sliders. The first one has the parallax option set to false. The second one has the parallax option set to true.
Even if they don't have any parallax effect, there is still a difference between them.

Click and drag (to the right and left) on each sliders. Do you see a difference?

In the second one (parallax:true) the CSS effects we have added will still be animated while dragging the slide. (which is not the case by default).

Continuous Looping Effect

Swiper doesn't have an option to make a continuous looping scrolling effect, so the only way is to set the autoplay delay to 0, and change the easing to a linear transition.

autoplay: {
    delay: 0,
},

.swiper-wrapper {
    transition-timing-function: linear
}

It's not very smooth and there is a kind of little lag sometimes. Some other slider libs have better option for that kind of effect. 

Swiper with GSAP

Check this tutorial

Some fun examples

I have made plenty of examples in my DEZIGN4FUN website, using these same exact techniques:

Testimonial Sliders - Content Tickers Sliders - Dynamic Sliders