https://www.spiral.co.jp/wp-content/themes/spiral/js/infiniteslidev2.js

1/*
2infiniteslide.js v2
3version: 2.0.1
4Author: T.Morimoto
5
6Copyright 2017, T.Morimoto
7* Free to use and abuse under the MIT license.
8* http://www.opensource.org/licenses/mit-license.php
9
10https://github.com/woodroots/infiniteslidev2
11*/
12
13(function($){
14	$(window).on('load', function() {
15	    window.loaded = true;
16	});
17	$(function(){
18		$.fn.infiniteslide = function(options){
19			//option
20			var settings = $.extend({
21				'speed': 100, //速さ　単位はpx/秒です。
22				'direction': 'left', //up/down/left/rightから選択
23				'pauseonhover': true, //マウスオーバーでストップ
24				'responsive': false, //子要素の幅を%で指定しているとき
25				'clone': 1
26			},options);
27			
28			var setCss = function(obj,direction){
29				$(obj).wrap('<div class="infiniteslide_wrap"></div>').parent().css({
30					overflow: 'hidden'
31				});
32
33				if(direction == 'up' || direction == 'down'){
34					var d = 'column';
35				} else {
36					var d = 'row';
37				}
38								
39				$(obj).css({
40					display: 'flex',
41					flexWrap: 'nowrap',
42					alignItems: 'center',
43					'-ms-flex-align': 'center',
44					flexDirection: d
45				}).children().css({
46						flex: 'none',
47						display: 'block'
48					});
49			}
50			
51			var setClone = function(obj,clone){
52				var $clone = $(obj).children().clone().addClass('infiniteslide_clone');
53				i = 1;
54				while(i <= clone){
55					$clone.clone().appendTo($(obj));
56					i++;
57				}
58			}
59			
60			var getWidth = function(obj){
61				w = 0;
62				$(obj).children(':not(.infiniteslide_clone)').each(function(key,value){
63					w = w + $(this).outerWidth(true);
64				});
65				return w;
66			}
67			var getHeight = function(obj){
68				h = 0;
69				$(obj).children(':not(.infiniteslide_clone)').each(function(key,value){
70					h = h + $(this).outerHeight(true);
71				});
72				return h;
73			}
74
75			
76			var getSpeed = function(l,s){
77				return l / s;
78			}
79			var getNum = function(obj,direction){
80				if(direction == 'up' || direction == 'down'){
81					var num = getHeight(obj);
82				} else {
83					var num = getWidth(obj);
84				}
85				return num;
86			}
87			
88			var getTranslate = function(num,direction){
89				if(direction == 'up' || direction == 'down'){
90					var i = '0,-' + num + 'px,0';
91				} else {
92					var i = '-' + num + 'px,0,0';
93				}
94				return i;
95			}
96			
97			var setAnim = function(obj,id,direction,speed){
98				var num = getNum(obj,direction);
99				if(direction == 'up' || direction == 'down'){
100					$(obj).parent('.infiniteslide_wrap').css({
101						height: num + 'px'
102					});
103				}
104				var i = getTranslate(num,direction);
105				
106				$(obj).attr('data-style','infiniteslide' + id);
107
108				var css = '@keyframes infiniteslide' + id + '{' + 
109								'from {transform:translate3d(0,0,0);}' + 
110								'to {transform:translate3d(' + i + ');}' + 
111							'}';
112				$('<style />').attr('id','infiniteslide' + id + '_style')
113				.html(css)
114				.appendTo('head');
115				
116				if(direction == 'right' || direction == 'down'){
117					var reverse = ' reverse';
118				} else {
119					var reverse = '';
120				}
121				
122				$(obj).css({
123					animation: 'infiniteslide' + id + ' ' + getSpeed(num,speed) + 's linear 0s infinite' + reverse
124				});
125			}
126			var setStop = function(obj){
127				$(obj).on('mouseenter',function(){
128					$(this).css({
129						animationPlayState: 'paused'
130					});
131				}).on('mouseleave',function(){
132					$(this).css({
133						animationPlayState: 'running'
134					});
135				});
136			}
137			
138			var setResponsive = function(obj,direction){
139					var num = getNum(obj,direction);
140					var i = getTranslate(num,direction);
141					return i;
142				};
143			
144			
145			
146		
147			return this.each(function(key,value){
148				var $this = $(this);
149				var num = Date.now() + Math.floor(10000*Math.random()).toString(16);
150				if(settings.pauseonhover == true){
151					setStop($this);
152				}
153				var _onload = function(){
154					setCss($this,settings.direction);
155					setClone($this,settings.clone);
156					setAnim($this,num,settings.direction,settings.speed);
157					
158					if(settings.responsive){
159						$(window).on('resize',function(){
160							var i = setResponsive($this,settings.direction);
161							var styleid = $this.attr('data-style');
162							var stylehtml = $('#' + styleid + '_style').html();
163							
164							var stylehtml_new = stylehtml.replace(/to {transform:translate3d\((.*?)\)/,'to {transform:translate3d(' + i + ')');
165							$('#' + styleid + '_style').html(stylehtml_new);
166
167						});
168					}
169				};
170
171				if (window.loaded) {
172					_onload();
173				} else {
174					$(window).on('load', _onload);
175				}
176			});
177			
178		}
179	});
180})(jQuery);