Swiper.jsにはeffectオプションというものが用意されており、アニメーション効果を持つスライダーを簡単に作成する事ができます。この記事ではswiper.jsのエフェクトオプションを使用して作成できるスライダーを […]
【Swiper】エフェクトオプションで作成できるスライダー6選
Javascript
【Swiper】フェードスライダーを作成する
swiper.jsのエフェクトオプションを使用してスライドがふわっと切り替わるフェードスライダーを作成する方法を記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swip […]
【Swiper】クリエイティブエフェクトでオリジナルスライダーを作成する
Swiper.jsにはcreativeEffectというオプションが用意されており、アクティブスライドの前後のスライドに対してかなり自由に変更を加える事ができるため、うまく活用することによってオリジナルのスライダーを作成 […]
【Swiper】スライダーのアクセシビリティを向上させる
Javascriptのスライダーライブラリの中でも人気がある『swiper.js』はオプションがとても豊富です。当記事ではswiper.jsのオプションを使用してスライダーのアクセシビリティ（操作性）を向上させる方法につ […]
Swiperスライダーの矢印のサイズや位置や色を変更する
Swiper.jsで作成したスライダーのナビゲーション（矢印）のサイズや位置や色を変更したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じの前提 […]
Swiperスライダーのページネーションのサイズや位置や色を変更する
Swiper.jsで作成したスライダーのページネーション（ドット）のサイズや位置や色を変更したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じの […]
【Javascript】アコーディオンメニューを最小コードで実装する
当記事では、jQueryなどの外部ライブラリを使用せず、アコーディオンメニューを実装する方法についてデモ付きで記します。 素のJavascriptでアコーディオンの開閉アニメーションを実装しようとすると煩雑になりがちです […]
【Javascript】モーダルウィンドウを実装する
当記事では、モーダルウィンドウを実装する方法について記します。dialog要素を使う事で簡単に作れます。 ⓪dialog要素とは dialog要素はHTML5から導入されました。モーダルウインドウの見た目を備えているので […]
【Javascript】ファイルを選択時に複数画像をプレビューする
当記事では、ファイル選択時に複数画像をプレビューする方法について記します。 ファイル選択時に画像を1枚だけプレビューしたい場合は下記が参考になるかと思います。【Javascript】ファイルを選択時に画像をプレビューする […]
【Javascript】ファイル選択時に画像をプレビューする
当記事では、ファイル選択をした時に画像をプレビューする機能をJavascriptで実装する方法について記します。FileReaderを使用したサンプルをよく見ますが、当記事ではFileReaderを使わずに実装してみます […]
