Swiper is not defined - wordpress

Question

I try to use Swiper js in my wordpress website with my custom theme.
https://swiperjs.com/demos/270-mousewheel-control/core.html
I always have a js error in my console : 'Swiper' is not defined
My code :
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
In my custom JS file, i add :
var swiper = new Swiper(".swiper-container", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});

Answer 1

I was going crazy trying to resolve the same issue.
Example Swiper script:
https://codepen.io/simranthapa/pen/eYmjYYw
In my case the issue was:
When using code from codepen.io, you have to click on 'settings' to check if any external css/js are required to make the script work. Don't just rely on the content it shows you in the 3 boxes, as that is not always the full code.
Add the JS files from the CDN to your header.php file. There should be one for the full swiper code and one for jquery in general, eg:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js></script>
and:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
Add the page jquery in the wordpress page you want the swiper to appear, but wrap it in this:
jQuery(document).ready(function() {
//your code here
});
All 3 issues needed addressing before the slider/swiper finally worked!
Hope this helps somebody.
Might not be the most optimised approach, but it proves that it CAN work and that you are still sane.