19 מחוונים או קרוסלות CSS ו- HTML לאתר שלך

סליידרים בחינם

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

ل סליידרים, גלילות או קרוסלות בחינם ב- CSS שתמצאו למטה, צרו רפרטואר טוב לכל מיני יעדים בעבודה שאנחנו הולכים להראות ללקוח לפני שהם מקבלים את התקציב שלנו. זהו אוסף של מחוונים ב- HTML ו- CSS עם מעט JavaScript בפורמט אופקי ואנכי. בוא נעשה את זה כדי שתוכל לגשת לקוד כדי ליישם אותם במהירות.

קרוסלות אופקיות

מגיב

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

Artaculo relacionado:
27 מחווני HTML ו- CSS כדי לתת לאתר שלך את הטאץ 'המיוחד הזה

קרוסלה אינסופית מגיבה

רבייה עצמית

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

תגיב קרוסלה

קרוסלת תלת מימד

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

החלקה תלת-ממדית חלקה

קרוסלת תלת מימד

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

Artaculo relacionado:
46 מחוונים וגלילות של Javascript

קרוסלה אוטומטית אינסופית

קרוסלה אינסופית

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

רחף קרוסלה

רחף קרוסלה

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

קרוסלה ניידת

קרוסלה ניידת

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

קרוסלת פיד באינסטגרם

אינסטגרם

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

קרוסלה מסונכרנת פשוטה

קרוסלה פשוטה

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

קרוסלות אופקיות בתלת מימד

קרוסלה אופקית בתלת מימד

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

קרוסלת CSS

CSS 3D

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

קרוסלת האתחול של אמבילייט

קרוסלת Bootstrap

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

צוות קרוסלה

צוות קרוסלה

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

קוביית קרוסלה

קובייה תלת-ממדית

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

מקשי חצים בקרוסלה

מפתחות CSS

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

קרוסלות אנכיות

קרוסלה אנכית

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

קרוסלת CSS טהורה

קרוסלה

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

תגובת קרוסלה אנכית

קרוסלה

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

קרוסלת 3D מפוצלת

לְפַצֵל

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


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

4 תגובות, השאר את שלך

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם. שדות חובה מסומנים *

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.

  1.   מאירה אורלנה דיג'ו

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

    אנא עזרתך בזה. תודה רבה

  2.   חאווייר קניזארס דיג'ו

    כיצד אוכל לגרום לקרוסלת רחף להציג היטב בגרסה הניידת של האתר שלי?

  3.   גבריאל דיג'ו

    מצוין, איזו עבודה טובה הם עשו!

  4.   טוני זמברנו דיג'ו

    שלום מגניב מאוד את הקרוסלות, אבל ברגע שאני מעלה אותן, אני מעתיק ומדביק את שגיאת ה- javascripting בגלל var max = $ ('# c> li) .lenght .... מה אתה מציע