スライダcarousel機能

実装目標

ホームスライド機能の実装

の右矢印ボタンを押して、次のスライド画像に移動します.

の左矢印ボタンを押して、前のスライドに移動します.

スライドの下部のポイントは、各スライドのインデックスを表します.
したがって、各ポイントをクリックすると、対応するインデックススライドに移動します.

現在表示されているスライドがアクティブなため、ポイントの透明度は1に変更されます.

現在表示されていないスライドは非アクティブなため、透明度は0.3に変更されます.

3秒ごとに次のスライドに自動的に移動します.

第1回実施

主な実施結果GIF

チェックポイント

開始前にmockデータを作成する

ホームページのスライドに必要なデータを担当するバックエンド担当者と議論する際、mockデータに整理して表示することで、必要なデータをより正確に伝えることができます.

[
  {
    "id": 1,
    "alt": "크리스마스 장식 볼",
    "url": "https://url.kr/npyj74"
  },
  {
    "id": 2,
    "alt": "벽걸이 양말",
    "url": "https://url.kr/d7gumw"
  },
  {
    "id": 3,
    "alt": "선물 네임택",
    "url": "https://url.kr/z4tx7d"
  }
]

怖がらないで。

以前に一度スライドに失敗した経験があるため、本プロジェクトはスライド担当者を選び、実施したいと考えています.
他の機能を実装する場合は、「試してみよう!このような気持ちで問題を解決すれば、不思議なことに、スライド全体の仕事の過程で「私は本当にできますか?」このような疑いの気持ちが絶えず浮かび上がった.
しかし、最終的に実現したとき、私は本当に小さな壁が何か怖いと思っていました.
それぞれの実現事項を記録して解決した点が、以前と現在の違いだと思います.
以前は問題をきちんと定義しておらず、ただコードを打つだけで、目の前に結果があることを望んでいた私とは違って、今は思考と思考を身につけて、整理してからコードを打つ習慣を身につけました.だから二度と体現を恐れない.逆にミスをすると思わぬことを学べるので面白いです

最終完了

完了したコードはここにあります!

その他

変更が必要

のバックエンドデータ操作が完了すると、スライダにタイトルが表示されるため、他の操作が必要になります.

タイトルが生成されると、ユーザーが文字を読み取るプロセスが追加され、自動スライド時間は3秒から8秒に変更する必要があります.

その他のミッションの希望

チームの完成が第一なので、他のチームメンバーを助けるのは、できれば実現したいことです.

ユーザーの体験を得るために、スライドの下部に自動スライド移動時間を表示するタイマーバーを作成したいと思います.

のスライドページ数を表示したいです.

スライド機能を実行するには、前、現在、および次の画像のみが必要です.
これは、スライド内のすべての画像配列に配置する必要がないことを意味します.
これで終了インデックスに到達し、最初の戻りで以前のスライド画像ではなく無限スライドに変更したいと思います.