iDangero.us Swiper Wordpress integration

Question

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

Answer 1

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:

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