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

קאַפּקייק סליידער

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

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

סקרינז אויף קאַרדס

onboarding

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

אינפֿאָרמאַציע סליידער

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

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

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

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

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

קאָמפּאַראַטיווע סליידער אָן דזשאַוואַסקריפּט

קאָמפּאַראַטיווע סליידער אָן דזשס

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

דריי-שיכטע קאָמפּאַראַטיווע בילד סליידער

דריי שיכטע סליידער

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

וואַניל דזשס בילד סליידער

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

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

שפּאַלטן פאַרשטעלן דייאַגאַנאַלי

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

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

גאַנץ פאַרשטעלן סליידער

יבערגאַנג סליידער

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

האָריזאָנטאַל סליידער מיט פּאַראַללאַקס

פּאַראַללאַקס סליידער

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

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

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

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

העלד פול פאַרשטעלן סליידער

העלד בילד סליידער

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

VELO.JS סליידער מיט געמארקן

סליידער שלייער עדזשאַז

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

אָפּרופיק CSS ווערטיקאַל סליידער מיט טהומבנאַילס

אָפּרופיק CSS סליידער

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

בילד סליידער פלעקסבאָקס

פלעקסבאָקס בילד סליידער

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

באַוועגונג בלער מיט סווג פילטערס

סליידער באַוועגונג בלער

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

אַנימאַטעד סליידער

אַנימאַטעד סליידער

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

בילד סליידער מיט SVG פּאַטערנז

סליידער בלויז CSS SVG

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

פּשוט שיכטע סליידער

לייערד סליידער

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

ריין CSS סליידער

ריין CSS סליידער

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

קאַפּקייקס בלויז CSS סליידער

סליידער קאַפּקייק

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

סליידער אַנאַמיישאַן ווירקונג

אַנימאַטיאָן סליידער

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

סליידער רעפטל

סליידער סלייסער

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

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

סליידער ניו יארק

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

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

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

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

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

סליידער ריפּאַל

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

סליידער מיט בילד פאָרויסיקע ווייַזונג

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

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

סלידערס טראַנזישאַנז

סליידער טראַנזישאַנז

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

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


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

זייט דער ערשטער צו באַמערקן

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

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

*

*

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