兵庫県三田市でホームページ制作をしているゴリラドットです。

slickスライダーを丸型だったりハート型だったりで囲いたい！覆いたい！かわいく装飾したい！そんな場合もあるかと思います。普通に写真を見せるんじゃなくてハートの中を画像がスライダーしてくようなのってかなりかわいいですよね。

これってslickスライダーの上に別の画像をかぶせて実装するんですが、そのやり方ってどうやねん、と。

 

えー、言葉だけだといまいちわかりづらいんで、見本のイメージを。

適当に見本を作ってしまったので吹き出しの線がものすごい荒いですがイメージとしてはこんなのです。真ん中だけ透明な吹き出し画像を上から重ねてて、後ろにslickスライダーがある感じ。

※これは画像なんでslickスライダーは動きません

 

てことで今回は上の例みたいなslickスライダーをなんか別の画像、例えばハート型とかマル型とかで覆う方法を紹介しますね。

 

slickに別画像をかぶせる方法

めちゃくちゃ簡単。

 

HTML

<div id="my-slider">
	<div id="my-slider-frame"></div>
	<div id="my-slider-slick">
		…
	</div>
</div>

htmlはこんな感じで実際にslickを指定するのは「my-slider-slick」に対して。一応javascriptものせておきます。

 

javascript

$('#my-slider-slick').slick({});

 

はい、最後が一番肝心なcssです。ちょっと長いんですがこのまま丸ッとコピペしてもらえればOKです。

 

css

#my-slider{
	position: relative;
}
#my-slider-frame{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("pic/○○.png");
}

はい！これでOK。

一番下の「background-image: url("pic/○○.png")」のとこは○○の所に自分で用意した真ん中だけ透明にした画像を指定してくださいね。

ただちゃんとやらないと冒頭の超雑な切り抜きのようにフチがギザギザになっちゃうんでそれだけ注意！

 

結局なにやってたの？

これでslickスライダーをハート型とか吹き出し型とか、雲型とかにかわいく装飾できるんですが、んじゃいったい何やってたん？というのを最後にさくっと。やっぱりそのままコピペするだけじゃなくて少しはカスタマイズしたいですよね。

 

HTMLの説明

まずはHTMLから。

これはslickとは別にもう一個「my-slider-frame」っていうのを追加してます。これがcssでハート型だったり吹き出しだったりにしていくやつなんですね。

 

javascriptの説明

javascriptは…、「my-slider-slick」っていうのをスライダーにするぜ！っていう指定です。一番外側の「my-slider」にするとうまくいかないのでそこだけ注意です。

 

cssの説明

cssが一番複雑ですよね。

これまず「#my-slider」の方でここを基準にしてね！という宣言をしています。それがrelativeっていう一行だけあるやつです。

んでその基準（relative）に対し、「#my-slider-frame」は上0左0、んで幅と高さは基準と同じにしてよね！という指定をしています。これで「#my-slider」の上に「#my-slider-frame」がどーんとみっちり乗った状態になります。

ただこのままだとslickスライダーの方が上に来ちゃってハート型だったりは見えなくなっちゃいます。これの理由はまたどこかで説明したいんですが、とにかくなっちゃいます。

てことでさらに「#my-slider-frame」に対して「z-index: 1」ていうのを指定してます。これは重なり順を制御するもので、後ろの数字は1以上だったらなんでもOK。

これで晴れてslickスライダーの上にハート型やら吹き出し型やらが乗っかってくれた、というわけです。めでたしめでたし。

 

まとめ

今回はslickスライダーをハート型や吹き出し型のように周りを覆ってかわいく装飾するやり方を紹介しました。

slickスライダーはこのゴリラドットのホームページのトップでも使ってるんですが、サクッと設定出来て動きも快適、ものすごくいいですよね。

やってみると意外に簡単。ぜひ試してみてくださいね。それでは。