הבעת IT

עם מגוון רחב של קרוסלות שם בחוץ, על MooTools רבים גם כן, אני עדיין החלטתי לכתוב מחלקה קרוסלה שלי, כמה סיבות טובות
1. רוצה תכונה ההחלפה (להיות מסוגל לקפוץ שקופית צעד מסוים / ב קרוסלה).
2. רצה חופש עם המיקום של הכפתורים / קישורים ימין ועל שמאל, בכל מקום שבו אני בבקשה.
3. שליטה רבה יותר על המדרגות שקופיות.

הצלחתי ליצור קרוסלה חדשה, עם התכונות הנ"ל ... להלן ... אתה מוזמן להציע כל שינוי היית דורשים!

דוגמה שלי נראה כך ... [ הדגמה בפרופיל ]

הצג הדגמה | הורדה MooTools קרוסלה עם גרסה 1.0 החלפה (הורידו 1925 פעמים)

1. קרוסלה החלפה

ניתן להוסיף בקלות ההחלפה כדי קרוסלה, פשוט על ידי קביעת דגל ההחלפה, שהוא parater האחרון עבר תוך יצירת מופע של MooCarousel כאמת (רוצה החלפה) או שקר (donot רוצה ההחלפה).

var carousel1 = חדש MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, נכון); / / ns = מספר שקופיות, SSS = צעד שקופיות בגודל

ו ofcourse אתה יכול לשנות את המראה-n-והתחושה של אלה achors ההחלפה שאתה רוצה על ידי שינוי ה-CSS שלהם.

. Carousel_paging {text-align: right; שוליים: 5px 10px 0 0;}
. Carousel_paging הנוכחי, עמוד carousel_paging {מתאר: none; רוחב:... 15px; גובה: 15px; קו גובה: 15px; text-align: מרכז, תצוגה: לחסום; float: שמאל, הרקע: # D8D8EB, שולי: 0 0 1px 0: text-decoration: none;}

. Carousel_paging: לרחף, carousel_paging {background: # 4D4D9B; color: # FFFFFF;} הנוכחי..

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

2. Customising הסמלים השמאל & העכבר

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

var carousel1 = חדש MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, נכון);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; רוחב: 23px; גובה: 20px; float: שמאלה, הסמן: מצביע;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Customising צעדים שקופיות

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

var carousel1 = חדש MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, נכון);
c_ns = מספר שקופיות, c_sss = צעד שקופיות בגודל

כמו כן, example1 שלי אני calcuted את גודל הצעד שקופיות, המבוסס על ההיגיון שבו, אני מכיר את מספר הפריטים, רוחב על כל פריט ועל השוליים אשר איבדו אחרי כל פריט ב-CSS שלי.

/ * עבור סחרחרה 1 * /

var c1_w = 92; כתבה / / סחרחרה רוחב

var c1_n = 10; מספר / / הכולל של פריטים סחרחרה השוואה

var c1_pp = 4 / / מספר perpage סחרחרה השוואה פריטים

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp: / / SSS = צעד גודל השקופית

var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0.5): / / ns = מספר שקופיות

c1_sss + = c1_marginFactor: / / SSS = צעד גודל שקופיות, 51 עבור השוליים

דרישות: MooTools 1.2

הצג הדגמה | הורדה MooTools קרוסלה עם גרסה 1.0 החלפה (הורידו 1925 פעמים)