【ズルいWeb制作】2nd:100万円稼ぐまでの挑戦35【スライダー(カルーセル)を作る】

こんにちは、タビんちゅです。

目標はWeb制作で100万円稼ぐ!!

東京フリーランスが無料で提供している30DAYSトライアル(デイトラ)1stを完了し、2ndで学んだことを忘れないうちに書いていきます。

これからデイトラをはじめる人の参考にもなるかもです。

この記事を書いたタビんちゅは、

  • Web制作で稼いで2020年5月のセブ🇵🇭友達の結婚式に絶対行く
  • セブIT留学で大失敗
  • 海外フリーランスを諦められない
  •  #30DAYSトライアル で再挑戦プログラミング中
  • Web制作、フリーランス関連を学んで即発信中

あと記事はサクッと書いているので、誤字脱字があったらすみません。

『2nd:DAY20』を学習中

【今日やること】スライダー(カルーセル)を作る

よく使われがちなマウスホバーのCSSパターン10選と作り方を学んでいきます

スライダーは使い回せ

先人のすごい人が作ったスライダーを使い回す。自分でイチから作る必要なしです。

はにわまんさんのこの記事が最高にわかりやすい。コピペだけで実装もできちゃう

スライダー完成!地道にswiper.cssをいじりながらアローボタンやページネーションのサイズ、位置を調整しました。

できなかったことは、スマホ版では画像が切れてしまうとこ。一旦保留にします。

参考サイト:

2018年も手軽で便利なjQueryスライダープラグイン9選|ferret [フェレット]

Swiper – Most Modern Mobile Touch Slider(おすすめは「Swiper」)

https://haniwaman.com/swiper/ (Swiperの使い方)

ひと口メモ

Progateでイチから苦労して作ったスライダーが、こんなに簡単にできるなんてライブラリー恐るべし!しっかり使い回します。

というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。

人気No.1記事