SWELLのSwiperを使ったスライダーカスタマイズ例【ワードプレステーマSWELLカスタマイズ】

2023年1月23日

SWELLに元から入っているスライダーライブラリのSwiperを使ったスライドのカスタマイズ例を紹介します。

スライダーをカスタマイズする前に準備が必要なので、swiperの読み込みやスタイルをカスタマイズするファイルの用意などは下記の記事を参考にして準備してくださいね！

Sample01　画像をスライドさせる

HTMLコード

<div class="my-swiper1416-01">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book001.png" alt="スライダー画像1">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book002.png" alt="スライダー画像2">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book003.png" alt="スライダー画像3">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book004.png" alt="スライダー画像4">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book005.png" alt="スライダー画像5">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book006.png" alt="スライダー画像6">
                </a>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

サンプルではSWELLの「フルワイド」ブロックの中に「カスタムHTML」で上記のコードを書いています。

CSSを指定しやすいように、それぞれの要素にオリジナルのクラスを指定しています。

このクラスで同じぺージに複数のスライドを配置しても、それぞれのスライドに別のカスタマイズができるようにしています。

CSSコード

/* my-swiper1416-01---------------------------- */
.my-swiper1416-01{
  overflow: hidden;
}
/* imgのスタイル */
.my-swiper1416-01 img{
  display: block;
  width: 100%;
}
/* 矢印カスタマイズ */
.my-swiper1416-01 .swiper-button-prev:after,
.my-swiper1416-01 .swiper-button-next:after {
  content: ""; /*デフォルトの矢印を上書き*/
  width: 20px;
  height: 20px;
  border: 0;
  border-top: solid 3px #164f6c;
  border-right: solid 3px #164f6c;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.my-swiper1416-01 .swiper-button-prev,
.my-swiper1416-01 .swiper-button-next{
  background: transparent;
}
/* 前への矢印カスタマイズ */
.my-swiper1416-01 .swiper-button-prev:after {
  transform: rotate(-135deg);
}
/* 次への矢印カスタマイズ */
.my-swiper1416-01 .swiper-button-next:after {
  transform: rotate(45deg);
}
/* ページネーションカスタマイズ */
.my-swiper1416-01 div.swiper-pagination{
  bottom: -50px;
}
.my-swiper1416-01 .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0px 10px;
  background-color: transparent;
  border: solid 2px #164f6c;
  cursor: pointer;
  opacity: 1;
}
/*ページネーションがactiveなときのスタイル*/
.my-swiper1416-01 .swiper-pagination-bullet-active {
  border-radius: 50%;
  background: #164f6c;
}
/* my-swiper1416-01----------------------------end */

slider.cssに上記をコピペします。

CSSは主に、スライドの左右にある矢印のカスタマイズと、ページャーのスタイルを指定しています。

Javascriptコード

