בונים סליידר פשוט עם jQuery בשתי שניות!

»
  • 5821
  • 20-01-2014
אני יודע שיש המון סליידרים מבוססי jQuery חינמיים ברשת, חלקם מאוד מתוחכמים עם אפקטים מורכבים ועשירים, חלק עם אינספור פונקציונליות ותכונות אבל פעמים רבות הייתי צריך סליידר סופר פשוט, קל משקל אותו קל להטמיע.
jquery slider
  • מטמיעים בשתי שניות
  • עובד עם טקסט / תמונות
  • רספונסיבי לגמריי!
  • פונקצית 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

  • אהבתם? שתפו!