kdcsライブラリー

リンク画像がスライド中に誤タップされるのを防ぎたい場合

$('.slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.slick-slide a').css('pointer-events', 'none');
});
$('.slick-slider').on('afterChange', function(event, slick, currentSlide){
    $('.slick-slide a').css('pointer-events', 'auto');
});

acfで画像フィールドを多く使うと縦長になってしまうので、3枚ずつを横並びにする方法。
初めはflort:leftで並べたが、画像が全部埋まらないとレイアウトが崩れてしまう。
これら複数の画像フィールドをdivで囲んでflexboxで処理する方法。

※注意点は、advanced custom fieldsの仕様が変わると修正しなければならない可能性がある
※acf proを使えばこの方法は必要ない

javascript（ custom-admin-acf_img.js ）

// acfの「複数画像フィールド」をdivで囲む ----------------------------
jQuery(function($) {
  const fieldGroups = [
    { prefix: 'banquet_img', wrapperClass: 'img_wrapper_banquet' },
    { prefix: 'room_img', wrapperClass: 'img_wrapper_rooms' }
  ];

fieldGroups.forEach(group => {
  const $fields = $(`[data-name^="${group.prefix}"]`);
    if ($fields.length) {
      const $wrapper = $(`<div class="${group.wrapperClass}"></div>`);
    
    // 先に wrapper を挿入
      $fields.first().before($wrapper);
    
    // その後 wrapper にフィールドを append
      $fields.each(function() {
        $wrapper.append($(this));
      });
    }
  });
});

※先にwrapperのdivを挿入してから画像フィールドを中に入れるという順にしないとエラーになる

functions.php

// あらかじめjsフォルダ内にcustom-admin-acf_img.jsを作成しておく----------------------------
function custom_admin_scripts() {
    $screen = get_current_screen();
    if ($screen->post_type !== 'page') {
        wp_enqueue_script('custom-admin-acf_imgjs', get_template_directory_uri() . '/js/custom-admin-acf_img.js');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_scripts');

css ( custom-admin-acf.css )

/* 画像（floatで3列にする） */
div.img_wrapper_rooms,
div.img_wrapper_banquet {
  display: flex;
  flex-wrap: wrap;
}
div.acf-field-image {
  width: calc(100% / 3) !important;
  padding: 16px;
}


/* div.acf-field-imageにflexが使えない場合 */
/*
min-height: 320px !important;
float: left !important;
clear: initial !important;
*/

時間のある時に学習するための備忘録

パララックススライダーrendered.js修正前はスライド完了後にページネーションが更新されるようになっていたが、これをスライドと同じタイミングで動かしたい。

以下が修正のポイント

現在のコードでは、.pagination の check イベントがスライド完了後に trigger(‘check’) されて、そこで .item に is-active クラスが付与されます。つまり、アニメーションが終わった後にページネーションが更新される仕組みです。

スライドの動きと同時に is-active を付与するには？ slideshowSwitch 関数内で、アニメーションの開始直後に .pagination .item の is-active を更新するようにすれば、スライドと同時にページネーションも切り替わります。

以下のように、アニメーション開始前にページネーションの更新処理を追加します。

// スライド切り替えの直前にページネーションを更新
var index = newSlide.index();
pages.removeClass('is-active');
pages.eq(index).addClass('is-active');

このコードを slideshowSwitch 関数内の、アニメーション開始前（例えば TweenMax.to(…) の前）に追加してください。たとえば fade トランジションの場合はこのあたり。

if (transition == 'fade') {
  // ページネーションを即時更新
  var index = newSlide.index();
  pages.removeClass('is-active');
  pages.eq(index).addClass('is-active');

  newSlide.css({
    display: 'block',
    zIndex: 2
  });
  ...

同様に、fade 以外のスライドアニメーションでも、TweenMax.to(…) の前に同じ処理を入れればOKです。

slick sliderで静止画と動画をスライドさせる方法 copilot

html

<div class="slider">
  <div><img src="img1.jpg" /></div>
  <div><img src="img2.jpg" /></div>
  <div><img src="img3.jpg" /></div>
  <div>
    <video id="video-slide" width="100%" muted>
      <source src="video.mp4" type="video/mp4">
    </video>
  </div>
</div>

javascript（jQuery + Slick）

$(document).ready(function(){
  const $slider = $('.slider');
  const $video = $('#video-slide')[0];

  $slider.slick({
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: false,
    pauseOnFocus: false,
    arrows: true,
    dots: true
  });

  // スライドが変わる直前に動画を停止＆リセット（動画から離れるとき）
  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    const isVideoSlide = currentSlide === slick.slideCount - 1;
    const isLeavingVideo = nextSlide !== slick.slideCount - 1;

    if (isVideoSlide && isLeavingVideo) {
      $video.pause();
      $video.currentTime = 0;
    }
  });

  // スライドが変わった後に動画スライドなら再生＆自動スライド停止
  $slider.on('afterChange', function(event, slick, currentSlide){
    const isVideoSlide = currentSlide === slick.slideCount - 1;

    if (isVideoSlide) {
      $slider.slick('slickPause');
      $video.currentTime = 0;
      $video.play();
    } else {
      $video.pause();
      $video.currentTime = 0;
    }
  });

  // 動画が終了したらスライダーを再開し、動画を先頭に戻す
  $video.addEventListener('ended', function(){
    $video.currentTime = 0;
    $slider.slick('slickPlay');
  });
});

・muted 属性は自動再生を許可するために重要です（ブラウザの仕様）。
・slickPause() / slickPlay() で自動スライドの制御。
・currentTime = 0 で動画を先頭に戻す。
・beforeChange と afterChange の両方で動画の状態を管理。

パソコン版とモバイル版で違う動きをさせたい場合、動きを付ける要素のクラスをpcとmobileで切り替える方法。

例はheaderというidに、画面幅が780pxより広いときは「pc」、780px以下のときは「mobile」というクラスを付与して切り替える。

function updateHeaderClass() {
  const header = document.getElementById("header");
  if (!header) return;

  if (window.innerWidth <= 780) {
    header.classList.add("mobile");
    header.classList.remove("pc");
  } else {
    header.classList.add("pc");
    header.classList.remove("mobile");
  }
}

// 初回の実行
updateHeaderClass();

// ウィンドウサイズ変更時にクラス更新
window.addEventListener("resize", updateHeaderClass);

window.innerWidth を使って現在の画面幅を取得。
classList.add() と classList.remove() で不要なクラスを確実に排除。
resize イベントで画面サイズ変更に応答。