19 סלידערס אָדער קעראַסאַלז CSS און HTML פֿאַר דיין וועבזייטל

פֿרייַ סלידערס

ווייל וועבסיטעס וואָס נעמען די גאנצע ברייט פון דעם עקראַןמיר געפונען אַז עטלעכע עלעמענטן קענען זיין ינאַגרייטיד וואָס קענען זיין נוציק צו אַרויסווייַזן אַ גאַנץ מוסטער פון פּראָדוקטן פֿאַר פאַרקויף אָדער די טריפּס וואָס מיר קענען פאָרשלאָגן פֿאַר די זומער. קאַראָוסעלס אָדער סלידערס זענען איינער פון די וועב עלעמענטן וואָס לאָזן אונדז ווייַזן אונדזער פּראָדוקטן אויף אַ זייער קאַטשינג וועג וויזשוואַלי.

די פריי סלידערס, סקראָללערס אָדער קעראַסאַלז אין CSS וואָס איר וועט געפֿינען אונטן, מאַכן אַ גוטע רעפּערטואַר פֿאַר אַלע מינים פון אַבדזשעקטיווז וואָס מיר וועלן ווייַזן דעם קליענט איידער זיי אָננעמען אונדזער בודזשעט. עס איז אַ זאַמלונג פון סלידערס אין HTML און CSS מיט אַ ביסל דזשאַוואַסקריפּט אין האָריזאָנטאַל און ווערטיקאַל פֿאָרמאַט. זאל ס טאָן עס אַזוי איר קענען אַקסעס די קאָד צו ימפּלאַמענטאַד זיי געשווינד.

האָריזאָנטאַל קעראַסאַלז

אָפּרופיק

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

פֿאַרבונדענע אַרטיקל:
27 HTML און CSS סלידערס צו געבן דיין וועבזייטל אַ ספּעציעל פאַרבינדן

אָפּרופיק ינפאַנאַט קעראַסעל

זעלבסט-רעפּראָדוקציע

דעם סליידער איז ווי די גאַנצע וואָס קענען מאל ווערן געזען אויף די פוסבאָל פעלדער אויף די זייטן און געוויזן פאַרשידענע אַדס וואָס מעגילע כאָריזאַנטאַלי. עס איז ידעאַל פֿאַר לאַנדינג בלעטער וואָס דאַרפֿן צו ווייַזן סאָרט פּאַרטנערס און אנדערע טייפּס פון לאָגאָס.

רעאַגירן קעראַסעל

3 ד קעראַסעל

דעם מעגילע שטייט אויס פֿאַר זיין React.js. וואָס איז בארעכטיגט צו אַרויסווייַזן בילדער אין אַ פּראַפּאָרשאַנאַט גרייס ווען מיר גיין פֿון איין בילד צו אנדערן אין אַ קעסיידערדיק אַנאַמיישאַן. ביסל מער צו זאָגן וועגן דעם פערלי פּשוט קסס, אָבער מיט גרויס ווירקונג אויב מיר וויסן ווי צו שטעלן עס רעכט אויף די וועב.

גלאַט 3 ד סליידער

3 ד קאַראָוסעל

די 3 ד קעראַסעל איז קאַמפּאָוזד פון HTML, CSS און דזשאַוואַסקריפּט, און שטייט אויס מיט גלאַטקייט און אַ באַונסינג אַנאַמיישאַן מיט גרויס וויזשאַוואַל ווירקונג. מיט אַ סעריע פון ​​עלעמענטן וואָס ידענטיפיצירן יעדער קאָרט, אַ אַרבעט און אַן אויג-קאַטשינג קעראַסעל צו ינקאָרפּערייט עס אויף דיין וועבזייטל.

פֿאַרבונדענע אַרטיקל:
46 דזשאַוואַסקריפּט סלידערס און סקראָללערס

אָטאַמאַטיק ינפאַנאַט קעראַסעל

ינפאַנאַט קעראַסעל

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

האָווער קאַראָוסעל

האָווער קאַראָוסעל

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

מאָביל קאַראָוסעל

מאָביל קעראַסעל

טאַמביéן גערופֿן קאַראָוסעל מאַטעריאַל פּלאַן, און מיט דעם קראַנט גאַנג מיט אַלע טייפּס פון קאַרדס, דאָ איר קענען געפֿינען אן אנדער אַרטיקל מיט אַ גרויס נומער פון זיי אין CSS / HTML, עס דיסטאַנסאַז זיך פון די מנוחה דורך קאַמפּאָוזד פון דער פּלאַן שפּראַך ארויס דורך Google. איר קענען מאַך די פאַרשידענע קאַרדס דורך לאַנג דרינגלעך אויף די קאַרדס.

