Swiper Documentation

Overview

Swiper is a powerful and modern touch slider with hardware accelerated transitions and amazing native behavior. This documentation covers Nopio-specific implementations and customizations.

Resources

Authentication

Login: office@nopio.com
Confirmation link will be sent to office@nopio.com
Contact Piotrek for access

Custom Cursor

To enable custom cursor functionality, add the following options:

new Swiper(element, {
  // Nopio parameters
  cursor: true,
  cursorClass: 'cursor--slider-dark', // Optional custom cursor class
});

Preventing CLF (Content Layout Flicker)

Add the following styles to prevent content layout flicker:

.b--slider-multi-col-overlay {
  .col-card {
    position: relative;
  }
  
  .swiper:not(.swiper-initialized) {
    .swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
 
      @media (min-width: 1024px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
}

Responsive Breakpoints

Example of responsive configuration:

new Swiper(element, {
  breakpoints: {
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 }
  }
});

Navigation and Pagination

To use external navigation and pagination elements:

const { pagination, next, prev } = SwiperElements.get(element, 'section');
 
new Swiper(element, {
  pagination: {
    el: pagination,
  },
  navigation: {
    nextEl: next,
    prevEl: prev,
  }
});

Column Integration

When integrating with columns, use the following configuration:

new Swiper(element, {
  slidesPerView: 'auto',
  slideClass: 'swiper-slide-col',
});

<div class="swiper-slide-col col-sm-6 col-lg-4"></div>

Relative Pagination/Navigation

Use relative positioning for pagination and navigation:

<div class="swiper-pagination swiper-pagination--relative swiper-pagination--vcenter mt-sm">
  <div class="swiper-bullet mx-auto mx-md-2"></div>
</div>

Overflow Slider

For overflow sliders, implement additional slides:

const additionalSlides = swiperSlide.length - 4 > 0 ? swiperSlide.length - 4 : 0;
 
new Swiper(element, {
  slidesPerView: 'auto',
  loop: true,
  slideClass: 'swiper-slide-col',
  additionalSlides: additionalSlides,
});

Custom Effects

Import desired effect modules in your styles:

@import "~node-modules/swiper/modules/effect-fade";
@import "~node-modules/swiper/modules/effect-cube";
@import "~node-modules/swiper/modules/effect-flip";
@import "~node-modules/swiper/modules/effect-coverflow";
@import "~node-modules/swiper/modules/effect-creative";
@import "~node-modules/swiper/modules/effect-cards";

Available Effects

To use effects, import the corresponding module in your JavaScript:

import { EffectCards } from 'swiper/modules';

DATA-SCROLL Animations on slide change

To trigger data-scroll animations (or any animations based on the .js-animation class) on every slide change, you need to:

Import the animation function — for example, runAnimation.
Pass the animation-triggering function into the Swiper instance.
Attach a handler to on.slideChange so the animations run each time the slider changes its active slide.

import runAnimation from '../../../sources/js/components/runAnimation';
 
const runScript = {
    name: 'latest-relationship-slider-multi-cards',
 
    init() {
        this.slider = document.querySelectorAll('.js-exhibition-slider-multi-cards');
 
        if (this.slider.length) {
            this.slider.forEach((element) => {
                this.initSlider(element);
            });
        }
    },
 
    runAnimation(element) {
        const animation = element.querySelectorAll('.js-animation');
        if (animation.length) {
            runAnimation(animation);
        }
    },
 
    initSlider(element) {
        const triggerAnimation = this.runAnimation;
 
        new Swiper(element, {
            // --- your swiper settings here ---
            // ...
            // ... (place any configuration you want)
            // ...
 
            on: {
                slideChange() {
                    triggerAnimation(element);
                },
            },
        });
    }
};
 
window.scriptManager.register(runScript);

NopioModal Class Docs