jQuery高頻度ライブラリまとめ（スライダー、lightboxなど）

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="my-script.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

$(function () {
 // jqueryの処理を記述 
});

// ※上記は省略形で下記の記述が省略しない場合

jQuery(document).ready(function(){ 
//HTMLの読み込み後、記述した処理の開始を意味しています
  // jqueryの処理を記述
});

<!-- css -->
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<link rel="stylesheet" href="style.css"> //自分で記述するcssファイル

<!-- js -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> //jQueryの読み込み
<script src="slick/slick.min.js"></script>
<script src="main.js"></script> //自分で記述するjsファイル

※2023年10月時点
<!-- css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<link rel="stylesheet" href="style.css"> //自分で記述するcssファイル

<!-- js bodyタグ終了直前-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> //jQueryの読み込み
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="main.js"></script> //自分で記述するjsファイル

/**
 * スライダー用JSの読み込み
 */
function enqueue_slider_script()
{
    if (is_front_page()) {
        // Swiperのスタイルを読み込み
        wp_enqueue_style(
            'swiper-style',
            'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css',
            array(),
            '11.0.0'
        );

        // Swiperのスクリプトを読み込み
        wp_enqueue_script(
            'swiper-script',
            'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js',
            array(),
            '11.0.0',
            true
        );

        // カスタムスライダースクリプトを読み込み
        wp_enqueue_script(
            'slider-script',
            get_template_directory_uri() . '/assets/js/slider.js',
            array('swiper-script'),
            '1.0.0',
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_slider_script');

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  
  <!-- オプションのナビゲーション要素 -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>
</div>

// フェードイン前
.your-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: 1s;
}

// フェードイン後
.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

$(<em>function</em> () {
    $(".your-fade").on("inview", <em>function</em> () {
        $(this).addClass("inview");
    });
});

<!-- jQueryの読み込み -->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>

<!-- lightbox.min.jsの読み込み -->
<script src="js/lightbox.min.js"></script>