לורי Carousel Slider תכונות CSS אנימציה & מגע תמיכה

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

ה גרסה ממוזערת מסתכם בערך 7KB וזה לא קטן אבל בהחלט הוא לא רע עבור מחוון מגע קרוסלה.

אתה יכול להוסיף תוסף זה לכל אתר אינטרנט מאז זה פועל על jQuery או רגיל וניל JS. זה יכול לרוץ עם ללא תלויות וזה נהדר עבור תאימות.

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

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

בדוק את הבית Lory עבור קוד מקור ו פרטים על ההתקנה.

התחל על ידי הוספת הספרייה Lory JS אל האתר שלך ראש סעיף, או כמו תוסף jQuery או ספריית וניל. כל הגירסאות כרגע מתארח על CDN Cloudflare, אז זה סופר קל לכלול עותק ללא כל הורדות.

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

הנה כמה קוד לדוגמה נלקח מן ריטו GoryHub לורי הראשי:

 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 

עכשיו ב- jQuery (או פשוט JS), אתה יכול הגדר שיחת פונקציה. זה צריך להיראות משהו כזה:

 $ ('. js_slider') lory (אין סופי: 1); 

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

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

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

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

כך או כך, אתה יכול להתחיל די מהר באמצעות CDF Cloudflare ואת המסמכים GitHub. ואם אתה מחפש הדגמה חיה עם קוד - - לבדוק את זה CodePen ערך.