I'm trying to integrate Swiper into a Wordpress theme but no luck.
This is from my functions.php:
function swiper_magic() {
wp_enqueue_script( 'swiper','http://www.teatar.hr/js/idangerous.swiper-2.1.min.js', array ('jquery'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
add_action( 'wp_enqueue_scripts', 'swiper_magic' );
this is from my header.php
<script>
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 HTML markup:
<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>
Everything looks the way it should, but it's just now working...
any help would be greatly appreciated...
First of all make sure that this scrip http://www.teatar.hr/js/idangerous.swiper-2.1.min.js linked before your header swiper initialization code.
Second, if you initialize Swiper in header, you should do it within $(document).ready like: