קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

React.js היא ספריית JavaScript פופולרית וחזקה ליצירת ממשקי משתמש. אתה יכול להשתמש בו כדי לבנות יישומי אינטרנט דינמיים, אינטראקטיביים ורספונסיביים.

אחד הרכיבים הנפוצים שבהם אתה עשוי להשתמש עם React.js הוא הקרוסלה. זה קל לביצוע, עם תכונות React מובנות או באמצעות ספריית צד שלישי.

מהי קרוסלה ומהם השימושים שלה?

קרוסלה היא רכיב מצגת שמאפשר לך לעבור בין תמונות או סרטונים. הוא משמש לרוב באתרים כדי להציג מוצרים או שירותים או כדי להשוויץ בתוכן מוצג. ישנם יתרונות רבים לשימוש בקרוסלה, כגון:

  • זוהי דרך יעילה למשוך תשומת לב לתוכן חשוב.
  • זוהי דרך מצוינת להציג מספר תמונות וסרטונים.
  • זה עוזר לשמור על הדף מאורגן ומושך מבחינה ויזואלית.
  • אתה יכול להשתמש בו כדי ליצור חווית משתמש אינטראקטיבית.

כיצד ליצור קרוסלה ב-React.js

יצירת קרוסלה ב-React.js היא קלה יחסית ויש שתי ספריות פופולריות שבהן אתה יכול להשתמש. אתה יכול גם להשתמש בתכונות React מובנות כדי להוסיף קרוסלה.

שימוש בתכונות מובנות

השיטה הראשונה ליצירת קרוסלה ב-React.js היא לעשות שימוש בתכונות מובנות. React מספקת דרך רבת עוצמה ליצור קרוסלה על ידי שימוש ברכיבים. אתה יכול

instagram viewer
השתמש בווי React להוסיף ולשלוט בקרוסלה.

יְבוּא תגובה, { useState } מ 'לְהָגִיב';

const קרוסלה = () => {
const [index, setIndex] = useState(0);
const אורך = 3;

const handlePrevious = () => {
const newIndex = אינדקס - 1;
setIndex (newIndex < 0? אורך - 1: newIndex);
};

const handleNext = () => {
const newIndex = אינדקס + 1;
setIndex (newIndex >= אורך? 0: newIndex);
};

לַחֲזוֹר (
<div className="קרוסלה">
<button onClick={handlePrevious}>קודם</button>
<button onClick={handleNext}>הַבָּא</button>
<ע>{אינדקס}</p>
</div>
);
};

יְצוּאבְּרִירַת מֶחדָל קרוסלה;

קוד זה משתמש ב-useState hook כדי ליצור משתנה מצב בשם index. פעולה זו תעקוב אחר המיקום הנוכחי בקרוסלה.

הפונקציות handlePrevious ו-handleNext דואגות לעדכונים בערך האינדקס כאשר המשתמש לוחץ על קודם ו הַבָּא כפתורים.

לבסוף, הסימון מציג את ערך האינדקס בתג פסקה. אתה יכול להציג תמונות או סרטונים במקום טקסט אם תרצה. אתה יכול גם לסגנן את הקרוסלה באמצעות CSS רגיל או באמצעות מסגרת CSS כמו Tailwind CSS.

ללא עיצוב מפואר, אתה אמור לראות זוג כפתורים בסיסי ומספר המייצג את האינדקס הנוכחי:

שימוש בספריית הקרוסלה הטהורה-להגיב

השיטה השנייה ליצירת קרוסלה ב-React.js היא ספריית pure-react-carousel. ספרייה זו מספקת דרך רבת עוצמה ליצור קרוסלה עם שימוש ברכיבים. כדי להשתמש בספרייה, תחילה עליך להתקין אותה באמצעות הפקודה:

npm להתקין קרוסלה טהורה-תגובה

לאחר שהתקנת את הספרייה, תוכל להשתמש ברכיב כדי ליצור קרוסלה. הנה דוגמה לשימוש ברכיב הקרוסלה:

יְבוּא לְהָגִיב מ 'לְהָגִיב';
יְבוּא { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } מ 'קרוסלה-טהורה-להגיב';
יְבוּא 'pure-react-carousel/dist/react-carousel.es.css';

const קרוסלה = () => {
לַחֲזוֹר (
<ספק קרוסלה
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<המחוון>
<אינדקס שקופיות={0}>שקופית 1</Slide>
<אינדקס שקופיות={1}>שקופית 2</Slide>
<אינדקס שקופיות={2}>שקופית 3</Slide>
</Slider>
<ButtonBack>חזור</ButtonBack>
<ButtonNext>הַבָּא</ButtonNext>
</CarouselProvider>
);
};