ינסטאַגראַם פיטער קאַראָוסעל

ינסטאַגראַם

איר קענען קראַך דעם געדאַנק הינטער דעם סליידער וואָס שטייט אויס דורך אַ פּאַס פון בילדער וואָס קענען זיין ענלאַרגעד דורך קליקינג אויף איינער פון זיי. אַ אַנאַמיישאַן מיט גרויס ווירקונג, כאָטש עס איז דירעקטעד פֿאַר אַ ספּעציפיש טיפּ פון וועבזייטל. ינסטאַגראַם אַרטיקלען גענומען צו אַ קעריקעל פון slick.js.

פּשוט סינגקראַנייזד קעראַסעל

פּשוט קעראַסעל

עס האט אַ פּלאַץ צו טאָן מיט די פריערדיקע, ספּעציעל אין די פּאַס פון בילדער, כאָטש די ינטעראַקשאַן מיט די סליידער איז זייער אַנדערש דורך מאָווינג עס מיט אַ לאַטעראַל האַווייַע פון ​​לינקס צו רעכט און וויצע ווערסאַ. ווידער מיר האָבן slick.js טאן זיין זאַך. סטרייקינג פֿאַר זייַן גרויס ווירקונג.

3 ד האָריזאָנטאַל קעראַסאַלז

3 ד האָריזאָנטאַל קאַראָוסעל

איינער פון די מערסט טשיקאַווע קאַראָוסאַלז אויף די גאנצע רשימה מיר ארויס. שטייט אויס פֿאַר דיין האָריזאָנטאַל סלידערס אין CSS און HTML אַז מאַך פאַנטאַסטיקלי געזונט. איר נאָר האָבן צו לאָזן די מויז טייַטל איבער די באָקסעס צו געפֿינען די פאַרשידענע יפעקס וואָס קענען זיין געשאפן מיט די פיר ווערייישאַנז.

CSS קאַראָוסעל

CSS 3D

פּשוט און גרויס וויזשאַוואַל ווירקונג מיט אַ סעריע קאַרדס וואָס נעמען טורנס אויף די פראָנט. די ווירקונג איז אין 3 ד, אַזוי עס איז איינער פון די סלידערס וואָס צוציען אַ פּלאַץ פון ופמערקזאַמקייט, ספּעציעל רעכט צו דער מינימאַל אָפּבאַלעמענ זיך ווירקונג וואָס ווייזט זשעני פון דער שאַפֿער פון דער זעלביקער.

אַמביליגהט באָאָצטראַפּ קאַראָוסעל

באָאָצטראַפּ קאַראָוסעל

א פּשוט סליידער מיט גרויס ווירקונג וואָס טוט נישט שטיין אויס פֿאַר פיל. איז איינער פון די פּשוט סלידערס אַז מיר יוזשאַוואַלי קוקן פֿאַר און וואָס גיט דעם געפיל פון זייַענדיק איינער אָן פיל פאַנפער, אָבער אַז בישליימעס פולפילז זייַן פֿונקציע.

קאַראָוסעל מאַנשאַפֿט

קאַראָוסעל מאַנשאַפֿט

אויב איר ווילט פאָרשטעלן דעם רעדאקציע אויף דיין בלאָג, דעם סליידער איז גאנץ אין זיין ראָלע. גוט ענלעך צו די פריערדיקע פֿאַר ווי פּשוט עס איז. עס שטייט אויס פֿאַר די נוצן פון דיימאַנדז פֿאַר יעדער פון די פאָוטאַגראַפס פון די מאַנשאַפֿט. עס האט אָטאַמאַטיק פּלייבאַק.

קעראַסעל קובע

3 ד קוב

סליידער וואָס שטייט אויס ווי אַ קוב אין וואָס יעדער פון די פּנימער איז איינער פון די בילדער אָדער פאָוטאַגראַפס וואָס מיר וועלן צו ווייַזן אויף אַ וועבזייטל. איר נאָר האָבן צו גיט אויף יעדער פון זיי צו מעגילע זיי און געפֿינען אויס וואָס אינהאַלט אַווייץ איר.

קעראַסעל פייַל שליסלען

CSS קיז

א סליידער אין וואָס די ינטעראַקשאַן גייט דורך ניצן די פייַל שליסלען. סימפּלי אָן פיל פאַנפער אַז גייט גלייך צו אן אנדער טיפּ פון ינטעראַקשאַן, איינער וואָס מיינט ווי יאָרן צוריק. פֿאַר אַ ספּעציפיש נוצן.

