Splide.jsのAutoplayオプションを使い倒す

splide autoplay

Splide.jsのAutoplayオプションでは、スライダーを自動再生させるだけでなく、プログレスバーを表示したり、再生・停止ボタンを表示したり、特定のスライドだけ長く表示したりすることが簡単にできてしまいます。当記事 […]

Splide.jsをCDNで読み込む

splide cdn

Splideスライダーを作成するsplide.jsのCDNを載せています。CDNを使用するすれば、ライブラリをダウンロードせずにSplideスライダーの作成ができます。CSSも載せているので見た目も整えてくれます。 上記 […]

Splide.jsでシンプルなスライダーを作成する

splide slider

Splide.jsは現在、人気のスライダーライブラリ『Swiper.js』の3倍のヒット数を誇るようです。当記事ではSplide.jsを使用してシンプルなスライダーを作成する方法について記します。 ①必要なライブラリをC […]

Swiper.jsでタブ切り替えを実装する

tab menu

Swiper.jsは本来スライダーを生成するためのJavascriptライブラリですが、タブ切り替えメニューを実装する事もできます。本記事ではその方法を解説していきます。 通常のSwiper.jsでのスライダーの作成はご […]

【WordPress】最近の投稿にサムネイルをつける

recent posts with thumbnail

WordPressでサイトを運営していて『最近の投稿』にサムネイルを付けたいと思う方は多いと思います。 しかし残念な事に『最近の投稿』ウィジェットにサムネイル画像を表示するオプションはありません(2024年2月時点)。で […]

【CSS】min-marginやmax-marginを使いたい

CSSでmin-widthやmax-width同様にmin-marginやmax-marginを使いたい時があると思います。つまり基本的にはvwなどでウィンドウ幅に合わせてmarginを可変にし、指定値以下や指定値以上に […]

【Javascript】ドラッグ&ドロップ&プレビュー機能を作る

drag and drop and preview

ドラッグ&ドロップでファイル選択をさせて、画像をプレビューする機能をJavascriptで実装する方法について記します。jQueyやライブラリは使用せずに素のJavascriptで実現する事を目指します。 ドラッグ&am […]

【Javascript】オブジェクトのメソッド一覧を取得する方法

オブジェクトのすべてのメソッドを一覧で見たいという時がよくあるのですが、残念ながら現時点ではそのような手法はJavascriptに組み込まれてないようで、自分で実装する必要があります(2024年2月24日時点)。 当記事 […]

Swiper.jsの読み込みコストをゼロにする

Swiper.jsはオプションが豊富で魅力的なスライダーライブラリの一つですが、一つだけ弱点としてファイルサイズが大きく、入れるとサイトが重たくなるという事が挙げられます。 当記事ではこのSwiper.jsの唯一の弱点を […]

Swiper.jsの使い方とカスタマイズ方法

Webサイトを開発していると必ずと言っていいほどスライダーを作る機会が出てくると思います。そんな時の一つの選択としてSwiper.jsはおすすめのライブラリと言えます。 jQuery非依存で、オプション豊富で、カスタマイ […]