Making Custom Version of Swiper

You have two options of making custom version of Swiper.

1. Using ES-module

If you use bundler with ES-modules support in your project you can import only the modules you need:

// Import Swiper and modules
import { Swiper, Navigation, Pagination, Scrollbar } from 'swiper/dist/js/swiper.esm.js';

// Install modules
Swiper.use([Navigation, Pagination, Scrollbar]);

// Now you can use Swiper
var swiper = new Swiper('.swiper-container', {
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  // ...

The following modules are exported from swiper.esm.js:

  • Swiper – core library
  • Virtual – Virtual Slides module
  • Keyboard – Keyboard Control module
  • Mousewheel – Mousewheel Control module
  • Navigation – Navigation module
  • Pagination – Pagination module
  • Scrollbar – Scrollbar module
  • Parallax – Parallax module
  • Zoom – Zoom module
  • Lazy – Lazy module
  • Controller – Controller module
  • A11y – Accessibility module
  • History – History Navigation module
  • HashNavigation – Hash Navigation module
  • Autoplay – Autoplay module
  • EffectFade – Fade Effect module
  • EffectCube – Cube Effect module
  • EffectFlip – Flip Effect module
  • EffectCoverflow – Coverflow Effect module

2. Using Build Script

Swiper comes with gulp builder that allows to build custom library version where you may include only required modules. We need the following:

1.Download and unzip Swiper GitHub repository to local folder

2.Install Node.js (if not installed)

3.Install Gulp (if not installed) by executing the following command in terminal:

$ npm install --global gulp

4.Now, we need to install required dependencies. Go to the folder with downloaded and unzipped Swiper repository and execute in terminal:

$ npm install

5.Open scripts/build-config.js file:

module.exports = {
  // remove components you don't need
  components: [
  // target device, can be "desktop" or "universal"
  target: 'universal',
  // default color of navigation elements
  themeColor: '#007aff',
  // additional color to be included
  colors: {
    white: '#ffffff',
    black: '#000000',

6.Now, we are ready to build custom version of Swiper:

$ npm run build:prod

7.That is all. Generated CSS and JS files and their minified versions will be available in dist/ folder.

Leave a Comment

Your email address will not be published.