קורס Front End למתכנתים שיעור תרגול: בניית סליידר תמונות

דיונים מקורסים
#1
זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/frontend/lessons/image-slider-lab
#2

שלום ינון,
לא הבנתי איך אפשר להזיז את ה’עינית’?

#3

אם ניקח את קוד ה HTML שפירסמתי שם - העינית היא ה div עם הקלאס images. מעליו יש div עם הקלאס image-slider.

נסי לבנות CSS כך ש image-slider יהיה מאוד רחב (כמו בציור), ו images יהיה צר יותר ויכסה רק תמונה אחת. אחר כך השתמשי ב overflow כדי להסתיר את כל התמונות ש"גולשות" החוצה מ images

אחרי זה פרסמי כאן את ה CSS שכתבת ונמשיך

#6

אשמח לביקורת
http://www.seenet.co.il/files_updates/solution.css

#7

היי ינון,
מצרף קישור למשימה https://drive.google.com/drive/folders/1tGukQdxd_UZu424Dd9qbD4Bgwz0aEkcs?usp=sharing
לא יודע להמשיך מכאן…הבנתי שאני צריך להשתמש בposition אבל לא הבנתי איך לעשות את זה כדי להגיע למה שרצית שנבצע בתרגיל.

תודה, יונתן

#8

הי כן אני רואה שהשתמשת ב flex בשביל לסדר את התמונות ובגלל זה שינוי position לא באמת עוזר כאן - כשאתה משנה את ה position של אלמנט images אתה בסך הכל מזיז את כל שלושת התמונות.

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

יש הרבה דרכים לבנות את הסליידר הזה ושווה אחרי שתראה שזה עובד לנסות לבנות אותו בלי ה flex ולראות באיזה מאפיינים אתה משתמש

#9

אהלן ינון!
אשמח לפידבק על המבנה של הסליידר: https:// codeply .com/v/n9vP877sOE
את ההנפשה נעשה בJS?

#10

הי

איזה שינוי צריך לעשות ב css כדי לראות תמונות אחרות?

#11

ב-Position של ה- Images.!
https://codeply.com/v/n9vP877sOE

לייק 1
#12

נראה מעולה וכן בהמשך בעזרת javascript נוכל להוסיף גם כפתורים והכל

#13

the solution that etlbdevs made was based on giving position to the images elements, the question asked to give and change posistion to the container

לייק 1
#14

בקריאה שניה מסכים עם חגי - הבעיה בלשים position על כל אימג׳ זה שיש המון ערכים לשנות ב css בשביל להזיז את התמונות.

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

#15

בעצם אין דרך להעביר את התמונות דרך המסך לא?
רק לשנות כל פעם בCSS את הleft את המספר פיקסלים ואז תתחלף התמונה?

#16

הי כן נכון בשביל באמת להזיז את התמונות נצטרך להוסיף JavaScript, ולזה נגיע בהמשך הקורס