haackmanjavascript今回はJavascript関連のお話です。自分のサイトを作りたいと思っている人もいるでしょうし、請負で何か企業のサイトを構築しているなんて人も見ているかもしれませんので、わかりやすく端的に書いていきたいと思います。フロントエンドをやっていると必ずと言っていいほど通るのが写真なんかがスライドショーのように表示される画面を作らないといけないという時。Javascriptで実装するのがポピュラーなやり方ですが、一からコードを書いていると意外とコレが結構大変です。そんなスライダー実装の作業を超超超効率化できるのが、swiper.jsというjsのライブラリなのです。準備Swiper.js公式サイト上のリンクから必要なファイルをダウンロードしてください。・swiper.min.js・swiper.min.cssの二つです。Swiper.jsはjQueryを必要としないので、非常に軽く動作することでも定評です。jQueryをインポートしておいても構いません。src="swiper.min.js">タグでhtmlに読み込みましょう。srcはディレクトリによって各自変更してください。</div>上の文がスライダーの部分にあたります。画像のimgタグのsrcは好きなものに変えてください。class=”swiper-slide”タグを追加すればスライダーの数を自由に変更可能です。true,});javascriptファイルに以上の文を追記します。このファイルもhtmlにインポートしておいてください。htmlにスクリプトタグで直書きでも構いません。解説を入れると、スライダーの細かい設定を書いていると思ってください。speedはスライドの速さ。autoplayをtrueにすれば自動でスライダーが動きます。loopをtrueにすると、スライダーの中身がループするようになります。他にも細かい設定ができますが、おそらく使うのはこの辺くらいだと思います。まとめ今回はSwiper.jsを使ってスライダーを簡単に実装してみました。できましたでしょうか?スライダーを頑張って自力で作った後これを見つけて私は絶望しました。コメントをキャンセルメールアドレスが公開されることはありません。Themeisle.。