Image Slider

<div class="module module--images">
      <div class="inner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
                                    <div class="slide swiper-slide">
                <img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/170614_Werte_Slider-scaled.jpg' alt='170614 Werte Slider' />                <div class="content">
                                                    </div>
              </div>
                                                <div class="slide swiper-slide">
                <img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/170614_Werte_Slider2-scaled.jpg' alt='170614 Werte Slider2' />                <div class="content">
                                                    </div>
              </div>
                                                <div class="slide swiper-slide">
                <img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/170614_Werte_Slider3-scaled.jpg' alt='170614 Werte Slider3' />                <div class="content">
                                                    </div>
              </div>
                              </div>
      </div>
      <div class="pagination"></div>
    </div>
  </div>

import Swiper, { Pagination } from 'swiper';

(function () {
  function init() {
    document.querySelectorAll('.module--images').forEach(module => {
      const container = module.querySelector('.swiper-container');
      const pagination = module.querySelector('.pagination');
      Swiper.use([Pagination]);
      // eslint-disable-next-line no-new
      new Swiper(container,{
        loop: true,
        autoHeight: true,
        pagination: {
          el: pagination,
          bulletClass: 'bullet',
          bulletActiveClass: 'active',
          clickable: true
        }
      });
    })
  }
  document.addEventListener("DOMContentLoaded", init);
})();