יְצוּאבְּרִירַת מֶחדָל קרוסלה;

בקוד זה, אתה יכול לראות שהרכיב CarouselProvider מגדיר את ההגדרות הכלליות עבור הקרוסלה כגון naturalSlideWidth, naturalSlideHeight ו-totalSlides.

הרכיב Slider מכיל מספר מופעי Slide. הרכיב Slide מגדיר כל שקופית בנפרד.

לבסוף, הרכיבים ButtonBack ו-ButtonNext מטפלים בניווט קרוסלה.

ישנם יתרונות רבים לשימוש בספריית קרוסלה טהורה, כגון:

  • קל לשימוש: בעוד שהשיטה המובנית דורשת יותר קוד כדי ליצור קרוסלה, הספרייה מספקת דרך קלה יותר ליצור קרוסלה ב-React.js.
  • תגובה: הספרייה מספקת את היכולת ליצור קרוסלות רספונסיביות. בשיטה המובנית, תצטרך ליצור קרוסלה נפרדת עבור גדלי מסך שונים.
  • התאמה אישית: הספרייה מספקת תכונות רבות בהן תוכל להשתמש כדי להתאים אישית את הקרוסלה כגון הפעלה אוטומטית, חיצי ניווט, עימוד ועוד.

שימוש בספריית הקרוסלה להגיב

השיטה האחרונה ליצירת קרוסלה ב-React.js היא ספריית react-responsive-carousel. עם ספרייה זו, אתה יכול ליצור קרוסלה עם שימוש ברכיבים. כדי להשתמש בספרייה, תחילה עליך להתקין אותה באמצעות הפקודה:

npm להתקין להגיב-מגיב-קרוסלה

לאחר שהתקנת את הספרייה, תוכל להשתמש ברכיב כדי ליצור קרוסלה. הנה דוגמה לשימוש ברכיב הקרוסלה:

יְבוּא לְהָגִיב מ 'לְהָגִיב';
יְבוּא { קרוסלה } מ 'תגובה-מגיבה-קרוסלה';
יְבוּא 'react-responsive-carousel/lib/styles/carousel.min.css';

const CarouselPage = () => {
לַחֲזוֹר (
<קרוסלה>
<div>
<img src="https://placehold.co/100x100" />
<p className="אגדה">אגדה 1</p>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p className="אגדה">אגדה 2</p>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p className="אגדה">אגדה 3</p>
</div>
</Carousel>
);
};

יְצוּאבְּרִירַת מֶחדָל CarouselPage;

בקוד זה, ניתן לראות שרכיב הקרוסלה מגדיר את הקרוסלה. בתוך רכיב הקרוסלה, div מכיל כל שקופית בודדת. כל שקופית יכולה להכיל תמונה וגם מקרא עבור אותה תמונה. הספרייה מספקת גם מגוון אפשרויות והגדרות שבהן תוכל להשתמש כדי להתאים אישית את הקרוסלה.

ישנם יתרונות רבים לשימוש בספריית ה-react-responsive-carousel כגון:

  • אחת הספריות הפופולריות ביותר: הספרייה היא אחת הספריות הפופולריות ביותר ליצירת קרוסלות ב-React.js. אז אם נתקעתם, תוכלו למצוא עזרה מהקהילה בקלות.
  • קל לשימוש: עם מספר שורות קוד בלבד, אתה יכול בקלות ליצור קרוסלה.
  • תגובה: הספרייה מספקת את היכולת ליצור קרוסלות רספונסיביות.
  • התאמה אישית: הספרייה מספקת גם תכונות רבות בהן תוכל להשתמש כדי להתאים אישית ולעצב את הקרוסלות.

שפר את חווית המשתמש עם קרוסלה

עם קרוסלה, אתה יכול לספק מידע נוסף למשתמשים ולעזור להם ליצור אינטראקציה עם האתר שלך ביתר קלות. קרוסלות גם עוזרות לשמור על העמוד מאורגן ומושך מבחינה ויזואלית. כתוצאה מכך, זוהי דרך מצוינת לשפר את חווית המשתמש.

אתה יכול גם לעקוב אחר אינטראקציה של משתמשים עם הקרוסלות שלך ולהשתמש בנתונים כדי לייעל את חווית המשתמש. זה יעזור לך ליצור חווית משתמש טובה יותר באתר שלך. לאחר מכן, אתה יכול לפרוס את אפליקציית React שלך בחינם בפלטפורמות כמו דפי Github וזה קל וחסכוני.