検索MENUWeb制作、デザイン、VRを中心に日々学んだ知識を配信中。Web制作-シェア-ツイート-ブックマーク-Pocketこの記事では、Vue.jsで簡単に「カルーセル」を作る方法をご紹介します。Vue.jsは、小さくも始められるjsフレームワークです。「とりあえずjQueryでやってたことを置き換えてみる。」と言った使い方もできます。Carousel」です。このプラグインを使うことで、脱jQueryに一歩近づけます。Carouselを読み込んでいきます。公式の方に、グローバルとローカルのそれぞれの読み込み方が書かれているので参考にしてください。htmlの中に、下記のコードを追加します。ルートのインスタンスを作成します。Carouselのコンポーネントをインポートします。</carousel></div>たったこれだけで、Vueを使って、カルーセルが作れました。CSSで見た目を整えてやった実際に動くサンプルがこれです。CodePen.カスタマイズも簡単!オートスライドもスピード調整も思いのまますごく手軽ですが、なかなかこのままでは使えないという場合も多いのではないでしょうか?このプラグイン、自動でスライドするようにしたり、画像のレスポンシブ対応させるなどオプションも豊富です。イージングやスピード、ページネーションの色や大きさに関しても、オプションで変えられるようになっています。動きにこだわりたい!って人にも便利に使えるプラグインです。Carouselの公式ドキュメント(英語)を見てみてください。他にも便利なプラグインがありますjQueryなどに比べると後発な分、ライブラリーやプラグインの数が少ないところはありますが、増えつつあります。この...masatoshihanai.comまとめカルーセルは、jQueryのslick.jsなどに慣れていると置き換えにくいと思われがちですが、このプラグインを使えば、簡単にVue.jsにまとめることができそうですよね。これをきっかけに、小さくVue.jsを始めるハードルが少しでも下がって、使う人が増えたら楽しいなというお話でした。Vue.jsを知りたくなったと言う人は、公式ドキュメントが日本語で充実しているので、おすすめです。本で勉強したい人は、以下の2冊がおすすめです。2018-03-28Kindleで探すこちらの本は、基本が網羅的に解説されており、最初の1冊としてはもちろん、辞書的に1冊手元にあると便利です。2018-05-29Amazonで探すhontoで探す紀伊國屋書店で探すこちらは、これから発売ですが、作者のmioさんはブログでもVue.jsについて分かりやすく書いてくださってるので、期待大。僕もすでに予約済みです。プログラミング、ブログ、VRにハマってます。DTPとWebは実務経験なしから仕事を獲得し、3人の子育てにも参加しつつ、在宅でバタバタな生活してます。Web、VR、フリーランスの生活を中心に発信します。