如何使iDangerous Swiper适用于Wordpress

问题描述 投票:0回答:1

我正在学习使用wordpress和Divi主题在网站上使用Swiper Slider。我也尝试按照前一个帖子作为指导。

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

这是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个回答
0
投票

基于swiper演示,我建议将你的脚本放在底部。要使用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' );

希望这有帮助! ;)

© www.soinside.com 2019 - 2024. All rights reserved.