ווייל וועבסיטעס וואָס נעמען די גאנצע ברייט פון דעם עקראַןמיר געפונען אַז עטלעכע עלעמענטן קענען זיין ינאַגרייטיד וואָס קענען זיין נוציק צו אַרויסווייַזן אַ גאַנץ מוסטער פון פּראָדוקטן פֿאַר פאַרקויף אָדער די טריפּס וואָס מיר קענען פאָרשלאָגן פֿאַר די זומער. קאַראָוסעלס אָדער סלידערס זענען איינער פון די וועב עלעמענטן וואָס לאָזן אונדז ווייַזן אונדזער פּראָדוקטן אויף אַ זייער קאַטשינג וועג וויזשוואַלי.
די פריי סלידערס, סקראָללערס אָדער קעראַסאַלז אין CSS וואָס איר וועט געפֿינען אונטן, מאַכן אַ גוטע רעפּערטואַר פֿאַר אַלע מינים פון אַבדזשעקטיווז וואָס מיר וועלן ווייַזן דעם קליענט איידער זיי אָננעמען אונדזער בודזשעט. עס איז אַ זאַמלונג פון סלידערס אין HTML און CSS מיט אַ ביסל דזשאַוואַסקריפּט אין האָריזאָנטאַל און ווערטיקאַל פֿאָרמאַט. זאל ס טאָן עס אַזוי איר קענען אַקסעס די קאָד צו ימפּלאַמענטאַד זיי געשווינד.
ינדעקס
- 1 האָריזאָנטאַל קעראַסאַלז
- 2 אָפּרופיק ינפאַנאַט קעראַסעל
- 3 רעאַגירן קעראַסעל
- 4 גלאַט 3 ד סליידער
- 5 אָטאַמאַטיק ינפאַנאַט קעראַסעל
- 6 האָווער קאַראָוסעל
- 7 מאָביל קאַראָוסעל
- 8 ינסטאַגראַם פיטער קאַראָוסעל
- 9 פּשוט סינגקראַנייזד קעראַסעל
- 10 3 ד האָריזאָנטאַל קעראַסאַלז
- 11 CSS קאַראָוסעל
- 12 אַמביליגהט באָאָצטראַפּ קאַראָוסעל
- 13 קאַראָוסעל מאַנשאַפֿט
- 14 קעראַסעל קובע
- 15 קעראַסעל פייַל שליסלען
- 16 ווערטיקאַל קעראַסאַלז
- 17 ריין קסס קאַראָוסעל
- 18 ווערטיקאַל קעראַסעל רעאַגירן
- 19 3 ד ספּליט קאַראָוסעל
האָריזאָנטאַל קעראַסאַלז
דער קערוסעל באשטייט פון א שיין בלענדיק אַנאַמיישאַן ווי אויב מיר צייכענען אַ פאָרהאַנג, צו נאָר פארגרעסער די פאָטאָס און ייקאַנז פון די פּראָופיילז וואָס מיר וועלן שטעלן זיך אין דעם סליידער. דאָס איז אַ שליימעסדיק קעראַסעל פֿאַר טעסטאַמאָוניאַלז פון וסערס וואָס זענען זייער צופֿרידן מיט די פּראָדוקטן וואָס מיר פאַרקויפן אויף די וועב.
אָפּרופיק ינפאַנאַט קעראַסעל
דעם סליידער איז ווי די גאַנצע וואָס קענען מאל ווערן געזען אויף די פוסבאָל פעלדער אויף די זייטן און געוויזן פאַרשידענע אַדס וואָס מעגילע כאָריזאַנטאַלי. עס איז ידעאַל פֿאַר לאַנדינג בלעטער וואָס דאַרפֿן צו ווייַזן סאָרט פּאַרטנערס און אנדערע טייפּס פון לאָגאָס.
רעאַגירן קעראַסעל
דעם מעגילע שטייט אויס פֿאַר זיין React.js. וואָס איז בארעכטיגט צו אַרויסווייַזן בילדער אין אַ פּראַפּאָרשאַנאַט גרייס ווען מיר גיין פֿון איין בילד צו אנדערן אין אַ קעסיידערדיק אַנאַמיישאַן. ביסל מער צו זאָגן וועגן דעם פערלי פּשוט קסס, אָבער מיט גרויס ווירקונג אויב מיר וויסן ווי צו שטעלן עס רעכט אויף די וועב.
גלאַט 3 ד סליידער
די 3 ד קעראַסעל איז קאַמפּאָוזד פון HTML, CSS און דזשאַוואַסקריפּט, און שטייט אויס מיט גלאַטקייט און אַ באַונסינג אַנאַמיישאַן מיט גרויס וויזשאַוואַל ווירקונג. מיט אַ סעריע פון עלעמענטן וואָס ידענטיפיצירן יעדער קאָרט, אַ אַרבעט און אַן אויג-קאַטשינג קעראַסעל צו ינקאָרפּערייט עס אויף דיין וועבזייטל.
אָטאַמאַטיק ינפאַנאַט קעראַסעל
א סליידער אַז, ווי זיין אייגענע נאָמען וואָרנז, איז געוויזן אויטאָמאַטיש אָן דער באַניצער צו האָבן צו ינטעראַקט אין קיין צייט מיט אים. די פאַרשידענע בילדער וואָס מאַכן דעם סטרייקינג קעראַסעל דערשייַנען רעכט צו דער יבערגאַנג אין וואָס עס מאַדזשיקאַללי פיידז.
האָווער קאַראָוסעל
מיט די האָווער עלעמענט דעם סליידער באוועגט פון לינקס צו רעכטס, אָדער וויצע ווערסאַ, ווען מיר לאָזן די מויז טייַטל איבער אים. א גלאַט יבערגאַנג צו מאַך צווישן די פאַרשידענע פאָטאָס וואָס קענען קאַמפּאָוז דעם בילד סליידער.
מאָביל קאַראָוסעל
טאַמביéן גערופֿן קאַראָוסעל מאַטעריאַל פּלאַן, און מיט דעם קראַנט גאַנג מיט אַלע טייפּס פון קאַרדס, דאָ איר קענען געפֿינען אן אנדער אַרטיקל מיט אַ גרויס נומער פון זיי אין CSS / HTML, עס דיסטאַנסאַז זיך פון די מנוחה דורך קאַמפּאָוזד פון דער פּלאַן שפּראַך ארויס דורך Google. איר קענען מאַך די פאַרשידענע קאַרדס דורך לאַנג דרינגלעך אויף די קאַרדס.
ינסטאַגראַם פיטער קאַראָוסעל
איר קענען קראַך דעם געדאַנק הינטער דעם סליידער וואָס שטייט אויס דורך אַ פּאַס פון בילדער וואָס קענען זיין ענלאַרגעד דורך קליקינג אויף איינער פון זיי. אַ אַנאַמיישאַן מיט גרויס ווירקונג, כאָטש עס איז דירעקטעד פֿאַר אַ ספּעציפיש טיפּ פון וועבזייטל. ינסטאַגראַם אַרטיקלען גענומען צו אַ קעריקעל פון slick.js.
פּשוט סינגקראַנייזד קעראַסעל
עס האט אַ פּלאַץ צו טאָן מיט די פריערדיקע, ספּעציעל אין די פּאַס פון בילדער, כאָטש די ינטעראַקשאַן מיט די סליידער איז זייער אַנדערש דורך מאָווינג עס מיט אַ לאַטעראַל האַווייַע פון לינקס צו רעכט און וויצע ווערסאַ. ווידער מיר האָבן slick.js טאן זיין זאַך. סטרייקינג פֿאַר זייַן גרויס ווירקונג.
3 ד האָריזאָנטאַל קעראַסאַלז
איינער פון די מערסט טשיקאַווע קאַראָוסאַלז אויף די גאנצע רשימה מיר ארויס. שטייט אויס פֿאַר דיין האָריזאָנטאַל סלידערס אין CSS און HTML אַז מאַך פאַנטאַסטיקלי געזונט. איר נאָר האָבן צו לאָזן די מויז טייַטל איבער די באָקסעס צו געפֿינען די פאַרשידענע יפעקס וואָס קענען זיין געשאפן מיט די פיר ווערייישאַנז.
CSS קאַראָוסעל
פּשוט און גרויס וויזשאַוואַל ווירקונג מיט אַ סעריע קאַרדס וואָס נעמען טורנס אויף די פראָנט. די ווירקונג איז אין 3 ד, אַזוי עס איז איינער פון די סלידערס וואָס צוציען אַ פּלאַץ פון ופמערקזאַמקייט, ספּעציעל רעכט צו דער מינימאַל אָפּבאַלעמענ זיך ווירקונג וואָס ווייזט זשעני פון דער שאַפֿער פון דער זעלביקער.
אַמביליגהט באָאָצטראַפּ קאַראָוסעל
א פּשוט סליידער מיט גרויס ווירקונג וואָס טוט נישט שטיין אויס פֿאַר פיל. איז איינער פון די פּשוט סלידערס אַז מיר יוזשאַוואַלי קוקן פֿאַר און וואָס גיט דעם געפיל פון זייַענדיק איינער אָן פיל פאַנפער, אָבער אַז בישליימעס פולפילז זייַן פֿונקציע.
קאַראָוסעל מאַנשאַפֿט
אויב איר ווילט פאָרשטעלן דעם רעדאקציע אויף דיין בלאָג, דעם סליידער איז גאנץ אין זיין ראָלע. גוט ענלעך צו די פריערדיקע פֿאַר ווי פּשוט עס איז. עס שטייט אויס פֿאַר די נוצן פון דיימאַנדז פֿאַר יעדער פון די פאָוטאַגראַפס פון די מאַנשאַפֿט. עס האט אָטאַמאַטיק פּלייבאַק.
קעראַסעל קובע
סליידער וואָס שטייט אויס ווי אַ קוב אין וואָס יעדער פון די פּנימער איז איינער פון די בילדער אָדער פאָוטאַגראַפס וואָס מיר וועלן צו ווייַזן אויף אַ וועבזייטל. איר נאָר האָבן צו גיט אויף יעדער פון זיי צו מעגילע זיי און געפֿינען אויס וואָס אינהאַלט אַווייץ איר.
קעראַסעל פייַל שליסלען
א סליידער אין וואָס די ינטעראַקשאַן גייט דורך ניצן די פייַל שליסלען. סימפּלי אָן פיל פאַנפער אַז גייט גלייך צו אן אנדער טיפּ פון ינטעראַקשאַן, איינער וואָס מיינט ווי יאָרן צוריק. פֿאַר אַ ספּעציפיש נוצן.
ווערטיקאַל קעראַסאַלז
א סליידער מיט אַ גרויס וויזשאַוואַל ווירקונג אַז אויטאָמאַטיש פיעסעס אין אַ קעסיידערדיק ווערטיקאַל אַנאַמיישאַן וואָס שטייט אויס פֿאַר זיין קאַרדס מיט ראַונדיד עקן. זייער קראַנט און איינער פון די וואָס זיך שטייט זיך פון די גאנצע רשימה.
ריין קסס קאַראָוסעל
דאס קעראַסעל שטייט אויס פֿאַר בעת אַ זייַט מעניו פון וואָס מיר קענען גיין קליקינג אויף יעדער פון זייַן אָפּציעס. די אינפֿאָרמאַציע איז געוויזן מיט אַ געזונט אַטשיווד אָפּבאַלעמענ זיך ווירקונג אָן פיל מער ווי וואָס איז געווען געזאָגט.
ווערטיקאַל קעראַסעל רעאַגירן
ענלעך צו פֿריִערדיקע פֿאַר זייַן ווערטיקאַליטיכאָטש די סליידער קענען נעמען די גאנצע ברייט פון די בלאַט צו ווייַזן די בילדער פון יעדער פון די טאַבס. טשיקאַווע פֿאַר זיין גרויס פֿאָרמאַט און די נוצן פון CSS טראַנזישאַנז צו רוק צווישן סליידז.
3 ד ספּליט קאַראָוסעל
גרויס וויזשאַוואַל ווירקונג מיט אַ סליידער מוסטער אַז ראָוטייץ אין 3 ד מיט אַ זייער סטרייקינג אַנאַמיישאַן. איר קענען אויסקלייַבן יעדער פון די אָפּציעס פֿון די לינקס זייַט מעניו מיט דאַץ פֿאַר יעדער פון זיי. איינער פון די בעסטער אויף דער רשימה ווי שעפעריש עס איז.
גוט מאָרגן, איך ווילן צו נוצן פּורע קסס קעראַסעל אויף מיין פּלאַץ, אָבער עס איז לאָוקייטאַד אין בלויז איין שטעלע, ווי אַזוי קען איך מאַכן עס צו זיין לאָוקייטאַד אין די שטעלע וואָס איך וועלן צו מיין בלאַט.
ביטע דיין הילף מיט דעם
ווי אַזוי קען איך מאַכן האָווער קאַראָוסעל אַרויסווייַזן אויף די רירעוודיק ווערסיע פון מיין וועבזייטל?
ויסגעצייכנט, וואָס אַ גוט אַרבעט זיי האבן!
העלא, די וועגעלע הייזער זענען זייער קיל, אָבער ווי באַלד ווי איך ופּלאָאַד עס, איך נאָכמאַכן און פּאַפּ עס, די דזשאַוואַסקריפּט גיט מיר אַ טעות ווייַל פון די var max = $ ('# c> li). לענגהט…. וואָס זענען איר סאַגדזשעסטינג