אנשים רבים באתר משלהם רוצים לראות סליידרים - אלו בלוקים שמציגים רכיב תוכן אחד על המסך, ולאחר פרק זמן מסוים משנים את התוכן הזה לאחר. באופן טבעי, כל מפתח אתרים מסוגל ליצור סליידר באופן עצמאי באמצעות HTML, CSS ו-JavaScript, אבל זה לא תמיד הגיוני. אתם תבזבזו לא מעט זמן, למרות העובדה שיש לא מעט פתרונות מוכנים באינטרנט שהופכים את החיים שלכם להרבה יותר קלים והופכים את האתר שלכם לאטרקטיבי הרבה יותר. מאמר זה יתמקד באחד מהפתרונות הללו הנקראים קרוסלת ינשוף. הגדרת המחוון הזה היא פשוטה להפליא, כך שאפילו מתחיל יכול להתמודד עם זה. כעת תלמדו מהו המחוון הזה, כמו גם פרטים חשובים נוספים. הגדרת קרוסלת ינשוף היא תהליך שלב אחר שלב, לכן כדאי ללמוד את החומר הזה לפי הסדר בלבד.
מה זה ולמה כדאי לבחור במחוון הספציפי הזה?
קרוסלת ינשוף, שעל תצורתו נדון במאמר זה, הוא תוסף יעיל מאוד המוסיף סליידר יפה ונוח לעמוד שלכם, שיקל מאוד על העבודה שלכם באתר,חוסך הרבה זמן, מאמץ וכסף. מה היתרונות של התוסף המסוים הזה, מכיוון שיש די הרבה סליידרים באינטרנט? העובדה היא שהמחוון הזה מציע לך עשרות אפשרויות התאמה אישית, שיאפשרו לך להפוך את הדף שלך לייחודי ובלתי ניתן לחיקוי. זהו תוסף רספונסיבי שיעבוד על כל גרסאות הדפדפן וניתן לחבר אותו בקלות לוורדפרס ו-CMS פופולריים אחרים. באופן כללי, לסליידר הזה יש הרבה יתרונות, אז בהחלט כדאי שתבחרו לטובתו. עם זאת, לפני שתתחיל להגדיר Owl Carousel, תוסף זה עדיין צריך להיטען.
הורד
התקנת Owl Carousel 2 אינה אפשרית אם לא הורדתם אותה למחשב, ומכיוון שזוהי הוראה שלב אחר שלב, כדאי להתחיל מההתחלה. אז, ניתן להוריד את התוכנה באמצעות מנהלי חבילות, אך אלו הם כלי מפתחים מתקדמים, אז כאן נספר לכם כיצד להשיג את התוסף הזה בדרך הסטנדרטית. אתה צריך ללכת לאתר הרשמי של התוסף ולהוריד את הגרסה האחרונה שלו. לאחר מכן, יש להעביר את כל הקבצים שהורדת לספרייה של האתר שלך, לאחר שהכנת תיקייה נוחה, ששמה זהה לתוסף עצמו. שים לב שהתוסף הזה מצורף ל-jQuery, אז אתה צריך שהספרייה תהיה זמינה גם כן. ובכן, לאחר שהורדת את התוסף הזה, תצטרך לטפל בשלב הבא שהוא הגדרת המחוון Owl Carousel 2.
CSS
Bהגדרות Owl Carousel 1.3 נשארות כמעט זהות לאלו בגרסה החדשה יותר 2, רק תכונות חדשות מתווספות. עם זאת, המידע הבסיסי יהיה זהה, החל מהוספת CSS למסמך שלך. אז הצעד הראשון הוא להוסיף את השורה. מה היא נותנת לך? זוהי מחרוזת שטוענת את הסגנונות הדרושים לאתר כדי להציג את המחוון. זה המקום שבו אתה יכול לסיים על ידי ביצוע העיבוד החזותי בעצמך. עם זאת, יש פתרון נוח ומהיר יותר. אתה יכול גם להוסיף שורה שגם טוענת את ערכת הנושא המוגדרת כברירת מחדל של המחוון, מה שהופך אותו מוכן לשימוש מיידי. אתה יכול לערוך חלק מהסגנונות כדי להפוך את המחוון שלך לייחודי ושונה יותר, ומתאים יותר לתוכן שלך. כמובן, ההגדרות של קרוסלת ינשוף ברוסית יהיו מאוד נוחות, אבל כל אדם שיוצר אתרים צריך להבין שהוא לא יכול בלי ידע באנגלית.
חיבור JavaSript
כמובן, הסליידר לא יעבוד ללא JS, לכן כדאי גם לדאוג לכלול את הקובץ המתאים המכיל את הקוד הדרוש. לשם כך, עליך להכניס שורת קוד מהתיעוד, אולם יש לעמוד בתנאי אחד. כולם יודעים ש-JS היא שפת תכנות שמבצעת את כל הפקודות לפי הסדר, אז במקרה זה כדאי להוסיף את שורת הקוד הזו אחרי השורה שמוסיפה את ספריית jQuery למסמך שלכם. עוד עם JS במקרה של המחוון הזה, אין לך מה לעשותצריך.
קידוד HTML
ובכן, חיברתם את המחוון, עכשיו הגיע הזמן לעצב ולהתאים אותו. קודם כל, עליך לכתוב את קוד ה-HTML כדי שהמחוון יופיע בכלל בדף שלך. לשם כך, עליך ליצור מיכל שיכיל את השקופיות. ניתן לעשות זאת באמצעות תג div, שצריך להקצות לו את מחלקת ינשוף-קרוסלה. מחלקה זו היא שמבטיחה שכל הסגנונות הקשורים למחוון יופעלו. אפשר גם לכתוב מחלקה אחרת - נושא ינשוף. זה יהיה שימושי אם תחליט להשתמש בעיצוב ברירת המחדל או לקחת את הגרסה הסטנדרטית של המחוון כבסיס לעבודה נוספת.
אז אתה צריך להוסיף כל שקופית במיכל נפרד עם תג div. כמובן, אתה יכול להשתמש בתגים אחרים, אבל תג זה הוא הטוב ביותר עבור סליידרים.
פלאגין להתקשרות
והדבר האחרון שאתה צריך לעשות כדי שיהיה לך סליידר מוכן באתר שלך הוא להשתמש בגוש הקוד הזה:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
זה מבטיח שהמחוון יתחיל לתפקד, כלומר לגלול בתוכן, כשהדף שלך נטען. עם אותו קוד, אתה יכול לחבר Owl Carousel לוורדפרס. ההגדרות של תוסף זה הן רבות ומגוונות, ועכשיו תלמדו על הנקודות המרכזיות ביותר.
הגדרת המראה והפונקציונליות של המחוון
אז באילו פקודות אתה יכול להשתמש כדי להתאים אישית את המחוון שלך? קודם כל, אתה צריך לזכור את פקודת הפריטים, כי באמצעותה אתה יכול להגדיר מספר מסוים של שקופיות במחוון שלך. פקודת הלולאה תאפשר לך לבחור אם לבצע לולאה של המחוון או להפסיק את הגלילה באלמנט האחרון. יש גם את הפקודה Drag, שיש לה מספר אפשרויות, כמו עכבר ומגע. במקרה הראשון, תוכלו לגרום לכך שניתן יהיה להחליק את הרכיבים של הסליידר שלכם עם העכבר ממושך, ובמקרה השני, בעזרת מגע (פקודה זו מתאימה למכשירים ניידים). פקודה חשובה נוספת היא nav, המאפשרת הצגת חיצי ניווט. יחד עם זה, אתה יכול להשתמש בפקודה navText כדי להוסיף תוויות ללחצני ניווט. כמו כן, אל תשכח את פקודת ההפעלה האוטומטית, המאפשרת לך להפעיל ולנטרל את ההתחלה האוטומטית של הפיכת השקופיות של המחוון שלך כאשר הדף נטען. בעזרת פקודה זו, תוכל גם להשתמש ב-autoplayTimeout, עבורו תוכל להגדיר ערך ספציפי באלפיות שניות, שיקבע את הזמן בין ההפניה האוטומטית של כל אחת מהשקופיות.
אם אתה משתמש בעיצוב אתרים רספונסיבי, כלומר, עיצוב הדף שלך משתנה אוטומטית בהתאם לאיזה מכשיר הוא נצפה, אז אתה בהחלט צריך לזכור את הפקודה הרספונסיבית, המאפשרת לך להגדיר את מספר השקופיות להצגה בהתאם לרוחב המסך שבו הדף נצפה.
