Skip to content

Conversation

@RickCogley
Copy link

色んな設定直して、EmblaとTailwindスタイルがバッティングしていたから、Inline Styleにした。

  • Embla Carouselの自動スクロール機能を実装
  • サンプル画像を追加(実際の花の写真と差し替えてください)
  • READMEにnpm installの手順を追加

このPRをMergeして、Branch1に切り替えてテストして、OKであれば、MainにMergeする。

元画像は一つのSVGで、三つのサンプルに別けた。各〇画像を別々にするとOKよ。このArrayを更新してね:

const IMGS = [
  '/images/sample-circle-1.svg',
  '/images/sample-circle-2.svg',
  '/images/sample-circle-3.svg',
];

Added installation step to run npm install before starting the dev server.

---
READMEにnpm installの手順を追加しました。開発サーバーを起動する前にnpm installを実行する必要があることを明記しました。
- Switch from Autoplay to AutoScroll plugin for continuous scrolling
- Configure infinite loop carousel with hover-to-pause functionality
- Fix carousel layout using inline styles to prevent CSS conflicts
- Increase circle diameter to 560px for better visibility
- Add multiple image iterations to ensure smooth scrolling effect

---
円形画像の自動スクロールカルーセルを実装しました。

- AutoplayからAutoScrollプラグインに切り替え、連続スクロールを実現
- ホバー時に一時停止する無限ループカルーセルを設定
- CSSの競合を防ぐためインラインスタイルでレイアウトを修正
- 円の直径を560pxに拡大し、視認性を向上
- スムーズなスクロール効果のため画像を複数回繰り返し表示
Add three placeholder SVG images with gradient fills to demonstrate the auto-scroll carousel functionality. These should be replaced with actual flower photos.

---
カルーセルのデモ用にサンプル円形画像を3つ追加しました。グラデーション塗りつぶしのプレースホルダーSVG画像です。実際の花の写真と差し替えてください。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant