1

我正在尝试将 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>

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

任何帮助将不胜感激...

4

1 回答 1

0

首先确保这个脚本http://www.teatar.hr/js/idangerous.swiper-2.1.min.js在你的 header swiper 初始化代码之前链接。

其次，如果您在标头中初始化 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>
于 2013-12-16T18:06:52.900 回答