ווערטיקאַל קעראַסאַלז

ווערטיקאַל קעראַסעל

א סליידער מיט אַ גרויס וויזשאַוואַל ווירקונג אַז אויטאָמאַטיש פיעסעס אין אַ קעסיידערדיק ווערטיקאַל אַנאַמיישאַן וואָס שטייט אויס פֿאַר זיין קאַרדס מיט ראַונדיד עקן. זייער קראַנט און איינער פון די וואָס זיך שטייט זיך פון די גאנצע רשימה.

ריין קסס קאַראָוסעל

קעראַסעל

דאס קעראַסעל שטייט אויס פֿאַר בעת אַ זייַט מעניו פון וואָס מיר קענען גיין קליקינג אויף יעדער פון זייַן אָפּציעס. די אינפֿאָרמאַציע איז געוויזן מיט אַ געזונט אַטשיווד אָפּבאַלעמענ זיך ווירקונג אָן פיל מער ווי וואָס איז געווען געזאָגט.

ווערטיקאַל קעראַסעל רעאַגירן

קעראַסעל

ענלעך צו פֿריִערדיקע פֿאַר זייַן ווערטיקאַליטיכאָטש די סליידער קענען נעמען די גאנצע ברייט פון די בלאַט צו ווייַזן די בילדער פון יעדער פון די טאַבס. טשיקאַווע פֿאַר זיין גרויס פֿאָרמאַט און די נוצן פון CSS טראַנזישאַנז צו רוק צווישן סליידז.

3 ד ספּליט קאַראָוסעל

שפּאַלטן

גרויס וויזשאַוואַל ווירקונג מיט אַ סליידער מוסטער אַז ראָוטייץ אין 3 ד מיט אַ זייער סטרייקינג אַנאַמיישאַן. איר קענען אויסקלייַבן יעדער פון די אָפּציעס פֿון די לינקס זייַט מעניו מיט דאַץ פֿאַר יעדער פון זיי. איינער פון די בעסטער אויף דער רשימה ווי שעפעריש עס איז.


דער אינהאַלט פון דעם אַרטיקל אַדכיר צו אונדזער פּרינציפּן פון לייט עטיקס. צו מעלדונג אַ טעות גיט דאָ.

4 באַמערקונגען, לאָזן דיין

לאָזן דיין באַמערקונג

אייער בליצפּאָסט אַדרעס וועט נישט זייַן ארויס. Required fields זענען אנגעצייכנט מיט *

*

*

  1. פאַראַנטוואָרטלעך פֿאַר די דאַטן: Miguel Ángel Gatón
  2. ציל פון די דאַטן: קאָנטראָל ספּאַם, קאָמענטאַר פאַרוואַלטונג.
  3. לעגיטימאַטיאָן: דיין צושטימען
  4. קאָמוניקאַציע פון ​​די דאַטן: די דאַטן וועט נישט זיין קאַמיונאַקייטיד צו דריט פּאַרטיעס אַחוץ דורך לעגאַל פליכט.
  5. דאַטן סטאָרידזש: דאַטאַבייס כאָוסטיד דורך Occentus Networks (EU)
  6. רעכט: צו קיין צייט איר קענט באַגרענעצן, צוריקקריגן און ויסמעקן דיין אינפֿאָרמאַציע.

  1. גוט מאָרגן, איך ווילן צו נוצן פּורע קסס קעראַסעל אויף מיין פּלאַץ, אָבער עס איז לאָוקייטאַד אין בלויז איין שטעלע, ווי אַזוי קען איך מאַכן עס צו זיין לאָוקייטאַד אין די שטעלע וואָס איך וועלן צו מיין בלאַט.

    ביטע דיין הילף מיט דעם

  2.   Xavier Cañizares דאָס

    ווי אַזוי קען איך מאַכן האָווער קאַראָוסעל אַרויסווייַזן אויף די רירעוודיק ווערסיע פון ​​מיין וועבזייטל?

  3.   גאַבריעל דאָס

    ויסגעצייכנט, וואָס אַ גוט אַרבעט זיי האבן!

  4.   טאָני זאַמבראַנאָ דאָס

    העלא, די וועגעלע הייזער זענען זייער קיל, אָבער ווי באַלד ווי איך ופּלאָאַד עס, איך נאָכמאַכן און פּאַפּ עס, די דזשאַוואַסקריפּט גיט מיר אַ טעות ווייַל פון די var max = $ ('# c> li). לענגהט…. וואָס זענען איר סאַגדזשעסטינג