'Javascript swiper not defined

var swiper = new Swiper('.swiper-container', {
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
},
});

I have gotten the codes from swiper api, navigation for my image slider. But when i input the script in my javascript file, the console log stated swiper is not defined. So how do i go about this?

javascript

Solution 1:^[1]

** you have not included the js file of swiper, now working fine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
	$(function () {
		var swiper = new Swiper('.swiper-container', {
			navigation: {
			  nextEl: '.swiper-button-next',
			  prevEl: '.swiper-button-prev',
			},
		});
	});
});
</script>
</body>
</html>

Solution 2:^[2]

I have the same problem, but I am using Google Optimize and I can't put a script tag in there. So I catch the script by this way:

var swiperScript = document.querySelector('.swiper-script');
var newScript = document.createElement("script");
newScript.src = "https://unpkg.com/[email protected]/swiper-bundle.min.js";
swiperScript.appendChild(newScript);

I can see on "Sources" that it is being identified. But the console still informs me that Swipe is not defined.

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	ChandanKr
Solution 2	Felipe Rodrigues

'Javascript swiper not defined

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]