iDangero.us Swiper集成

Question

我试图把斯威珀整合到Wordpress的主题中，但没有运气。

这是我的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' );

这是我的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> 

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

一切看起来都像它应该的样子，但它现在还在工作.

任何帮助都将不胜感激.

Answer 1

首先，确保在头刷初始化代码之前链接此http://www.teatar.hr/js/idangerous.swiper-2.1.min.js。

其次，如果您初始化了头中的Swiper，您应该在$(document).ready中这样做：

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