How to make iDangerous Swiper works on Wordpress - wordpress

Question

I'm learning to use Swiper Sldier in a website using wordpress and Divi theme. I also try to follow a previous thread as a guide.
After following the instruction, the slider does not work, the imgage stuck at the left screen and it does not move as I drag them.
Here is the code on functions.php
/** Function SSwiper **/
function swiper_magic() {
wp_enqueue_script('swiper','https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js', array ('jquery'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
add_action( 'wp_enqueue_scripts', 'swiper_magic' );
On my header:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script>
$(document).ready(function(){
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
jQuery('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
jQuery('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
})
</script>
And this is my HTML
<div class="device">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="/images/slider1-1.png"> </div>
<div class="swiper-slide"> <img src="/images/slider1-2.png"> </div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with HTML</p>
<p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
I don't know why it did not work.
Any help or general suggestions would be greatly appreciated...

Answer 1

Base on swiper demos, I suggest to put your script at the bottom. To work with swiper arrow button the easiest way are:
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
And your html would be:
<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>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Then, if you want to run the callback. Simply use:
swiper.on('slideChange', function () {
console.log('slide changed');
});
slideChange are the event depend how do you want to run the callback. See full swiper event and method
Use this for your php function
function swiper_magic() {
wp_enqueue_script('swiper','https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js', array ('jquery'), true); // true to load at the bottom after jquery
}
add_action( 'wp_enqueue_scripts', 'swiper_magic' );
Hope this help! ;)