当記事ではイベントの発生元が実際のユーザーの操作なのか、スクリプトによる強制発火によるものなのかを判定する方法について記します。 Javascriptでイベントの発生元がユーザーの操作か判定 イベントリスナーのコールバッ […]
【Swiper×React】矢印とドットを外に出す方法
![Swiper slider](https://open-code.tech/wp-content/uploads/2022/10/swiper_outside_arrow_and_dots-304x163.png)
Swiper×Reactで作成したスライダーのナビゲーション(矢印)とページネーション(ドット)をスライドの外に配置したい時があると思います。当記事ではその方法をデモを交えながら解説します。 ①通常のSwiperスライダ […]
【Swiper×React】サムネイル付きのスライダーを作成する
![thumbnail slider](https://open-code.tech/wp-content/uploads/2022/11/tumbnail_slider-304x176.png)
当記事では、swiper.jsとReactを使用してサムネイル付きのスライダーを作成する方法についてデモ付きで解説します。swiper.jsのオプションを使用して二つのスライダーを連動させることで実現します。 ①メインの […]
Swiper.jsをReactで使う方法
![swiper slider](https://open-code.tech/wp-content/uploads/2022/09/swiper_slider-304x167.png)
スライダーを作成するライブラリは沢山ありますが、その中の一つであるSwiper.jsはjQueryを使わずに実装できるのが魅力のひとつです。 当記事ではSwiper.jsをReactで使う方法について記します。※Reac […]
【Swiper×React】自動で流れ続ける無限ループスライダーを作成する
![infinite loop slider](https://open-code.tech/wp-content/uploads/2022/11/infinite_loop_slider-1-304x151.png)
当記事ではswiper.jsとReactを使用して、自動で流れ続ける無限ループスライダーを作成する方法について記します。 Swiper.jsとReactの基本的な使い方はご存じの前提で進めさせていただきます。Reactで […]
【Javascript】CSS・JSファイルを遅延読みして表示速度を向上させる
当記事では、CSS・JSファイルを遅延読みして表示速度を向上させる方法について注意点も含めて記します。 ユーザーがスクロールしたタイミングで遅延読み込み対象のファイルを読み込むという方法を採ります。 遅延読み込みのメリッ […]
【Javascript】 複数要素に複数イベントを登録する
素のJavascriptの進化に伴い、脱jQueyの動きが盛んですが、jQueryに慣れすぎていてると「あれ、これJavascriptでどう書くんだっけ」となることがあると思います。 この記事では、素のJavascrip […]
【Javascript】フォームの値を一括で取得する
当記事では素のJavascriptでフォームの値を一括で取得する方法について記します。ajaxやfetchでサーバーサイドにフォームのデータを送るときや、サーバーサイドに送る前にJavascriptでバリデーションを行い […]
【Swiper】ネストスライダーを作成する
![](https://open-code.tech/wp-content/uploads/2023/07/nested_slider-1-304x192.png)
当記事では、Swiper.jsを使用してスライダーが入れ子になったネストスライダーを作成する方法とその注意点についてデモ付きで記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきます […]
【Swiper】エフェクトオプションで作成できるスライダー6選
![swiper effect animation](https://open-code.tech/wp-content/uploads/2023/07/swiper-effect-animation-304x179.png)
Swiper.jsにはeffectオプションというものが用意されており、アニメーション効果を持つスライダーを簡単に作成する事ができます。この記事ではswiper.jsのエフェクトオプションを使用して作成できるスライダーを […]