slickスライダーを縦方向にスライドさせたうえで、スライド方向を上から下にしたい

先日の実装で、掲題のようなことがありました。
slickはとても便利なのですが、こういったピンポイントのカスタマイズが意外に厄介なことが多いですよね。

まず縦方向へのスライドなのですが、これは

で簡単にできます。

「おお、楽勝~!」と思ったのですが、
これはデフォルトだと、下から上に要素が上っていくようなアニメーションになっています。

こんな感じ。。
これを上から下にしたいのですが、
slickのオプションにはないようです。

という、スライダの表示方向を逆にするオプションを使えるかなと思いましたが、
どうやら併用はできないみたいです。

また、こんな記事もありましたが、

どうやら解決には至っていない模様。。
別のプラグインを使うことを薦められています。。
ここがslickの限界か。。

いや!!あきらめるのはまだ早い!!!

逆向きということであれば、CSSのtransformを使えば何とかなりそうじゃね?
ということで試してみたら。

出来ました笑

まず、.slick-listを180度回転させることで
スライド方向を上から下にすることができます。

ただこれだと、画像も上下逆さになってしまうので、
さらに子要素を再度180度回転させて戻します笑。

こんな感じですね。

これで上から下に縦スライドするslickが実装できました。
どなたかの参考になれば幸いです。

それでは。

 役に立った 4

役に立ったボタン設置してみました。是非押していってくださいm(__)m

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。