Swiper デモ&覚え書き色々

ダウンロード

https://www.jsdelivr.com/package/npm/swiper

以下を使用する

• swiper-bundle.min.js
• swiper-bundle.min.css

spaceBetween問題

メモ：WordPressblock編集でうまく効かないのでitemを入れ子にして外側にpadding追加、内側にborderをつけて対処。（アイテムに影がある場合もこれ）

<div class="wp-block-group js-hm-xxx-slider hm-xxx-slider swiper">

    <div class="wp-block-group hm-xxx-slider__item swiper-slide">

        <div class="wp-block-group hm-xxx-slider__item-inner">
            <figure class="wp-block-image hm-xxx-slider__item-thumb"><img src="xxx.png" alt="" class=""></figure>
            <p class="hm-xxx-slider__item-text"><a href="">text</a></p>
        </div>
        <div class="wp-block-group hm-xxx-slider__item-inner">
            <figure class="wp-block-image hm-xxx-slider__item-thumb"><img src="xxx.png" alt="" class=""></figure>
            <p class="hm-xxx-slider__item-text"><a href="">text</a></p>
        </div>
        <div class="wp-block-group hm-xxx-slider__item-inner">
            <figure class="wp-block-image hm-xxx-slider__item-thumb"><img src="xxx.png" alt="" class=""></figure>
            <p class="hm-xxx-slider__item-text"><a href="">text</a></p>
        </div>

    </div>

</div>

ついでにストレッチリンク

        a {
            text-decoration: none;

            &::after {
                position: absolute;
                inset: 0;
                z-index: -1; //これが無いと編集画面でテキストが編集できない
                content: "";
            }
        }

navigationとpagenationをスライドの外に出す

function initHmEconomicalTicketsSlider() {
  const el = document.querySelector(".js-hm-slider");
  if (!el) return;

  // ✅ IMPORTANTE:
  // el tiene que ser el contenedor ".swiper".
  // Si el NO es ".swiper", busca el ".swiper" dentro.
  const swiperEl = el.classList.contains("swiper")
    ? el
    : el.querySelector(".swiper");
  if (!swiperEl) return;

  // wrapper externo (afuera del overflow:hidden)
  const wrapper = swiperEl.parentElement;
  wrapper.style.position = wrapper.style.position || "relative"; //←CSSで入れてもOK

  // crear botones afuera del swiper
  const prev = document.createElement("div");
  prev.className = "swiper-button-prev";

  const next = document.createElement("div");
  next.className = "swiper-button-next";

  const pagination = document.createElement("div");
  pagination.className = "swiper-pagination";

  wrapper.appendChild(prev);
  wrapper.appendChild(next);
  wrapper.appendChild(pagination);

  new Swiper(swiperEl, {
    loop: true,
    // autoHeight: true,
    breakpoints: {
      1000: { slidesPerView: 2 },
    },
    navigation: {
      prevEl: prev,
      nextEl: next,
    },
    pagination: {
      el: pagination,
      clickable: true,
    },
  });
}

フェードインアウトモード

breakpointはダイナミックに切り替わらないので注意

var xxx = new Swiper("#js-slider", {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },