先日の実装で、掲題のようなことがありました。
slickはとても便利なのですが、こういったピンポイントのカスタマイズが意外に厄介なことが多いですよね。
まず縦方向へのスライドなのですが、これは
1 |
vertical: true, |
で簡単にできます。
「おお、楽勝~!」と思ったのですが、
これはデフォルトだと、下から上に要素が上っていくようなアニメーションになっています。
こんな感じ。。
これを上から下にしたいのですが、
slickのオプションにはないようです。
1 |
rtl: true, |
という、スライダの表示方向を逆にするオプションを使えるかなと思いましたが、
どうやら併用はできないみたいです。
また、こんな記事もありましたが、
どうやら解決には至っていない模様。。
別のプラグインを使うことを薦められています。。
ここがslickの限界か。。
いや!!あきらめるのはまだ早い!!!
逆向きということであれば、CSSのtransformを使えば何とかなりそうじゃね?
ということで試してみたら。
出来ました笑
まず、.slick-listを180度回転させることで
スライド方向を上から下にすることができます。
ただこれだと、画像も上下逆さになってしまうので、
さらに子要素を再度180度回転させて戻します笑。
1 2 3 4 5 6 7 |
.slick-list { transform: rotate(180deg)!important; } .slick-list img{ transform: rotate(180deg); } |
こんな感じですね。
これで上から下に縦スライドするslickが実装できました。
どなたかの参考になれば幸いです。
それでは。