Login With Github

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.

2 Comments

temp

Very helpful walkthrough – thanks. But at the end I cannot locate a dist folder. Seems to build successfully, just not sure where it is landing.

@kerns

i think u should update npm,

also in swiper doc missing this

<pre>

npm install --global gulp

</pre>