Getting Started With Swiper

If you are upgrading from Swiper 6 to Swiper 7, check out Migration Guide to Swiper 7


There are few options on how to include/import Swiper into your project:

Install from NPM

We can install Swiper from NPM

  $ npm install swiper
  // import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/css';

  const swiper = new Swiper(...);

By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:

  // 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';

  // init Swiper:
  const swiper = new Swiper('.swiper', {
    // configure Swiper to use modules
    modules: [Navigation, Pagination],

If you want to import Swiper with all modules (bundle) then it should be imported from swiper/bundle:

  // import Swiper bundle with all modules installed
  import Swiper from 'swiper/bundle';

  // import styles bundle
  import 'swiper/css/bundle';

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

Use Swiper from CDN

If you don't want to include Swiper files in your project, you may use it from CDN. The following files are available:


<script src=""></script>

If you use ES modules in browser, there is a CDN version for that too:

<script type="module">
  import Swiper from ''

  const swiper = new Swiper(...)

Download assets

If you want to use Swiper assets locally, you can directly download them from

Add Swiper HTML Layout

Now, we need to add basic Swiper layout to our app:

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>

Swiper CSS Styles/Size

In addition to Swiper's CSS styles, we may need to add some custom styles to set Swiper size:

.swiper {
  width: 600px;
  height: 300px;

Initialize Swiper

Finally, we need to initialize Swiper in JS:

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',

What next?

As you see it is really easy to integrate Swiper into your website or app. So here are your next steps: