Question

我正在尝试将Swiper整合到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

首先确保在标题swiper初始化代码之前链接了此文档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>

iDangero.us Swiper Wordpress集成

1 个答案: