Need help help knowing where to import Swiperjs

Question

Like the title says, I'm in need of help knowing to import swiperjs. I'm fairly new to Javascript so I'm still learning the ropes.

I've already installed it via NPM and if you read the document is says "By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too". My problem and question is how and where? Do I go to configure them? Do I go inside Swiperjs core.js and configure it there or do I use my current app.js and add the import there? or make a new js file and do it there?

Thank you for taking the time to answer my question.

Ps: All I'm using is html, css, sass, javascript, Jquery as a framework and using Babel

Answer 1

You can import Swiperjs inside your app.js if that is your main file.

You import it with this code:

  // core version + navigation, pagination modules:
  import Swiper, { Navigation, Pagination } from 'swiper';
  // import Swiper and modules styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

  // configure Swiper to use modules
  Swiper.use([Navigation, Pagination]);

  // init Swiper:
  const swiper = new Swiper(...);

Answer 2

If anyone not using webpack then just use require

const Swiper = require('../../node_modules/swiper/swiper-bundle');

Note: correct the path of your node_modules folder. For me, nothing worked above.