Javascript swiper not defined

Question

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?

Answer 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>

Answer 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/swiper@6.4.8/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.

Javascript swiper not defined

Question

2 answers

solution1
2 2019-11-28 08:07:09

solution2
0 2022-04-14 17:10:43

Javascript swiper not defined

Question

2 answers

solution1 2 2019-11-28 08:07:09

solution2 0 2022-04-14 17:10:43

solution1
2 2019-11-28 08:07:09

solution2
0 2022-04-14 17:10:43