How to use Swiper modules from cdn build in browser

Question

I just noticed that using swiper-bundle (https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper-bundle.min.js) cdn is loading a lot of feature that i am not using then i discovered that there's swiper.min.js (https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper.min.js) which is more lightweight but pagination don't work with it even when include the pagination module (https://cdn.jsdelivr.net/npm/swiper@10.3.1/modules/pagination.min.mjs) The docs itself doesn't provide necessary information (https://swiperjs.com/migration-guide-v10#modules-imports) Does anyone knows how to use these module from the browser?

Here is what i tried :

<script src="https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@10.3.1/modules/pagination.min.mjs"></script>
<script>
 const swiper = new Swiper('container', {
  modules : [Pagination],
  pagination: { //pagination(dots)
     el: '.swiper-pagination',
     clickable: true
  },
  ...
 }
</script>

The same code works as expected when i use swiper-bundle but when i am using swiper min and pagination module the pagination simply don't work

Answer 1

If you want to use Swiper modules separately you have to use Javascript modules. You can define a script as a module by adding type="module".

Here is a small example using pagination:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs';
  import Pagination from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/pagination.min.mjs';

   const swiper = new Swiper('.container', {
    modules: [ Pagination ],
    pagination: {
       el: '.swiper-pagination',
       clickable: true
    },
   });
</script>

<div class="container">
  <ul class="swiper-wrapper">
    <li class="swiper-slide">
      <img src="//picsum.photos/720/360?c=1" width="720" height="360" />
    </li>
    <li class="swiper-slide">
      <img src="//picsum.photos/720/360?c=2" width="720" height="360" />
    </li>
    <li class="swiper-slide">
      <img src="//picsum.photos/720/360?c=3" width="720" height="360" />
    </li>
  </ul>
  
  <div class="swiper-pagination"></div>
</div>