slidify/jquery.slidify.js at master · derrybirkett/slidify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
(function ( $ ) {

 	/*

 		Creates a slider from a set of subelements
 			attach .slidify to slider element

 			01 Create parent div as container
 			02 Set CSS on Sliderdiv
 			03 Set CSS on slides
 			04 Paging mechanism

 	*/

    $.fn.slidify = function(options) {

        /*

	    PLUGIN SETTINGS / OPTIONS

        */

        var settings = $.extend({
            // These are the defaults.
            sliderClass:"slider",
            sliderHeight:$(this).height(),
            sliderWidth:$(this).width(),
            slideSelector: ".slide",
            clickActive:true
        }, options );

        /*

	    CONTAIN SLIDER
	    Create Parent Container Div of fixed width and overflow hidden

        */

        $(this).wrap('<div class="'+settings.sliderClass+'" />');

	    	$('.'+settings.sliderClass).css({
	    		"overflow":"hidden",
	    		"height":settings.sliderHeight,
	    		"width":settings.sliderWidth
	    	});


        /*

        MODIFY CSS OF SLIDER
        Set Attr & Width of Slider (this) to total length of children

		*/

    	// Get width from children length
		var numSlides 		= $(settings.slideSelector, $(this)).length;
		var containerWidth 	= settings.sliderWidth * numSlides;

		// Set Attr: position relative & width
    	$(this).css({
        	"position":"relative",
        	"width":containerWidth,
        	"height":settings.sliderHeight
    	});

        /*

        CHILDREN CSS
        Set required CSS on children

        */

        $(settings.slideSelector, $(this)).css({
	        "float":"left",
        	"width":settings.sliderWidth,
        	"height":settings.sliderHeight
		});

        /*

        Paging mechanism

        */

        // Initialise index (default is slide 1)
		var index = 0;

		// Click
		if(settings.clickActive) {
			$(this).on("click", function() {
				index++; if(index==numSlides) index=0;
				$(this).animate({
					"margin-left":-index * settings.sliderWidth
				});
			});
		}

		// RETURN
        return this;
    };


}( jQuery ));