Swiper

Swiperの画像切り替えを、横スライドから「フェード」に変えたいな。 こんにちは。 フリーランスWebコーダーの、たけちです。 今回は、Swiperの画像切り替えを、デフォルトの横スライドから「フェード」に変える方法を解説します。 「SwReadMore...

あれ？ Swiperのページネーションが表示されない・・・。 Swiperでスライド画像を作成しているとき、いつも表示されるはずのpagination（ページネーション）が表示されない、なんて困ってませんか？ そこで今回は、SwiperのペReadMore...

Swiperデフォルトの矢印を消したいな。 Swiperには、スライド画像を切り替えるための「矢印」がデフォルトで付属しています。 しかし、「画像に変更するから、デフォルトの矢印はいらない」というケースがあると思います。 中には「そもそも矢ReadMore...

あれ！？Swiperが全然動かない！ ちゃんとコードを書き写したつもりなのに、なんで動かないの！？ こんにちは。 フリーランスWebコーダーの、たけちです。 Swiperはスライドを作成するとても便利なライブラリですが、「ちゃんとコードを書ReadMore...

Swiperを使って、同じページの中に２つや３つなど複数のスライドを設置したい。 こんにちは。 フリーランスWebコーダーの、たけちです。 コーディングの案件や勉強をしていると、デザインの中に複数のスライドが入っているケースがあると思いますReadMore...

Swiperを使って、2つのスライドを連動して動かしたい。 こんにちは。 フリーランスWebコーダーの、たけちです。 コーディングのお仕事や勉強をしているとき、「2つのスライドを連動させたいけど、一体どうすればいいんだろう？」と悩んだことはReadMore...

Swiperの画像枚数をブレイクポイントで切り替える「レスポンシブ対応」って、どうやって実装すればいいんだろう？ こんにちは。フリーランスWebコーダーの、たけちです。 「『スマホ時は１枚』『PC時は３枚』のように、swiperの画像枚数をReadMore...

Swiperのページネーションをクリックしてもスライド画像が動かない・・・。クリックを有効にする方法が知りたい。 Swiperは、デフォルトだとページネーションのクリック機能は｢OFF｣になっているため、ドットをクリックしてもスライドは動きReadMore...

Swiperのページネーションを外に出したい。 実務でよくあるのが、下のようにページネーションがスライド画像の外側に設置されたデザインです。 See the Pen swiper_pagination_outside by たけち (@kwReadMore...

Swiperのページネーションをカスタマイズする方法を知りたいな。 この記事では、Swiperのページネーションをカスタマイズする方法について解説します。 なお、Swiperの導入方法や基本的な使い方を知りたい方は、下の記事を参考にしてくだReadMore...