どうも！スカーレット坊やです！
今回はメンターさんから頂いたカルーセルのプログラムをカスタマイズしてみました。使ったものはSwiperライブラリという、有名なJavascriptライブラリになります
スカ坊コロさんに頂いたカルーセルプログラムを、カスタマイズしてみたいのですが、オススメの方法ありますか？
コロそれならこのカルーセルプログラムに使われている、Swiperライブラリを編集してみてください。CSSやJavaScriptの部分を追記したり書き換えることでいろいろなことが出来ますよ
スカ坊分かりました！やってみます！
このブログで解決できること
- カルーセル（スライダー）の機能はSwiperライブラリを使うと便利
- Swiperライブラリでどんな機能を追加したのか
- HTMLウィジェットで実装する方法（動的タグは使用不可）
Swiperライブラリとは
Swiperライブラリとは、Jqueryに依存しない、JavaScriptのスライダープラグインになります。Jqueryに依存しないので、Jquery同士のコンフリクトを起こさなかったり、Jqueryの廃れなどにも強いプラグインです。
画像のスライダーを実装しようと考えている人は、ぜひチェックしてください。
スカ坊出来ることは非常に多岐にわたるので今回はスカ坊が何をしたのか、という部分に着目して書いていこうと思います。
Swiperライブラリで実践したこと
今回スカ坊がカスタマイズしたのは以下の３点
- ページネーションの設置
- スライドの速度調整
- スライドの切り替えエフェクトの変更（フェードにする）
スカ坊それでは見ていきましょう
カルーセル部分のコードを見ていこう
WordPressのショートコードで使うために、HTML部分を文字列化しています。そのため、このコードはそのままコピペをしても動きません。ご注意下さい。
$carousel_html .= '
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
//ここまでが実装コード
<script type="text/javascript">
//スライダーを調整する
var slider = new Swiper(".slider", {
loop: true, //ループする
autoplay: {
delay: 6000, //６秒で次の画像に切り替わる
disableOnInteraction: false, //スライダー操作で止まらないようにする
},
//ページネーションを付ける場合
pagination: {
el: ".swiper-pagination",
type: 'bullets',
clicable: true, //クリックをすると画像が切り替わるようにする
},
//切り替え方法をフェードにする
effect: "fade"
});
</script>この様に編集していく。このコードの中にやりたいことが全て入っている。
スライドの速度調整 delay: 6000, //６秒で次の画像に切り替わる
ページネーションの設置「青文字の部分」
切り替わりのエフェクト調整 effect: “fade”
パラメータを弄ったり、プロパティを追加すると、更に細かい調整や設定が可能になる。
Swiperライブラリそのものの詳しい使い方はこちら
HTMLウィジェットで機能を実装するとどうなるの？
こちらは少し余談になります。
HTMLウィジェットの便利な機能
Elementorのウィジェットに希望の機能がない場合や、ちょっと細かい設定を追加したい場合の対応策です。
ElementorのHTMLウィジェットをご存知だろうか。実はこのHTMLウィジェットというのは非常に便利なもので、CSSやJavaScriptも書き込むことが可能だ。<style>タグや<script>タグで括ってあげれば、CSSもJSもHTMLコードに書き込める。
これを利用すると、ネット上にあるライブラリや、コピーペーストで使えるプログラムを提供しているページから、データを持ってくるだけで簡単にその機能を実装出来る。
また、ウィジェットにCSSのクラスやIDを設定してやれば、そのクラスやIDを取得して、ウィジェットにはない設定をすることが可能になる。
それならHTMLウィジェットをならべて、コードを記載したら全部思い通りのページが出来るのでは？
スカ坊確かにその通りかもしれないが、それが出来る人なら最初からElementorは使わないよね！
その通り。
だからあくまで、このHTMLウィジェットは「補佐的」な機能として使うと能力を発揮すると考える。
HTMLウィジェットのデメリット
「補佐的」というからにはメインで使った場合のデメリットがあるので、見ていこう。
例えばだが、先程から話題に出ている、カルーセルプログラムも、HTML・CSS・JavaScriptで実装することが可能だ。ただ、決定的に違う部分として
動的タグは使用できない。
正確には使用できないというよりは「コードそのものが動的タグになる」のが正しい。
動的タグがHTMLコードになるということは、対象は「テキストエリア」になってくるので、そのプログラム内に書かれている「画像」を対象にすることが出来ないのだ。したがって、カルーセルの中の画像を動的に変えることは出来ないということになる。
この事からも、ウィジェットがすでにある場合はそのウィジェットを使ったほうが、直感的に設定ができるし、細かい部分もカスタマイズできるし、動的タグも使えるので、ウィジェットがあるのに、同じ機能をわざわざHTMLウィジェットで搭載する必要はないだろう。
調べながらでも進めているじゃないか？
「坊やだからさ」
それではまた！
