ユーザーがブラウザ上の指定位置にファイルをドラッグ＆ドロップした時にファイル選択させる機能の実装を目指します。 ドラッグ&ドロップ機能の完成イメージ 今回実装するドラッグ＆ドロップ機能は以下のようなイメージです。 […]
【Splide】自動で流れ続ける無限ループスライダーを作成する
当記事ではSplide.jsを使用して、自動で流れ続ける無限ループスライダーを作成する方法について記します。 ①矢印とページネーションのないスライダーを作成する 自動で流れ続けるスライダーなので矢印とページネーションを非 […]
Splideスライダーのページネーションをカスタマイズする
Splide.jsで作成したスライダーのページネーションをカスタマイズしたい時があると思います。当記事ではページネーションの色・位置・サイズ・画像の変更方法に加えて、ドットに数字を入れたり、分数表記にしたり、プログレスバ […]
Splideスライダーの矢印をカスタマイズする
Splide.jsで作成したスライダーの矢印の色、サイズ、位置、画像などを変更したい時があると思います。そんなときの矢印のカスタマイズ方法をそれぞれ解説していきます。 通常のSplideスライダーを作成する わかりやすい […]
Splideスライダーの矢印を画像で置き換える
Splide.jsで作成したスライダーの矢印を任意の画像で置き換えたい時があると思います。HTML、CSS、SVGのパスの三つ置き換える方法があるので、それぞれ丁寧に解説していきます。 通常のSplideスライダーを作成 […]
Splide.jsのAutoplayオプションを使い倒す
Splide.jsのAutoplayオプションでは、スライダーを自動再生させるだけでなく、プログレスバーを表示したり、再生・停止ボタンを表示したり、特定のスライドだけ長く表示したりすることが簡単にできてしまいます。当記事 […]
Splide.jsでシンプルなスライダーを作成する
Splide.jsは現在、人気のスライダーライブラリ『Swiper.js』の3倍のヒット数を誇るようです。当記事ではSplide.jsを使用してシンプルなスライダーを作成する方法について記します。 ①必要なライブラリをC […]
Swiper.jsでタブ切り替えを実装する
Swiper.jsは本来スライダーを生成するためのJavascriptライブラリですが、タブ切り替えメニューを実装する事もできます。本記事ではその方法を解説していきます。 通常のSwiper.jsでのスライダーの作成はご […]
【Javascript】オブジェクトのメソッド一覧を取得する方法
オブジェクトのすべてのメソッドを一覧で見たいという時がよくあるのですが、残念ながら現時点ではそのような手法はJavascriptに組み込まれてないようで、自分で実装する必要があります（2024年2月24日時点）。 当記事 […]
Swiper.jsの読み込みコストをゼロにする
Swiper.jsはオプションが豊富で魅力的なスライダーライブラリの一つですが、一つだけ弱点としてファイルサイズが大きく、入れるとサイトが重たくなるという事が挙げられます。 当記事ではこのSwiper.jsの唯一の弱点を […]
