如何使 iDangerous Swiper 在 Wordpress 上工作答案

【问题标题】：How to make iDangerous Swiper works on Wordpress如何使 iDangerous Swiper 在 Wordpress 上工作
【发布时间】：2019-04-09 11:50:51
【问题描述】：

我正在学习在使用 wordpress 和 Divi 主题的网站中使用 Swiper Sldier。我也尝试按照以前的线程作为指导。

按说明操作后，滑块不起作用，图像卡在左侧屏幕上，拖动时它不动。

这是functions.php上的代码

/** Function SSwiper **/
function swiper_magic() {
wp_enqueue_script('swiper','https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js', array ('jquery')); 
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 
add_action( 'wp_enqueue_scripts', 'swiper_magic' );

在我的标题上：


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
 <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>

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

我不知道为什么它不起作用。

任何帮助或一般性建议将不胜感激...

【问题讨论】：

标签： wordpress swiper

【解决方案1】：

基于 swiper 演示，我建议将您的脚本放在底部。要使用滑动箭头按钮，最简单的方法是：

 var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
  },
});

您的 html 将是：

<div class="swiper-container">
<div class="swiper-wrapper">
  <div class="swiper-slide">Slide 1</div>
  <div class="swiper-slide">Slide 2</div>
  <div class="swiper-slide">Slide 3</div>
</div>

<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>

然后，如果你想运行回调。只需使用：

swiper.on('slideChange', function () {
  console.log('slide changed');
});

slideChange 是事件取决于你想如何运行回调。查看全文swiper event and method

将此用于您的 php 函数

function swiper_magic() {
   wp_enqueue_script('swiper','https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js', array ('jquery'), true); // true to load at the bottom after jquery
 } 
 add_action( 'wp_enqueue_scripts', 'swiper_magic' );

希望对您有所帮助！ ;)

【讨论】：