אני יודע שיש המון סליידרים מבוססי jQuery חינמיים ברשת, חלקם מאוד מתוחכמים עם אפקטים מורכבים ועשירים, חלק עם אינספור פונקציונליות ותכונות אבל פעמים רבות הייתי צריך סליידר סופר פשוט, קל משקל אותו קל להטמיע.
- מטמיעים בשתי שניות
- עובד עם טקסט / תמונות
- רספונסיבי לגמריי!
- פונקצית jQuery קטנה ושתי שורות Css
קוד ודוגמה חיה
מה קורה מאחורי הקלעים
עוטפים עם jQuery
jQuery(document).ready(function($) { });
מגדירים מהירות מעבר והשהייה
var change_img_time = 5000; var transition_speed = 300;
תופסים את הפריטים ברשימה
// GRAB LIST ITEM & ATTACH TO FUNCTIONS var simpleSlideshow = $("#exampleSlider"), listItems = simpleSlideshow.children('li'), listLen = listItems.length, i = 0, changeList = function () { listItems.eq(i).fadeOut(transition_speed, function () { i += 1; if (i === listLen) { i = 0; } listItems.eq(i).fadeIn(transition_speed); }); }; listItems.not(':first').hide();
מריצים את הפונקציה כל X שניות
var runs = setInterval(changeList, change_img_time);
מקפיאים את הסליידר במעבר עכבר
$('#exampleSlider').hover(function(){ clearInterval(runs); }, function(){ changeList(); });
הקוד המלא (כולל HTML עוטף לדוגמה)
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div class="wrapper"> <ul id="exampleSlider"> <li><img src="http://placehold.it/795x250/F5565A/ffffff" alt="" /></li> <li><img src="http://placehold.it/795x250/C4D957/ffffff" alt="" /></li> <li><img src="http://placehold.it/795x250/86CB64/ffffff" alt="" /></li> <li><img src="http://placehold.it/795x250/1ABCA1/ffffff" alt="" /></li> </ul> </div> <script type="text/javascript"> jQuery(document).ready(function($) { /* SET PARAMETERS */ var change_img_time = 5000; var transition_speed = 300; var simpleSlideshow = $("#exampleSlider"), listItems = simpleSlideshow.children('li'), listLen = listItems.length, i = 0, changeList = function () { listItems.eq(i).fadeOut(transition_speed, function () { i += 1; if (i === listLen) { i = 0; } listItems.eq(i).fadeIn(transition_speed); }); }; listItems.not(':first').hide(); var runs = setInterval(changeList, change_img_time); $('#exampleSlider').hover(function(){ clearInterval(runs); }, function(){ changeList(); }); }); </script> </body> </html>
זה הכל! קל ופשוט.
אני מקוה שהכל עובד אצלכם. הסיבה שאני אוהב את הפונקציה הקטנה הזאת היא בגלל שסופר קל להטמיע אותה וניתן להשתמש בה מספר פעמים באותו הדף עם אפס מאמץ עבור מגוון סוגים של תכנים. תודה שביקרתם, שגיב SEO
צביקה 20 בינואר 2014
קצת חדש בוורדפרס ומעונין להשתמש בסליידר שהראת
איפה מוסיפים את זה והאם אני אראה איזשהו תפריט .
תודה צביקה
שגיב SEO 20 בינואר 2014
למען האמת זה לא נבנה לוורדפרס אלא לכל סוגי האתרים. זה סליידר פשוט שניתן לשלב בקוד
ולא בניתי אותו עם פוסט מותאם (שאמור להופיע בתפריט הניהול של וורדפרס) או כתוסף לוורדפרס.
אם אתה רוצה להטמיע את זה בוורדפרס תצטרך להכניס את זה ישירות בקוד במיקום הרצוי
ולהגדיר את התמונות בצורה פרטנית (אלא אם יש לך ידע איך להשתמש בwpquery או בCustom Post Type).
למרות זאת אם אתה בעניין של תוסף לוורדפרס למה לא להשתמש באחד מהתוספים הקיימים
בחינם במאגר התוספים של וורדפרס?
הנה כמה
1. Wow Slider
2. IvyCat AJAX
3. Meta Slider (לא ניסיתי אבל נראה נחמד)
4. Len Slider
ויש עוד המון. אולי בעתיד אבנה איזה תוסף של סליידר אבל מכיוון שיש כל כך הרבה בחינם נראה לי קצת בזבוז זמן.
אסתר 20 בינואר 2014
זה לא עובד לי
שגיב SEO 20 בינואר 2014
יש דוגמה חיה + קוד מפורט בקופסה של jsFiddle בראש המאמר אז ככה שזה בטוח עובד!
בנוסף, התגובה שלך חסרת רקע, מה קיים, מה ניסית, מה לא עובד וכו'.
קצת קשה לי לעזור ככה…
דבר אחד שהייתי מוודא הוא שהאתר שלך משתמש בjQuery
כל תוסף / סקריפט של jQuery מחייב טעינה של jQuery בראש האתר שלך.
נסי להגיב בצורה יותר מושקעת ואשמח לעזור.
אורי 21 באפריל 2014
היי, הסליידר לא עובד לי, האם חוץ מלהדביק במקומות הנכונים אני צריך להוסיף עוד משהו לקוד? למשל שימוש ב jQuery ?
שגיב SEO 21 באפריל 2014
צודק, הנחתי כאן יותר מידי הנחות יסוד.
כמובן שהאתר שלך חייב לכלול jQuery כדי לעבוד עם זה.
יתכן ואתה כבר כולל jQuery באתר שלך אז תציץ בקוד אם אתה
לא בטוח ותראה אם אתה כולל אותו.
מעבר לזה.. בדוגמה שהטמעתי כאן יש מספר לשוניות (ראה תמונה).
תוכל לראות את כל הקוד כולל הHTML קוד הjavascript וקוד הCSS
בו אני עושה שימוש בסליידר זה.
תמונה:

