スライダー使用例

使用例1 ギャラリー風

こちらが基本の使い方になります。(テキストモードで以下のように記述します)
<div class="col-sliders">
<div class="wp-block-group" style="height: 300px;">[swiper2 id="5840,5839,5840,5839,5840"]</div>
<div class="wp-block-group" style="height: 300px;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
<div class="wp-block-group" style="height: 300px;">[swiper2 id="5840,5839,5840,5839,5840"]</div>
・・・(繰り返し)・・・
<div class="wp-block-group" style="height: 300px;">[swiper2 id="5839,5840,5839,5840,5839"]</div>

</div>
画像のidとリンク情報は以下記事を参考に設定してください。

使用例2 ダイナミック

テキストモードで以下のように記述します。
<div class="col-sliders">
<div class="wp-block-group" style="height: 90vh;width:100%;">[swiper2 id="5840,5839,5840,5839,5840"]</div>
</div>

これはheight: 90vh;と指定しているところがポイントで、画面の縦サイズの90%の大きさに設定する手法です。

(ビジュアルモードにするとなぜか白いページが長く表示されますがプレビューで見ると正常に表示されます。)

使用例3 カスタマイズ

高さ・幅を変更

これは以下のように記述しています。

<div class="col-sliders">
<div class="wp-block-group" style="height: 500px; width: 100%; margin: 0;">[swiper2 id="5840,5839,5840,5839,5840"]</div>
<div class="wp-block-group" style="height: 400px; width: 50%; margin: 0;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
<div class="wp-block-group" style="height: 400px; width: 50%; margin: 0;">[swiper2 id="5840,5839,5840,5839,5840"]</div>
<div class="wp-block-group" style="height: 300px; width: 33.3%; margin: 0;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
<div class="wp-block-group" style="height: 300px; width: 33.3%; margin: 0;">[swiper2 id="5840,5839,5840,5839,5840"]</div>
<div class="wp-block-group" style="height: 300px; width: 33.3%; margin: 0;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
<div class="wp-block-group" style="height: 300px; width: 25%; margin: 0;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
<div class="wp-block-group" style="height: 300px; width: 25%; margin: 0;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
<div class="wp-block-group" style="height: 300px; width: 25%; margin: 0;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
<div class="wp-block-group" style="height: 300px; width: 25%; margin: 0;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
</div>

高さはheight: 400px;で、幅の割合はwidth: 50%;というように設定しています。この時にmargin:0;も書いておくと余白が無くなり幅の割合が計算しやすくなります。

余白を入れる方法

これは以下のように記述します。
<div class="col-sliders">
<div class="wp-block-group" style="height: 400px; width: 20%; margin-left:20%;margin-right:0;">[swiper2 id="5839,5840,5839,5840,5839"]</div>
<div class="wp-block-group" style="height: 400px; width: 20%; margin-left:20%;margin-right:20%;">[swiper2 id="5840,5840,5839,5840,5839"]</div>
</div>

marginのイメージはソーシャルディスタンスのようなものです。周りに要素が来ないように余白を確保する設定です。

上下左右の余白を以下のように設定できます。単位はpx、%、vh等色々使えます。

上:margin-top:10px;

右:margin-right:20%;

下:margin-bottom:5vh;

左:margin-left:10%;

デフォルト値としては

PC版:margin-left:1.66%, margin-right:1.66%

スマホ等:margin-left:0, margin-right:0

としています。

Uncategorized

Posted by senri