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?
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?
Share Improve this question asked Nov 28, 2019 at 7:48 JavierJavier 391 gold badge1 silver badge4 bronze badges 7- 3 How did you import the Swiper library? – Jacob Penney Commented Nov 28, 2019 at 7:50
-
Did you add the .js file before you
new Swiper()? – Eddie Commented Nov 28, 2019 at 7:50 - Yes I did, in my index.js file – Javier Commented Nov 28, 2019 at 7:52
- I import it from the github, and reference the codes from there – Javier Commented Nov 28, 2019 at 7:54
- Can you show us how you imported Swiper, please? – CodeF0x Commented Nov 28, 2019 at 7:58
2 Answers
Reset to default 2I 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./[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.
You have not included the js file of swiper, with this it should work 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./ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare./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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744301632a4567529.html
评论列表（0条）