עדכן אותי אם יש עוד שאלות 😉 – חג שמח..
שפרה 14 באפריל 2015
תודה על הכל
אשמח לעזרה כיון שזה לא עובד לי
שמתי הכל
כולל שורה בראש ה-HTML אבל הוא לא טוען
מיקי ארזים 20 בינואר 2014
וואו, כל כך קל ועבד לי במכה הראשונה.
תודה רבה לך. שיחקת אותה – בלי תוספים ארוכים ומתישים וחוצמזה אני אוהב שיש לי שליטה על הקוד.
שגיב SEO 20 בינואר 2014
בכיף מיקי.. שמח שהסתדרת 😉
אילן 20 בינואר 2014
סחטיין עליך שגיב. פשוט מעולה.
עובד ישר מהקופסה – גם אהבתי שהטמעת jsFiddle.
היתרון של jsFiddle שאפשר לשחק עם זה אונליין – תענוג.
שגיב SEO 20 בינואר 2014
תודה רבה אילן. באמת נחמד לעשות שינויים בjsFiddle ואז להעביר את
זה קומפלט לקוד.
שפרה 14 באפריל 2015
התקמתי את הסליידר אבל הוא עושה לי מין נקודה של IL קודם
שגיב SEO 14 באפריל 2015
מצטער שפרה, אין לי שום דרך לעזור.
אין לי מושג מה זה אומר נקודה IL לפני או בכלל בהקשר הזה.
אני ממליץ שתבני את הקוד של בJSFIDDLE ושתפי איתנו
מכיוון שיש כאן דוגמה חיה, עובדת ותקינה… אז, אני חושב שאת צריכה בסה"כ להעתיק להדביק
הדבר היחידי שהייתי מוודא לפי מה שתיארת הוא שהכללת JQUERY בראש המסמך
שפרה 14 באפריל 2015
איך בונים ב-בJSFIDDLE ?
הכל עובד לי מצוין אבל הוא שם לי נקודה של BULET – כמו של מספור לפני התמונה
שגיב SEO 15 באפריל 2015
אהה… הבנתי אותך 😉
תסתכלי על התגובה כאן למעלה שכוללת תמונה.
באותה תמונה אני מציג 3 טאבים / לשוניות
אחד של:
את פשוט שכחת להעתיק ולהדביק את הCSS…
וההסבר:
כל פריט בסליידר הוא פריט ברשימה
לרשימה, באופן אוטומטי מתווספות נקודות וריפוד (padding) שצריך
להסיר בעזרת CSS… זהו.
הנה קישור לJSFIDDLE (מקום שאפשר להתחרקש בו על קוד כזה אונליין בחינם)
http://jsfiddle.net/sagive/cAsB3/201/presentation/
בהצלחה.
אפרת 25 בדצמבר 2016
היי. ניסיתי להטמיע ב-HTML ולא הצלחתי. איפה אני צריכה למקם מה? ז"א מה במסמך HTML ומה לשים בCSS?
עוד שאלה, איך אני שמה בעצם תמונות?
תודה על העזרה.
שגיב SEO 26 בדצמבר 2016
שלום אפרת,
הוספתי קוד (האחרון בדף) שכולל HTML. תעתיקי קומפלט ותנסי אצלך במחשב.
לאחר מכן תוכלי לשנות שיתאים לך.
כמו כן תיקנתי את התצוגה המוקדמת של של הסליידר (דוגמה חיה).
מקווה שזה עוזר אבל אל תהססי לכתוב שוב אם לא הולך 😉
בברכה,
שגיב SEO
אפרת 1 בינואר 2017
תודה רבה הצלחתי !!! 🙂
מרים 11 ביולי 2017
היי,
אני מנסה להטמיע את הקוד באתר שלי וזה לא עובד לי כסלידר אלא מציג לי רשימה של 3 תמונות אחת מתחת השניה .
הכנסתי את הקוד של ה css בcss
ואת כל שאר הקוד בדף שהוא עם סיומת .cshtml
שגיב SEO 30 ביולי 2017
הממ… תראי – קיימות כמה אפשרויות.
1. אין לך jQuery באתר…
2. לא הטמעת את הCSS נכון
3. לא הטמעת את הJavascript נכון
4. כל התשובות נכונות.
יכולה לשתף קישור אל האתר?
fey 16 באוקטובר 2017
היי,
מדריך ממש קל ופשוט.
בתור שאני יודעת רקHTML \CSS זה ממש יעיל!
שאלה:
אני רוצה לשכפל את אותו באנר שכבר עשיתי שיהיה עוד אחד ישר אחריו בעמוד (כמו באתרים שיש בצדדים אזור פרסומות וסליידרים אחד אחרי השני)
אז שיכפלתי את את הHTML של האזור ולא נתן.
מה אתה מציעה לי לעשות?
תודה.