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: [
    'virtual',
    'keyboard',
    'mousewheel',
    'navigation',
    'pagination',
    'scrollbar',
    'parallax',
    'zoom',
    'lazy',
    'controller',
    'a11y',
    'history',
    'hash-navigation',
    'autoplay',
    'effect-fade',
    'effect-cube',
    'effect-flip',
    'effect-coverflow',
  ],
  // 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.