elementor4fun-logo
Last update: July 29, 2022

SwiperJS - Tips and Good Practice

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)

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.

astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45

The best and safest way to do, it's to change the structure of the full slider.

Here is the original structure (notice the pagination and buttons are at the same level of swiper-wrapper)

And here is the new structure.

We  have added a new container (that we have called swiper-container), and we have moved the pagination and buttons so now they are at the same level as swiper (and not swiper-wrapper, as it was previously).

We then add some CSS for our new container.
And finally we just need to adjust the padding size for your arrows:

/* the new container */
.swiper-container {
    position: relative;
    width: 100%;
    padding: 0 40px;
}

/* fix the buttons positions */
.swiper-button-prev {
    left: 0;
}

.swiper-button-next {
    right: 0;
}

Now our arrows are outside and it's fully responsive:

astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45

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.

astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45
astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45

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.

astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45
astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45

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).

astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45
astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45

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. 

astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45

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

astronaut-football_72373-21
astronauts-enjoying-space_72373-32
astronaut-rock_72373-35
astronaut-suicide_72373-42
battle-space_72373-44
dancing-moon_72373-45

Some cool and
useless effect

closealign-justifyarrow-leftarrow-rightchevron-downcaret-up