/* my-swiper1416-01---------------------------- */
let my_swiper1416_01 = {
  pagination: { 
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  loop: true,
  effect: 'slide',
  breakpoints: {
    // 360px以上の場合
    360: {
      slidesPerView: 2,
    },
    // 744px以上の場合
    744: {
      slidesPerView: 3,
    },
    // 959px以上の場合
    959: {
      slidesPerView: 4,
    },
  },
  autoplay: {
    delay: 2000,//2000ms経ってからスライドする
    disableOnInteraction: false,//クリックした後にまたスライドしだす
  },
  spaceBetween: 16,//画像と画像の間隔が16px
  speed: 1000,//1000msの間にスライドする
}
new Swiper('.my-swiper1416-01', my_swiper1416_01);

slider.jsに上記をコピペします。

slidesPerViewでスライドを何枚表示するかを指定できます。表示される画像のサイズはCSSで100%に指定しているので自動的に調整されるので、好きな表示させたい数字を指定します。

また、breakpointsでデバイスごとに指定できるので、レスポンシブのスライドにすることができます。

スライドとスライドの間隔はspaceBetweenで指定しています。

Sample02　ページネーションとナビゲーションのカスタマイズ

HTMLコード

<div class="my-swiper1416-02">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book001.png" alt="スライダー画像1">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book002.png" alt="スライダー画像2">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book003.png" alt="スライダー画像3">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book004.png" alt="スライダー画像4">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book005.png" alt="スライダー画像5">
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/book006.png" alt="スライダー画像6">
                </a>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

CSSコード

/* my-swiper1416-02---------------------------- */
.my-swiper1416-02{
  overflow: hidden;
}
/* imgのスタイル */
.my-swiper1416-02 img{
  display: block;
  width: 100%;
}
/* 矢印カスタマイズ */
.my-swiper1416-02 .swiper-button-prev:after,
.my-swiper1416-02 .swiper-button-next:after {
  content: ""; /*ここでデフォルトの矢印を上書き*/
  width: 10px;
  height: 10px;
  border: 0;
  border-top: solid 1px #164f6c;
  border-right: solid 1px #164f6c;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
/* 前への矢印カスタマイズ */
.my-swiper1416-02 .swiper-button-prev,
.my-swiper1416-02 .swiper-button-next{
  background: transparent;
}
.my-swiper1416-02 .swiper-button-prev:after {
  transform: rotate(-135deg);
}
/* 次への矢印カスタマイズ */
.my-swiper1416-02 .swiper-button-next:after {
  transform: rotate(45deg);
}
/* ページネーションカスタマイズ */
.my-swiper1416-02 div.swiper-pagination{
  bottom: -50px;
}
.my-swiper1416-02 .swiper-pagination .swiper-pagination-bullet {
  transition: .5s ease;
  width: 12px;
  height: 12px;
  margin: 0px 10px;
  background-color: transparent;
  border: solid 1px #164f6c;
  cursor: pointer;
  opacity: 1;
}
/*ページネーションがactiveなときのスタイル*/
.my-swiper1416-02 .swiper-pagination-bullet-active {
  width: 30px !important;
  border-radius: 10px !important;
  background: #164f6c;
}
/* my-swiper1416-02----------------------------end */

Javascriptコード

/* my-swiper1416-02---------------------------- */
let my_swiper1416_02 = {
  pagination: { 
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  loop: true,
  effect: 'slide',
  breakpoints: {
    // 360px以上の場合
    360: {
      slidesPerView: 2,
    },
    // 744px以上の場合
    744: {
      slidesPerView: 3,
    },
    // 959px以上の場合
    959: {
      slidesPerView: 5,
    },
  },
  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
  },
  spaceBetween: 16,
  speed: 2000,
}
new Swiper('.my-swiper1416-02', my_swiper1416_02);

Sample03　指定した記事だけが流れるスライダー

外部リンクへのクリック数を計測する方法【Googleアナリティクス4(GA4)でコンバージョン測定】

【損してるかも？】レンタルサーバーロリポップの契約期間別、運用料金比較

【超簡単】VSCodeでSass(.scss)をCSSにコンパイルする方法【Live Sass Compilerプラグイン】

PVの多いページのアドセンス広告の位置を手動で設定しよう【googleアドセンス広告の貼り方】

レンタルサーバーロリポップの契約からドメイン取得してWordPress実装まで解説【初心者向けホームページ制作】

HTMLコード

<div class="my-swiper1416-03">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/ga4-cv.png" alt="スライダー画像1">
                    <p class="slider-ttl">外部リンクへのクリック数を計測する方法【Googleアナリティクス4(GA4)でコンバージョン測定】</p>
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/cost-comparison-by-period.png" alt="スライダー画像1">
                    <p class="slider-ttl">【損してるかも？】レンタルサーバーロリポップの契約期間別、運用料金比較</p>
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/sass-compiler.png" alt="スライダー画像1">
                    <p class="slider-ttl">【超簡単】VSCodeでSass(.scss)をCSSにコンパイルする方法【Live Sass Compilerプラグイン】</p>
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/google-adsense.png" alt="スライダー画像1">
                    <p class="slider-ttl">PVの多いページのアドセンス広告の位置を手動で設定しよう【googleアドセンス広告の貼り方】</p>
                </a>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="slide-img">
                <a href="#">
                    <img src="https://kenpicopico.site/wp-content/uploads/2023/01/server-domain-wordpress.png" alt="スライダー画像1">
                    <p class="slider-ttl">レンタルサーバーロリポップの契約からドメイン取得してWordPress実装まで解説【初心者向けホームページ制作】</p>
                </a>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

スライダーに入れたい記事のサムネ画像のリンクとタイトルをペーストして作成しています。

CSSコード

/* my-swiper1416-03---------------------------- */
.my-swiper1416-03{
  overflow: hidden;
}
/* imgのスタイル */
.my-swiper1416-03 img{
  display: block;
  width: 100%;
}
/* 矢印カスタマイズ */
.my-swiper1416-03 .swiper-button-prev:after,
.my-swiper1416-03 .swiper-button-next:after {
  content: ""; /*デフォルトの矢印を上書き*/
  width: 15px;
  height: 15px;
  border: 0;
  border-top: solid 2px #164f6c;
  border-right: solid 2px #164f6c;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
/* 前への矢印カスタマイズ */
.my-swiper1416-03 .swiper-button-prev,
.my-swiper1416-03 .swiper-button-next{
  background: transparent;
}
.my-swiper1416-03 .swiper-button-prev:after {
  transform: rotate(-135deg);
}
/* 次への矢印カスタマイズ */
.my-swiper1416-03 .swiper-button-next:after {
  transform: rotate(45deg);
}
/* ページネーションカスタマイズ */
.my-swiper1416-03 div.swiper-pagination{
  bottom: -30px;
}
.my-swiper1416-03 .swiper-pagination .swiper-pagination-bullet {
  transition: .5s ease;
  width: 25px;
  height: 2px;
  margin: 0px 2px;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  opacity: 1;
  border: none;
}
/*ページネーションがactiveなときのスタイル*/
.my-swiper1416-03 .swiper-pagination-bullet-active {
  border-radius: 4px !important;
  background-color: #164f6c;
  border: none;
}
.my-swiper1416-03 .slider-ttl{
  font-size: 14px;
  color: #333;
}

Javascriptコード

/* my-swiper1416-03---------------------------- */
let my_swiper1416_03 = {
  pagination: { 
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  loop: true,
  effect: 'slide',
  breakpoints: {
    // 360px以上の場合
    360: {
      slidesPerView: 2,
    },
    // 744px以上の場合
    744: {
      slidesPerView: 3,
    },
    // 959px以上の場合
    959: {
      slidesPerView: 3,
    },
  },
  autoplay: {
    delay: 1000,
    disableOnInteraction: false,
  },
  spaceBetween: 16,
  speed: 1000,
}
new Swiper('.my-swiper1416-03', my_swiper1416_03);

Sample04　カテゴリーが一定速度で自動的に流れ続けるスライダー

webデザイン

ブログ運営

ホームページ制作

無印良品

好きな〇〇

生活

cafe巡り

HTMLコード

<div class="my-swiper1416-04">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="slide-category">
                <a class="slider-ttl" href="https://kenpicopico.site/category/web_design/">webデザイン</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-category">
                <a class="slider-ttl" href="https://kenpicopico.site/category/blog/">ブログ運営</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-category">
                <a class="slider-ttl" href="https://kenpicopico.site/category/homepage/">ホームページ制作</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-category">
                <a class="slider-ttl" href="https://kenpicopico.site/category/muji/">無印良品</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-category">
                <a class="slider-ttl" href="https://kenpicopico.site/category/likes/">好きな〇〇</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-category">
                <a class="slider-ttl" href="https://kenpicopico.site/category/life/">生活</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-category">
                <a class="slider-ttl" href="https://kenpicopico.site/category/cafe/">cafe巡り</a>
            </div>
        </div>
    </div>
</div>

今回はページネーションもナビゲーションもつけていません。

カテゴリーをただ一定のスピードで流すスライダーです。

カテゴリーでなく、タグなどでも応用できます。

CSSコード

/* my-swiper1416-04---------------------------- */
.my-swiper1416-04{
  overflow: hidden;
}
.my-swiper1416-04 .swiper-wrapper{
  transition-timing-function: linear;
}
.my-swiper1416-04 .slider-ttl{
  border-radius: 10px;
  transition: .3s ease;
  font-size: 14px;
  color: #fff;
  display: block;
  border: solid 2px #164f6c;
  padding: 4px;
  text-align: center;
  background: #164f6c;
}
.my-swiper1416-04 .slider-ttl:hover{
  font-size: 14px;
  color: #164f6c;
  display: block;
  border: solid 2px #164f6c;
  padding: 4px;
  text-align: center;
  background: #fff;
}

Javascriptコード

/* my-swiper1416-04---------------------------- */
let my_swiper1416_04 = {
  loop: true,
  effect: 'slide',
  breakpoints: {
    // 360px以上の場合
    360: {
      slidesPerView: 2,
    },
    // 744px以上の場合
    744: {
      slidesPerView: 3,
    },
    // 959px以上の場合
    959: {
      slidesPerView: 5,
    },
  },
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
  },
  spaceBetween: 10,
  speed: 8000,
}
new Swiper('.my-swiper1416-04', my_swiper1416_04);

まとめ

SWELLの場合、swiperライブラリがデフォルトで入っているので、比較的簡単に実装できます。

スライドのスタイルや初期設定をcssとjsをいじって指定してあげることで、自分好みのスライダーをカスタマイズすることができます。

カスタマイズ例を参考にぜひ自分好みのスライダーを実装してみてください！

この記事が気に入ったら
フォローしてね！

Follow Me

シェアお願いします！

URLをコピーしました！

URLをコピーしました！

SWELLのSwiperを使ったスライダーカスタマイズ例【ワードプレステーマSWELLカスタマイズ】

Sample01 画像をスライドさせる

HTMLコード

CSSコード

Javascriptコード

Sample02 ページネーションとナビゲーションのカスタマイズ

HTMLコード

CSSコード

Javascriptコード

Sample03 指定した記事だけが流れるスライダー

HTMLコード

CSSコード

Javascriptコード

Sample04 カテゴリーが一定速度で自動的に流れ続けるスライダー

HTMLコード

CSSコード

Javascriptコード

まとめ

関連記事

Sample01　画像をスライドさせる

Sample02　ページネーションとナビゲーションのカスタマイズ

Sample03　指定した記事だけが流れるスライダー

Sample04　カテゴリーが一定速度で自動的に流れ続けるスライダー