Simple Swiper.js image slider with custom navigation

COPY COMPONENT

After copying the component we need to include Swiper.js scripts. Add the links for the styles and swiper.js script from the bellow link to the <head> custom code of the page.

  1. Copy the scripts from here.
  2. Then copy the below code to the Before <body> tag in the custom code of the page:
<script>
const swiper = new Swiper('.swiper-gallery', {
  slidesPerView: 1.5,
  spaceBetween: 10,
  // If we need pagination
  pagination: {
  	clickable: true,
    el: '.swiper-pagination',
  },
  // Navigation arrows
  navigation: {
    nextEl: '.custom-nav-container .swiper-button-next',
    prevEl: '.custom-nav-container .swiper-button-prev',
  },
  // Responsive breakpoints
  breakpoints: {
    768: {
      slidesPerView: 2,
    },
    991: {
      slidesPerView: 3,
      spaceBetween: 20
    }
  }
});
</script>