워드프레스에서 Swiper.js 적용하기

function.php 

function style_sheet() {  
    wp_enqueue_style( 'swiper-style', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.3.2/swiper-bundle.css' );
    }
add_action('wp_enqueue_scripts', 'style_sheet');

function script_enqueue(){
    wp_enqueue_script('jquery-js', get_template_directory_uri() . '/js/jquery-3.6.0.min.js', array('jquery'));
    wp_enqueue_script( 'swiper-script', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js' );
    wp_enqueue_script( 'home-script', get_stylesheet_directory_uri() . '/assets/js/home.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'script_enqueue' );

스크립트 불러올때 순서에 유의한다. 
항상 제이쿼리가 1번째로 오고, 플러그인, 그 플러그인을 조작하는 상세 js 순으로 불러온다. 
(해당 코드에서는 제이쿼리를 이미 불러오고 있어서 주석처리 하였다.)

------------------------

home.js

(function ($) {
    $(document).ready(function () {
      
      var swiper = new Swiper(".big-slider", {
    
        loop: true,
        slidesPerView: 1,
        effect: 'fade',
        speed: 1200,
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
            activeIndexChange: function () {
                var slides = this.slides;
                for (var i = 0; i < slides.length; i++) {
                  var slide = slides[i];
                  if (i === this.activeIndex) {
                    slide.classList.remove("fadescale");
                  } else {
                    slide.classList.add("fadescale");
                  }
                }
              },
          },
     
    });

 

슬라이더가 전환되는 시점에 표과를 주기 위해서 
on 선택자를 사용하였다. 
슬라이딩 되는 순간에 기존의 슬라이드는 스케일을 변화를 주고, 
새로 들어오는 슬라이드의 글자들에게 애니메이션 움직임을 주는 CSS를 추가하였다. 

------------------

입력된 html은 다음과 같다. 

<!-- 메인 상단 슬라이더 -->

<div class="swiper big-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide-active c1">
        <img src="/wp-content/themes/hello-elementor-child/assets/images/big1.jpg" >
        <div class="content">
            <div class="title">타이틀글자1</div>
            <div class="subtitle">111</div>
        </div>
      </div>
      <div class="swiper-slide c2">
      <img src="/wp-content/themes/hello-elementor-child/assets/images/big2.jpg" >
        <div class="content">
            <div class="title">타이틀글자2</div>
            <div class="subtitle">111</div>
        </div>
      </div>
      <div class="swiper-slide c3">
      <img src="/wp-content/themes/hello-elementor-child/assets/images/big3.jpg" >
        <div class="content">
            <div class="title">타이틀글자3</div>
            <div class="subtitle">111</div>
        </div>
      </div>
      <div class="swiper-slide c4">
      <img src="/wp-content/themes/hello-elementor-child/assets/images/big4.jpg" >
        <div class="content">
            <div class="title">타이틀글자4</div>
            <div class="subtitle">111</div>
        </div>
      </div>
    </div>
    <div class="swiper-nav">
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
</div>
<!-- /메인 상단 슬라이더 -->