さて、基本的な書き方を試してみましたが、書き方を細かく見ていくと理論的でちんぷんかんぷんですので、実践を続けます。
Vue.jsでスライダーを作ってみましょう。
スライダーを作ってみる–何で作る？
jQueryでは非常に便利なライブラリがたくさんあります。
私自身もslickやbxSliderなんかにたいへんお世話になってきました。
Vue.jsでもまずは、よく使うスライドショー（ページャーがあってレスポンシブ対応しているようなやつ）のライブラリを探してみます。
vue-awsome-swiper
いろいろと見てみると、こちらが汎用性が高く様々な用途に対応できそうですので、試してみたいと思います。
vue-awesome-swiper | Homepage | Surmon’s projects
https://github.surmon.me/vue-awesome-swiper/
デモを見ると、一般的な全幅のスライダーはもちろん、ページャーのカスタマイズの種類も豊富、サムネイルを付けたり、スライドの中に子スライドを入れたりと複雑なカスタマイズにも対応しているよう。
vue-awsome-swiperの読み込み
さて、公式や試されている会社さんのを見ると、大抵npmでのインストールから始まります。
しかし、npm？？？？？な私は何とか使わない方法でやってみたいと思います。
Getting Started With Swiper
https://swiperjs.com/get-started#use-swiper-from-cdn
If you don’t want to include Swiper files in your project, you may use it from CDN. The following files are available:
と記載がございますので、そちらからcssとjsを読み込みます。
<link rel=”stylesheet” href=”https://unpkg.com/swiper@7/swiper-bundle.min.css”>
<script src=”https://unpkg.com/swiper@7/swiper-bundle.min.js”></script>
htmlの記載
swiperのclassを付与したhtmlを記載します。
- 一番外のdiv
- スライダー本体のwrapperのdiv
- スライダーの中身のdiv
この構造に、必要に応じてページャーやナビゲーションボタンのdivを記載していきます。
必要最低限で書くと、
<div class=”swiper”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”>Slide 1</div>
<div class=”swiper-slide”>Slide 2</div>
<div class=”swiper-slide”>Slide 3</div>
</div>
</div>
最低限のcssの記載
一番外のdiv用に、最低限のstyleを記載します。
<style type=”text/css”>
.swiper{
width:100%;
height:300px;
}
</style>
ちなみに、この段階＝jsを記載しない段階で見ると、swiper-bundle.min.cssのスタイルは当たっているので、swiper-slideはflexで横並びになっています。
最低限のjsを記載
vue.jsを最低限記載します。
<script>
const swiper = new Swiper(‘.swiper’, {
// Optional parameters
loop: true,
});
</script>
一応オプションのループだけ残しました。
まとめ
とりあえず、形にできました。。。
npmも勉強しなきゃなあと思いつつ。
次回はこのスライダーにオプションを設定していきたいと思います。