כיצד ליצור ממשקים ניתנים להחלקה באפליקציית React שלך עם Swiper

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

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

התקנת Swiper

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

npm להתקין swiper

לאחר שהתקנת את Swiper תוכל להשתמש בו באפליקציה שלך.

יצירת ממשקים ניתנים להחלקה

לאחר התקנת Swiper באפליקציית React שלך, תוכל ליצור ממשקים הניתנים להחלקה. התחל בייבוא ​​של סוויפר ו SwiperSlide רכיבים מספריית Swiper.

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

הנה דוגמה לממשק הניתן להחלקה באמצעות הרכיבים Swiper ו- SwiperSlide:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { Swiper, SwiperSlide} מ"סוויפר/תגובה";
יְבוּא'סוויפר/css';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (




<divclassName='אֵלֵמֶנט'>אלמנט 1div></SwiperSlide>
<divclassName='אֵלֵמֶנט'>אלמנט 2div></SwiperSlide>
<divclassName='אֵלֵמֶנט'>אלמנט 3div></SwiperSlide>
<divclassName='אֵלֵמֶנט'>אלמנט 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

בנוסף ל סוויפר ו SwiperSlide רכיבים, בלוק קוד זה מייבא את גיליון הסגנונות המוגדר כברירת מחדל עבור Swiper באמצעות swiper/css מודול.

לאחר מכן, הדוגמה עוטפת רכיב Swiper סביב ארבעה רכיבי צאצא של SwiperSlide. כל SwiperSlide מכיל א div אלמנט עם ה className תְכוּנָה. אתה יכול להשתמש ב-className כדי לסגנן את רכיבי ה-div:

.אֵלֵמֶנט {
גודל מוטבע: 100פיקסלים;
גבול-רדיוס: 12פיקסלים;
ריפוד: 1rem;
צֶבַע: #333333;
צבע רקע: #e2e2e2;
משפחת גופן: רָהוּט;
}

התאמה אישית של הממשק הניתן להחלקה

לאחר יצירת ממשק הניתן להחלקה בהצלחה, תוכל לשפר את המראה והפונקציונליות שלו כדי להתאים לדרישות שלך.

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

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { Swiper, SwiperSlide} מ"סוויפר/תגובה";
יְבוּא'סוויפר/css';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (



 spaceBetween={30}
 slidesPerView={2}
 לולאה={ נָכוֹן }
 >
<divclassName='אֵלֵמֶנט'>אלמנט 1div></SwiperSlide>
<divclassName='אֵלֵמֶנט'>אלמנט 2div></SwiperSlide>
<divclassName='אֵלֵמֶנט'>אלמנט 3div></SwiperSlide>
<divclassName='אֵלֵמֶנט'>אלמנט 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

בדוגמה זו, רכיב Swiper מקבל שלושה אביזרים: spaceBetween, slidesPerView, ו לוּלָאָה. ה spaceBetween prop מגדיר את הרווח בין כל שקופית, במקרה זה 30 פיקסלים.

משתמש ב slidesPerView prop, אתה יכול להגדיר את מספר השקופיות הנראות בבת אחת. במקרה זה, ה slidesPerView prop מוגדר ל-2 הגורם ל- סוויפר רכיב להצגת שתי שקופיות בו זמנית.

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

הגדרת הממשקים הניתנים להחלקה עם מודולים

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

כדי להשתמש בכל אחד מהמודולים האלה באפליקציה שלך, עליך לייבא אותם מספריית Swiper. עליך לייבא גם את סגנונות ה-CSS המתאימים עבור המודולים ולהעביר את שמותיהם ל- סוויפר רכיב באמצעות מודולים לִתְמוֹך.

לדוגמה, כך תוכל להשתמש ב- ניווט מודול להגדרת הממשקים הניתנים להחלקה:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { Swiper, SwiperSlide } מ"סוויפר/תגובה";
יְבוּא { ניווט } מ"סוויפר";
יְבוּא"swiper/css";
יְבוּא"swiper/css/navigation";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (



 spaceBetween={30}
 slidesPerView={2}
 מודולים={[ניווט]}
 לולאה={נָכוֹן}
 ניווט={נָכוֹן}
 >
<divclassName="אֵלֵמֶנט">אלמנט 1div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 2div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 3div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בלוק קוד זה מייבא את ניווט מודול וסגנון ה-CSS שלו, ולאחר מכן מציין את המודול ב- מודולים אבזר של סוויפר רְכִיב. ה מודולים prop מאפשר ומגדיר מודולים המסופקים על ידי ספריית Swiper.

מודול הניווט מספק פונקציונליות ניווט לרכיב Swiper. הוא מוסיף לחצני חצים קודמים ואחרים שאתה יכול ללחוץ עליהם או להקיש עליהם כדי לעבור לשקופית הקודמת או הבאה.

ה ניווט ערך ה-prop is true מה שיגרום ללחצנים הקודמים והבאים להופיע על המסך.

הגדרת ממשקים הניתנים להחלקה עם הפעלה אוטומטית

ה הפעלה אוטומטית מודול מאפשר למחוון לעבור בין שקופיות באופן אוטומטי ללא אינטראקציה של המשתמש.

להלן דוגמה כיצד להגדיר את הממשק הניתן להחלקה באמצעות ה הפעלה אוטומטית מודול:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { Swiper, SwiperSlide } מ"סוויפר/תגובה";
יְבוּא { הפעלה אוטומטית } מ"סוויפר";
יְבוּא"swiper/css";
יְבוּא"סוויפר/css/הפעלה אוטומטית";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (



 spaceBetween={30}
 slidesPerView={2}
 modules={[הפעלה אוטומטית]}
 לולאה={נָכוֹן}
 הפעלה אוטומטית={{ לְעַכֵּב: 3000 }}
 >
<divclassName="אֵלֵמֶנט">אלמנט 1div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 2div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 3div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

משתמש ב הפעלה אוטומטית prop, אתה יכול לציין את לְעַכֵּב; במקרה זה, הוא מוגדר ל-3000 אלפיות השנייה.

הגדרת ממשקים הניתנים להחלקה עם עימוד

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

כדי להשתמש ב דִפּוּף מודול, עליך לייבא אותו ולכלול אותו ב- מודולים אבזר של סוויפר רְכִיב:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { Swiper, SwiperSlide } מ"סוויפר/תגובה";
יְבוּא { עימוד } מ"סוויפר";
יְבוּא"swiper/css";
יְבוּא"swiper/css/pagetion";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (



 spaceBetween={30}
 slidesPerView={2}
 modules={[Pgination]}
 לולאה={נָכוֹן}
 עימוד={{ ניתן ללחוץ: נָכוֹן }}
 >
<divclassName="אֵלֵמֶנט">אלמנט 1div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 2div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 3div></SwiperSlide>
<divclassName="אֵלֵמֶנט">אלמנט 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

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

בנוסף לספריית Swiper דִפּוּף מודול, להגיב-דף היא אפשרות מצוינת נוספת ליצירת עימוד באפליקציית React שלך.

בניית אפליקציות נגישות עם React

ממשקים הניתנים להחלקה משפרים את חווית המשתמש של האפליקציה שלך עבור משתמשי מסך מגע. Swiper מציעה גמישות רבה ותוכל להתאים אותה בקלות בהתאם לצורכי האפליקציה שלך.

ספריות ממשק משתמש שונות יכולות לעזור להפוך את יישומי React שלך לנגישים יותר. ספריות אלו מספקות תכונות ופונקציונליות המשפרים את חווית המשתמש של האפליקציה שלך.