Update Swipercomponent.js

Swipercomponent.js

@@ -44,4 +44,22 @@ function SwiperComponent({ onSelectAvatar }) {
                     slideShadows: false,
                 }}
                 pagination={true}
-            
+                modules={[EffectCoverflow, Pagination]}
+                className="swiper"
+            >
+                {avatars.map((avatar, index) => (
+                    <SwiperSlide key={index} onClick={() => handleSelect(avatar)}>
+                        <img src={avatar.image} alt={avatar.name} className="avatar-image" />
+                        <div className="avatar-info">
+                            <h3>{avatar.name}</h3>
+                            <p>{avatar.description}</p>
+                            <em>"{avatar.sample}"</em>
+                        </div>
+                    </SwiperSlide>
+                ))}
+            </Swiper>
+        </div>
+    );
+}
+
+export default SwiperComponent;