responsiveCarousel/responsiveCarousel.js at master · dividemysky/responsiveCarousel · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
(function($) {

$.fn.responsiveCarousel = function(options) {

	//global
	var window_width = $(window).width();	//window width
	var $carousel = this;					//carousel element
	var carousel_pos;						//carousel position in the holder
	var carousel_width;						//width
	var carousel_item_width;				//% of carousel for each items width
	var carousel_item_padding;				//% of carousel for each items padding

	//settings; defaults to 5 items; 3 items; 2 items at breakpoints
	var settings = $.extend({
		carousel_item_width_default: .16,
		carousel_item_padding_default: .02,
		carousel_item_width_481: .40,
		carousel_item_padding_481: .05,
		carousel_item_width_768: .27,
		carousel_item_padding_768: .03
	}, options);

	$(document).ready(function() {
		this.timerCarousel = setTimeout(function() { $carousel.find('.next').trigger( "click" ); },5000);
		responsiveCarousel();

		//previous link
		$carousel.find('.prev').click(function(e) {
			e.preventDefault();

			if (carousel_pos < 0) {
				destination = (carousel_width*carousel_item_width)+((carousel_width*carousel_item_padding)*2);
				$carousel.find('.carousel_items').animate({left: carousel_pos+destination}, 700);
				carousel_pos = carousel_pos + destination;
			}

		});

		//next link - will loop around it on last item
		$carousel.find('.next').click(function(e) {
			e.preventDefault();

			if (Math.abs(carousel_pos)+carousel_width+
						(carousel_item_width*carousel_width)+
						((carousel_width*carousel_item_padding)*2) <= $carousel.find('.carousel_items').width()) {

				destination = (carousel_width*carousel_item_width)+((carousel_width*carousel_item_padding)*2);
				$carousel.find('.carousel_items').animate({left: carousel_pos-destination}, 700);
				carousel_pos = carousel_pos - destination;
			} else {
				$carousel.find('.carousel_items').animate({left: 0}, 700);
				carousel_pos = 0;
			}

			//automatic clicks
			clearTimeout (this.timerCarousel);
			this.timerCarousel = setTimeout(function() { $carousel.find('.next').trigger( "click" ); },5000);

		});

	});

	//respond to screen changes
	$(window).resize(function() {
		$carousel.find('.carousel_items').css({'left':'0px'});
		responsiveCarousel();
	});

	//make sure everything is the correct height after loading
	$(window).load(function() {
		responsiveCarousel();
	});

	function responsiveCarousel() {
		window_width = $(window).width();
		carousel_pos = $carousel.find('.carousel_items').position().left;		//carousel position in the holder
		carousel_width = $carousel.find('.carousel_items_holder').width();		//carousel holder width
		carousel_item_width = settings.carousel_item_width_default;				//default % width of carousel
		carousel_item_padding = settings.carousel_item_padding_default;			//default % width of carousel

		//repsonsive breakpoints
		if (window_width < 481) {
			carousel_item_width = settings.carousel_item_width_481;
			carousel_item_padding = settings.carousel_item_padding_481;
		} else if (window_width < 768) {
			carousel_item_width = settings.carousel_item_width_768;
			carousel_item_padding = settings.carousel_item_padding_768;
		}

		//setup correct width of carousel link list (to setup bounds for scrollbars and establish image size responsively)
		$carousel.find('.carousel_items').each(function(e) {
			var $this = $(this);
			var totalWidth = 0;
			var carouselHeight = 0;

			//set image holder width, height & padding
			$this.children().each(function(e){
				$(this).width(carousel_width*carousel_item_width);
				$(this).css({'padding':'0 '+carousel_width*carousel_item_padding+'px'});

				totalWidth += Math.ceil($(this).width()+((carousel_width*carousel_item_padding)*2));

				if ($(this).height() > carouselHeight) {
					carouselHeight = $(this).height();
				}
			});

			$this.width(totalWidth);
			$carousel.height(carouselHeight);
		});

	}

};


}(jQuery));