Как заставить iDangerous Swiper работать на Wordpress - PullRequest
Новая
       34

Как заставить iDangerous Swiper работать на Wordpress

0 голосов
/ 09 апреля 2019

Я учусь использовать Swiper Sldier на веб-сайте с использованием WordPress и Divi theme. Я также пытаюсь следовать предыдущей теме в качестве руководства.

После следования инструкции слайдер не работает, изображение застряло на левом экране и не двигается, когда я их перетаскиваю.

Вот код на 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>

Я не знаю, почему это не сработало.

Любая помощь или общие предложения будут с благодарностью ...

1 Ответ

0 голосов
/ 09 апреля 2019

База на демоверсиях 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

Используйте это для своей функции 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' );

Надеюсь, это поможет! ;)

...