'Integration of swiper

I am trying to integrate swiper with my website. I am quite new to programming though. I have added the CSS and HTML to my code but I'm not sure how to initialise the swiper.

I have a project called swiper-common.js which contains the following code:

 var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 3000,
            loop: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationBulletRender: function (index, className) {
                return '<span class="' + className + '"></span>';
            }
        });

I guess I need to call this or insert it into the main page I am showing my swiper on. I tried adding

<script>
 var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 3000,
            loop: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationBulletRender: function (index, className) {
                return '<span class="' + className + '"></span>';
            }
        });
</script>

but I get the following error: JavaScript runtime error: 'Swiper' is undefined.

Everything else in the code works i.e. the styling and the image shown although the next and previous buttons are not functioning nor is the autoplay

javascriptcssimagesliderswiper


Solution 1:[1]

I think you should check your environment. A simple project would look like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Swiper demo</title> 
<link rel="stylesheet" href="swiper.min.css">

</head>
<body>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>     
    <div class="swiper-pagination"></div>     
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<script src="swiper.min.js"></script> <!-- Important: This should be first when running below script-->

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
    });
    </script>
</body>
</html>

Keep in mind that you need to include the swiper.min.js before you running the script of the new Swiper

Solution 2:[2]

First of all You should register necessary components

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],
    ...
  });

Or

 ?Swiper?.?use?(?[?Pagination?,? ?History?]?)?;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rotan075
Solution 2 Rodion

Related Questions