lightslider.js 47 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156
  1. /*! lightslider - v1.1.6 - 2016-10-25
  2. * https://github.com/sachinchoolur/lightslider
  3. * Copyright (c) 2016 Sachin N; Licensed MIT */
  4. (function ($, undefined) {
  5. 'use strict';
  6. var defaults = {
  7. item: 3,
  8. autoWidth: false,
  9. slideMove: 1,
  10. slideMargin: 10,
  11. addClass: '',
  12. mode: 'slide',
  13. useCSS: true,
  14. cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',
  15. easing: 'linear', //'for jquery animation',//
  16. speed: 400, //ms'
  17. auto: false,
  18. pauseOnHover: false,
  19. loop: false,
  20. slideEndAnimation: true,
  21. pause: 2000,
  22. keyPress: false,
  23. controls: true,
  24. prevHtml: '',
  25. nextHtml: '',
  26. rtl: false,
  27. adaptiveHeight: false,
  28. vertical: false,
  29. verticalHeight: 500,
  30. vThumbWidth: 100,
  31. thumbItem: 10,
  32. pager: true,
  33. gallery: false,
  34. galleryMargin: 5,
  35. thumbMargin: 5,
  36. currentPagerPosition: 'middle',
  37. enableTouch: true,
  38. enableDrag: true,
  39. freeMove: true,
  40. swipeThreshold: 40,
  41. responsive: [],
  42. /* jshint ignore:start */
  43. onBeforeStart: function ($el) {
  44. },
  45. onSliderLoad: function ($el) {
  46. },
  47. onBeforeSlide: function ($el, scene) {
  48. },
  49. onAfterSlide: function ($el, scene) {
  50. },
  51. onBeforeNextSlide: function ($el, scene) {
  52. },
  53. onBeforePrevSlide: function ($el, scene) {
  54. }
  55. /* jshint ignore:end */
  56. };
  57. $.fn.lightSlider = function (options) {
  58. if (this.length === 0) {
  59. return this;
  60. }
  61. if (this.length > 1) {
  62. this.each(function () {
  63. $(this).lightSlider(options);
  64. });
  65. return this;
  66. }
  67. var plugin = {},
  68. settings = $.extend(true, {}, defaults, options),
  69. settingsTemp = {},
  70. $el = this;
  71. plugin.$el = this;
  72. if (settings.mode === 'fade') {
  73. settings.vertical = false;
  74. }
  75. var $children = $el.children(),
  76. windowW = $(window).width(),
  77. breakpoint = null,
  78. resposiveObj = null,
  79. length = 0,
  80. w = 0,
  81. on = false,
  82. elSize = 0,
  83. $slide = '',
  84. scene = 0,
  85. property = (settings.vertical === true) ? 'height' : 'width',
  86. gutter = (settings.vertical === true) ? 'margin-bottom' : 'margin-right',
  87. slideValue = 0,
  88. pagerWidth = 0,
  89. slideWidth = 0,
  90. thumbWidth = 0,
  91. interval = null,
  92. isTouch = ('ontouchstart' in document.documentElement);
  93. var refresh = {};
  94. refresh.chbreakpoint = function () {
  95. windowW = $(window).width();
  96. if (settings.responsive.length) {
  97. var item;
  98. if (settings.autoWidth === false) {
  99. item = settings.item;
  100. }
  101. if (windowW < settings.responsive[0].breakpoint) {
  102. for (var i = 0; i < settings.responsive.length; i++) {
  103. if (windowW < settings.responsive[i].breakpoint) {
  104. breakpoint = settings.responsive[i].breakpoint;
  105. resposiveObj = settings.responsive[i];
  106. }
  107. }
  108. }
  109. if (typeof resposiveObj !== 'undefined' && resposiveObj !== null) {
  110. for (var j in resposiveObj.settings) {
  111. if (resposiveObj.settings.hasOwnProperty(j)) {
  112. if (typeof settingsTemp[j] === 'undefined' || settingsTemp[j] === null) {
  113. settingsTemp[j] = settings[j];
  114. }
  115. settings[j] = resposiveObj.settings[j];
  116. }
  117. }
  118. }
  119. if (!$.isEmptyObject(settingsTemp) && windowW > settings.responsive[0].breakpoint) {
  120. for (var k in settingsTemp) {
  121. if (settingsTemp.hasOwnProperty(k)) {
  122. settings[k] = settingsTemp[k];
  123. }
  124. }
  125. }
  126. if (settings.autoWidth === false) {
  127. if (slideValue > 0 && slideWidth > 0) {
  128. if (item !== settings.item) {
  129. scene = Math.round(slideValue / ((slideWidth + settings.slideMargin) * settings.slideMove));
  130. }
  131. }
  132. }
  133. }
  134. };
  135. refresh.calSW = function () {
  136. if (settings.autoWidth === false) {
  137. slideWidth = (elSize - ((settings.item * (settings.slideMargin)) - settings.slideMargin)) / settings.item;
  138. }
  139. };
  140. refresh.calWidth = function (cln) {
  141. var ln = cln === true ? $slide.find('.lslide').length : $children.length;
  142. if (settings.autoWidth === false) {
  143. w = ln * (slideWidth + settings.slideMargin);
  144. } else {
  145. w = 0;
  146. for (var i = 0; i < ln; i++) {
  147. w += (parseInt($children.eq(i).width()) + settings.slideMargin);
  148. }
  149. }
  150. return w;
  151. };
  152. plugin = {
  153. doCss: function () {
  154. var support = function () {
  155. var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition'];
  156. var root = document.documentElement;
  157. for (var i = 0; i < transition.length; i++) {
  158. if (transition[i] in root.style) {
  159. return true;
  160. }
  161. }
  162. };
  163. if (settings.useCSS && support()) {
  164. return true;
  165. }
  166. return false;
  167. },
  168. keyPress: function () {
  169. if (settings.keyPress) {
  170. $(document).on('keyup.lightslider', function (e) {
  171. if (!$(':focus').is('input, textarea')) {
  172. if (e.preventDefault) {
  173. e.preventDefault();
  174. } else {
  175. e.returnValue = false;
  176. }
  177. if (e.keyCode === 37) {
  178. $el.goToPrevSlide();
  179. } else if (e.keyCode === 39) {
  180. $el.goToNextSlide();
  181. }
  182. }
  183. });
  184. }
  185. },
  186. controls: function () {
  187. if (settings.controls) {
  188. $el.after('<div class="lSAction"><a class="lSPrev">' + settings.prevHtml + '</a><a class="lSNext">' + settings.nextHtml + '</a></div>');
  189. if (!settings.autoWidth) {
  190. if (length <= settings.item) {
  191. $slide.find('.lSAction').hide();
  192. }
  193. } else {
  194. if (refresh.calWidth(false) < elSize) {
  195. $slide.find('.lSAction').hide();
  196. }
  197. }
  198. $slide.find('.lSAction a').on('click', function (e) {
  199. if (e.preventDefault) {
  200. e.preventDefault();
  201. } else {
  202. e.returnValue = false;
  203. }
  204. if ($(this).attr('class') === 'lSPrev') {
  205. $el.goToPrevSlide();
  206. } else {
  207. $el.goToNextSlide();
  208. }
  209. return false;
  210. });
  211. }
  212. },
  213. initialStyle: function () {
  214. var $this = this;
  215. if (settings.mode === 'fade') {
  216. settings.autoWidth = false;
  217. settings.slideEndAnimation = false;
  218. }
  219. if (settings.auto) {
  220. settings.slideEndAnimation = false;
  221. }
  222. if (settings.autoWidth) {
  223. settings.slideMove = 1;
  224. settings.item = 1;
  225. }
  226. if (settings.loop) {
  227. settings.slideMove = 1;
  228. settings.freeMove = false;
  229. }
  230. settings.onBeforeStart.call(this, $el);
  231. refresh.chbreakpoint();
  232. $el.addClass('lightSlider').wrap('<div class="lSSlideOuter ' + settings.addClass + '"><div class="lSSlideWrapper"></div></div>');
  233. $slide = $el.parent('.lSSlideWrapper');
  234. if (settings.rtl === true) {
  235. $slide.parent().addClass('lSrtl');
  236. }
  237. if (settings.vertical) {
  238. $slide.parent().addClass('vertical');
  239. elSize = settings.verticalHeight;
  240. $slide.css('height', elSize + 'px');
  241. } else {
  242. elSize = $el.outerWidth();
  243. }
  244. $children.addClass('lslide');
  245. if (settings.loop === true && settings.mode === 'slide') {
  246. refresh.calSW();
  247. refresh.clone = function () {
  248. if (refresh.calWidth(true) > elSize) {
  249. /**/
  250. var tWr = 0,
  251. tI = 0;
  252. for (var k = 0; k < $children.length; k++) {
  253. tWr += (parseInt($el.find('.lslide').eq(k).width()) + settings.slideMargin);
  254. tI++;
  255. if (tWr >= (elSize + settings.slideMargin)) {
  256. break;
  257. }
  258. }
  259. var tItem = settings.autoWidth === true ? tI : settings.item;
  260. /**/
  261. if (tItem < $el.find('.clone.left').length) {
  262. for (var i = 0; i < $el.find('.clone.left').length - tItem; i++) {
  263. $children.eq(i).remove();
  264. }
  265. }
  266. if (tItem < $el.find('.clone.right').length) {
  267. for (var j = $children.length - 1; j > ($children.length - 1 - $el.find('.clone.right').length); j--) {
  268. scene--;
  269. $children.eq(j).remove();
  270. }
  271. }
  272. /**/
  273. for (var n = $el.find('.clone.right').length; n < tItem; n++) {
  274. $el.find('.lslide').eq(n).clone().removeClass('lslide').addClass('clone right').appendTo($el);
  275. scene++;
  276. }
  277. for (var m = $el.find('.lslide').length - $el.find('.clone.left').length; m > ($el.find('.lslide').length - tItem); m--) {
  278. $el.find('.lslide').eq(m - 1).clone().removeClass('lslide').addClass('clone left').prependTo($el);
  279. }
  280. $children = $el.children();
  281. } else {
  282. if ($children.hasClass('clone')) {
  283. $el.find('.clone').remove();
  284. $this.move($el, 0);
  285. }
  286. }
  287. };
  288. refresh.clone();
  289. }
  290. refresh.sSW = function () {
  291. length = $children.length;
  292. if (settings.rtl === true && settings.vertical === false) {
  293. gutter = 'margin-left';
  294. }
  295. if (settings.autoWidth === false) {
  296. $children.css(property, slideWidth + 'px');
  297. }
  298. $children.css(gutter, settings.slideMargin + 'px');
  299. w = refresh.calWidth(false);
  300. $el.css(property, w + 'px');
  301. if (settings.loop === true && settings.mode === 'slide') {
  302. if (on === false) {
  303. scene = $el.find('.clone.left').length;
  304. }
  305. }
  306. };
  307. refresh.calL = function () {
  308. $children = $el.children();
  309. length = $children.length;
  310. };
  311. if (this.doCss()) {
  312. $slide.addClass('usingCss');
  313. }
  314. refresh.calL();
  315. if (settings.mode === 'slide') {
  316. refresh.calSW();
  317. refresh.sSW();
  318. if (settings.loop === true) {
  319. slideValue = $this.slideValue();
  320. this.move($el, slideValue);
  321. }
  322. if (settings.vertical === false) {
  323. this.setHeight($el, false);
  324. }
  325. } else {
  326. this.setHeight($el, true);
  327. $el.addClass('lSFade');
  328. if (!this.doCss()) {
  329. $children.fadeOut(0);
  330. $children.eq(scene).fadeIn(0);
  331. }
  332. }
  333. if (settings.loop === true && settings.mode === 'slide') {
  334. $children.eq(scene).addClass('active');
  335. } else {
  336. $children.first().addClass('active');
  337. }
  338. },
  339. pager: function () {
  340. var $this = this;
  341. refresh.createPager = function () {
  342. thumbWidth = (elSize - ((settings.thumbItem * (settings.thumbMargin)) - settings.thumbMargin)) / settings.thumbItem;
  343. var $children = $slide.find('.lslide');
  344. var length = $slide.find('.lslide').length;
  345. var i = 0,
  346. pagers = '',
  347. v = 0;
  348. for (i = 0; i < length; i++) {
  349. if (settings.mode === 'slide') {
  350. // calculate scene * slide value
  351. if (!settings.autoWidth) {
  352. v = i * ((slideWidth + settings.slideMargin) * settings.slideMove);
  353. } else {
  354. v += ((parseInt($children.eq(i).width()) + settings.slideMargin) * settings.slideMove);
  355. }
  356. }
  357. var thumb = $children.eq(i * settings.slideMove).attr('data-thumb');
  358. if (settings.gallery === true) {
  359. pagers += '<li style="width:100%;' + property + ':' + thumbWidth + 'px;' + gutter + ':' + settings.thumbMargin + 'px"><a href="#"><img src="' + thumb + '" /></a></li>';
  360. } else {
  361. pagers += '<li><a href="#">' + (i + 1) + '</a></li>';
  362. }
  363. if (settings.mode === 'slide') {
  364. if ((v) >= w - elSize - settings.slideMargin) {
  365. i = i + 1;
  366. var minPgr = 2;
  367. if (settings.autoWidth) {
  368. pagers += '<li><a href="#">' + (i + 1) + '</a></li>';
  369. minPgr = 1;
  370. }
  371. if (i < minPgr) {
  372. pagers = null;
  373. $slide.parent().addClass('noPager');
  374. } else {
  375. $slide.parent().removeClass('noPager');
  376. }
  377. break;
  378. }
  379. }
  380. }
  381. var $cSouter = $slide.parent();
  382. $cSouter.find('.lSPager').html(pagers);
  383. if (settings.gallery === true) {
  384. if (settings.vertical === true) {
  385. // set Gallery thumbnail width
  386. $cSouter.find('.lSPager').css('width', settings.vThumbWidth + 'px');
  387. }
  388. pagerWidth = (i * (settings.thumbMargin + thumbWidth)) + 0.5;
  389. $cSouter.find('.lSPager').css({
  390. property: pagerWidth + 'px',
  391. 'transition-duration': settings.speed + 'ms'
  392. });
  393. if (settings.vertical === true) {
  394. $slide.parent().css('padding-right', (settings.vThumbWidth + settings.galleryMargin) + 'px');
  395. }
  396. $cSouter.find('.lSPager').css(property, pagerWidth + 'px');
  397. }
  398. var $pager = $cSouter.find('.lSPager').find('li');
  399. $pager.first().addClass('active');
  400. $pager.on('click', function () {
  401. if (settings.loop === true && settings.mode === 'slide') {
  402. scene = scene + ($pager.index(this) - $cSouter.find('.lSPager').find('li.active').index());
  403. } else {
  404. scene = $pager.index(this);
  405. }
  406. $el.mode(false);
  407. if (settings.gallery === true) {
  408. $this.slideThumb();
  409. }
  410. return false;
  411. });
  412. };
  413. if (settings.pager) {
  414. var cl = 'lSpg';
  415. if (settings.gallery) {
  416. cl = 'lSGallery';
  417. }
  418. $slide.after('<ul class="lSPager ' + cl + '"></ul>');
  419. var gMargin = (settings.vertical) ? 'margin-left' : 'margin-top';
  420. $slide.parent().find('.lSPager').css(gMargin, settings.galleryMargin + 'px');
  421. refresh.createPager();
  422. }
  423. setTimeout(function () {
  424. refresh.init();
  425. }, 0);
  426. },
  427. setHeight: function (ob, fade) {
  428. var obj = null,
  429. $this = this;
  430. if (settings.loop) {
  431. obj = ob.children('.lslide ').first();
  432. } else {
  433. obj = ob.children().first();
  434. }
  435. var setCss = function () {
  436. var tH = obj.outerHeight(),
  437. tP = 0,
  438. tHT = tH;
  439. if (fade) {
  440. tH = 0;
  441. tP = ((tHT) * 100) / elSize;
  442. }
  443. ob.css({
  444. 'height': tH + 'px',
  445. 'padding-bottom': tP + '%'
  446. });
  447. };
  448. setCss();
  449. if (obj.find('img').length) {
  450. if (obj.find('img')[0].complete) {
  451. setCss();
  452. if (!interval) {
  453. $this.auto();
  454. }
  455. } else {
  456. obj.find('img').on('load', function () {
  457. setTimeout(function () {
  458. setCss();
  459. if (!interval) {
  460. $this.auto();
  461. }
  462. }, 100);
  463. });
  464. }
  465. } else {
  466. if (!interval) {
  467. $this.auto();
  468. }
  469. }
  470. },
  471. active: function (ob, t) {
  472. if (this.doCss() && settings.mode === 'fade') {
  473. $slide.addClass('on');
  474. }
  475. var sc = 0;
  476. if (scene * settings.slideMove < length) {
  477. ob.removeClass('active');
  478. if (!this.doCss() && settings.mode === 'fade' && t === false) {
  479. ob.fadeOut(settings.speed);
  480. }
  481. if (t === true) {
  482. sc = scene;
  483. } else {
  484. sc = scene * settings.slideMove;
  485. }
  486. //t === true ? sc = scene : sc = scene * settings.slideMove;
  487. var l, nl;
  488. if (t === true) {
  489. l = ob.length;
  490. nl = l - 1;
  491. if (sc + 1 >= l) {
  492. sc = nl;
  493. }
  494. }
  495. if (settings.loop === true && settings.mode === 'slide') {
  496. //t === true ? sc = scene - $el.find('.clone.left').length : sc = scene * settings.slideMove;
  497. if (t === true) {
  498. sc = scene - $el.find('.clone.left').length;
  499. } else {
  500. sc = scene * settings.slideMove;
  501. }
  502. if (t === true) {
  503. l = ob.length;
  504. nl = l - 1;
  505. if (sc + 1 === l) {
  506. sc = nl;
  507. } else if (sc + 1 > l) {
  508. sc = 0;
  509. }
  510. }
  511. }
  512. if (!this.doCss() && settings.mode === 'fade' && t === false) {
  513. ob.eq(sc).fadeIn(settings.speed);
  514. }
  515. ob.eq(sc).addClass('active');
  516. } else {
  517. ob.removeClass('active');
  518. ob.eq(ob.length - 1).addClass('active');
  519. if (!this.doCss() && settings.mode === 'fade' && t === false) {
  520. ob.fadeOut(settings.speed);
  521. ob.eq(sc).fadeIn(settings.speed);
  522. }
  523. }
  524. },
  525. move: function (ob, v) {
  526. if (settings.rtl === true) {
  527. v = -v;
  528. }
  529. if (this.doCss()) {
  530. if (settings.vertical === true) {
  531. ob.css({
  532. 'transform': 'translate3d(0px, ' + (-v) + 'px, 0px)',
  533. '-webkit-transform': 'translate3d(0px, ' + (-v) + 'px, 0px)'
  534. });
  535. } else {
  536. ob.css({
  537. 'transform': 'translate3d(' + (-v) + 'px, 0px, 0px)',
  538. '-webkit-transform': 'translate3d(' + (-v) + 'px, 0px, 0px)',
  539. });
  540. }
  541. } else {
  542. if (settings.vertical === true) {
  543. ob.css('position', 'relative').animate({
  544. top: -v + 'px'
  545. }, settings.speed, settings.easing);
  546. } else {
  547. ob.css('position', 'relative').animate({
  548. left: -v + 'px'
  549. }, settings.speed, settings.easing);
  550. }
  551. }
  552. var $thumb = $slide.parent().find('.lSPager').find('li');
  553. this.active($thumb, true);
  554. },
  555. fade: function () {
  556. this.active($children, false);
  557. var $thumb = $slide.parent().find('.lSPager').find('li');
  558. this.active($thumb, true);
  559. },
  560. slide: function () {
  561. var $this = this;
  562. refresh.calSlide = function () {
  563. if (w > elSize) {
  564. slideValue = $this.slideValue();
  565. $this.active($children, false);
  566. if ((slideValue) > w - elSize - settings.slideMargin) {
  567. slideValue = w - elSize - settings.slideMargin;
  568. } else if (slideValue < 0) {
  569. slideValue = 0;
  570. }
  571. $this.move($el, slideValue);
  572. if (settings.loop === true && settings.mode === 'slide') {
  573. if (scene >= (length - ($el.find('.clone.left').length / settings.slideMove))) {
  574. $this.resetSlide($el.find('.clone.left').length);
  575. }
  576. if (scene === 0) {
  577. $this.resetSlide($slide.find('.lslide').length);
  578. }
  579. }
  580. }
  581. };
  582. refresh.calSlide();
  583. },
  584. resetSlide: function (s) {
  585. var $this = this;
  586. $slide.find('.lSAction a').addClass('disabled');
  587. setTimeout(function () {
  588. scene = s;
  589. $slide.css('transition-duration', '0ms');
  590. slideValue = $this.slideValue();
  591. $this.active($children, false);
  592. plugin.move($el, slideValue);
  593. setTimeout(function () {
  594. $slide.css('transition-duration', settings.speed + 'ms');
  595. $slide.find('.lSAction a').removeClass('disabled');
  596. }, 50);
  597. }, settings.speed + 100);
  598. },
  599. slideValue: function () {
  600. var _sV = 0;
  601. if (settings.autoWidth === false) {
  602. _sV = scene * ((slideWidth + settings.slideMargin) * settings.slideMove);
  603. } else {
  604. _sV = 0;
  605. for (var i = 0; i < scene; i++) {
  606. _sV += (parseInt($children.eq(i).width()) + settings.slideMargin);
  607. }
  608. }
  609. return _sV;
  610. },
  611. slideThumb: function () {
  612. var position;
  613. switch (settings.currentPagerPosition) {
  614. case 'left':
  615. position = 0;
  616. break;
  617. case 'middle':
  618. position = (elSize / 2) - (thumbWidth / 2);
  619. break;
  620. case 'right':
  621. position = elSize - thumbWidth;
  622. }
  623. var sc = scene - $el.find('.clone.left').length;
  624. var $pager = $slide.parent().find('.lSPager');
  625. if (settings.mode === 'slide' && settings.loop === true) {
  626. if (sc >= $pager.children().length) {
  627. sc = 0;
  628. } else if (sc < 0) {
  629. sc = $pager.children().length;
  630. }
  631. }
  632. var thumbSlide = sc * ((thumbWidth + settings.thumbMargin)) - (position);
  633. if ((thumbSlide + elSize) > pagerWidth) {
  634. thumbSlide = pagerWidth - elSize - settings.thumbMargin;
  635. }
  636. if (thumbSlide < 0) {
  637. thumbSlide = 0;
  638. }
  639. this.move($pager, thumbSlide);
  640. },
  641. auto: function () {
  642. if (settings.auto) {
  643. clearInterval(interval);
  644. interval = setInterval(function () {
  645. $el.goToNextSlide();
  646. }, settings.pause);
  647. }
  648. },
  649. pauseOnHover: function () {
  650. var $this = this;
  651. if (settings.auto && settings.pauseOnHover) {
  652. $slide.on('mouseenter', function () {
  653. $(this).addClass('ls-hover');
  654. $el.pause();
  655. settings.auto = true;
  656. });
  657. $slide.on('mouseleave', function () {
  658. $(this).removeClass('ls-hover');
  659. if (!$slide.find('.lightSlider').hasClass('lsGrabbing')) {
  660. $this.auto();
  661. }
  662. });
  663. }
  664. },
  665. touchMove: function (endCoords, startCoords) {
  666. $slide.css('transition-duration', '0ms');
  667. if (settings.mode === 'slide') {
  668. var distance = endCoords - startCoords;
  669. var swipeVal = slideValue - distance;
  670. if ((swipeVal) >= w - elSize - settings.slideMargin) {
  671. if (settings.freeMove === false) {
  672. swipeVal = w - elSize - settings.slideMargin;
  673. } else {
  674. var swipeValT = w - elSize - settings.slideMargin;
  675. swipeVal = swipeValT + ((swipeVal - swipeValT) / 5);
  676. }
  677. } else if (swipeVal < 0) {
  678. if (settings.freeMove === false) {
  679. swipeVal = 0;
  680. } else {
  681. swipeVal = swipeVal / 5;
  682. }
  683. }
  684. this.move($el, swipeVal);
  685. }
  686. },
  687. touchEnd: function (distance) {
  688. $slide.css('transition-duration', settings.speed + 'ms');
  689. if (settings.mode === 'slide') {
  690. var mxVal = false;
  691. var _next = true;
  692. slideValue = slideValue - distance;
  693. if ((slideValue) > w - elSize - settings.slideMargin) {
  694. slideValue = w - elSize - settings.slideMargin;
  695. if (settings.autoWidth === false) {
  696. mxVal = true;
  697. }
  698. } else if (slideValue < 0) {
  699. slideValue = 0;
  700. }
  701. var gC = function (next) {
  702. var ad = 0;
  703. if (!mxVal) {
  704. if (next) {
  705. ad = 1;
  706. }
  707. }
  708. if (!settings.autoWidth) {
  709. var num = slideValue / ((slideWidth + settings.slideMargin) * settings.slideMove);
  710. scene = parseInt(num) + ad;
  711. if (slideValue >= (w - elSize - settings.slideMargin)) {
  712. if (num % 1 !== 0) {
  713. scene++;
  714. }
  715. }
  716. } else {
  717. var tW = 0;
  718. for (var i = 0; i < $children.length; i++) {
  719. tW += (parseInt($children.eq(i).width()) + settings.slideMargin);
  720. scene = i + ad;
  721. if (tW >= slideValue) {
  722. break;
  723. }
  724. }
  725. }
  726. };
  727. if (distance >= settings.swipeThreshold) {
  728. gC(false);
  729. _next = false;
  730. } else if (distance <= -settings.swipeThreshold) {
  731. gC(true);
  732. _next = false;
  733. }
  734. $el.mode(_next);
  735. this.slideThumb();
  736. } else {
  737. if (distance >= settings.swipeThreshold) {
  738. $el.goToPrevSlide();
  739. } else if (distance <= -settings.swipeThreshold) {
  740. $el.goToNextSlide();
  741. }
  742. }
  743. },
  744. enableDrag: function () {
  745. var $this = this;
  746. if (!isTouch) {
  747. var startCoords = 0,
  748. endCoords = 0,
  749. isDraging = false;
  750. $slide.find('.lightSlider').addClass('lsGrab');
  751. $slide.on('mousedown', function (e) {
  752. if (w < elSize) {
  753. if (w !== 0) {
  754. return false;
  755. }
  756. }
  757. if ($(e.target).attr('class') !== ('lSPrev') && $(e.target).attr('class') !== ('lSNext')) {
  758. startCoords = (settings.vertical === true) ? e.pageY : e.pageX;
  759. isDraging = true;
  760. if (e.preventDefault) {
  761. e.preventDefault();
  762. } else {
  763. e.returnValue = false;
  764. }
  765. // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
  766. $slide.scrollLeft += 1;
  767. $slide.scrollLeft -= 1;
  768. // *
  769. $slide.find('.lightSlider').removeClass('lsGrab').addClass('lsGrabbing');
  770. clearInterval(interval);
  771. }
  772. });
  773. $(window).on('mousemove', function (e) {
  774. if (isDraging) {
  775. endCoords = (settings.vertical === true) ? e.pageY : e.pageX;
  776. $this.touchMove(endCoords, startCoords);
  777. }
  778. });
  779. $(window).on('mouseup', function (e) {
  780. if (isDraging) {
  781. $slide.find('.lightSlider').removeClass('lsGrabbing').addClass('lsGrab');
  782. isDraging = false;
  783. endCoords = (settings.vertical === true) ? e.pageY : e.pageX;
  784. var distance = endCoords - startCoords;
  785. if (Math.abs(distance) >= settings.swipeThreshold) {
  786. $(window).on('click.ls', function (e) {
  787. if (e.preventDefault) {
  788. e.preventDefault();
  789. } else {
  790. e.returnValue = false;
  791. }
  792. e.stopImmediatePropagation();
  793. e.stopPropagation();
  794. $(window).off('click.ls');
  795. });
  796. }
  797. $this.touchEnd(distance);
  798. }
  799. });
  800. }
  801. },
  802. enableTouch: function () {
  803. var $this = this;
  804. if (isTouch) {
  805. var startCoords = {},
  806. endCoords = {};
  807. $slide.on('touchstart', function (e) {
  808. endCoords = e.originalEvent.targetTouches[0];
  809. startCoords.pageX = e.originalEvent.targetTouches[0].pageX;
  810. startCoords.pageY = e.originalEvent.targetTouches[0].pageY;
  811. clearInterval(interval);
  812. });
  813. $slide.on('touchmove', function (e) {
  814. if (w < elSize) {
  815. if (w !== 0) {
  816. return false;
  817. }
  818. }
  819. var orig = e.originalEvent;
  820. endCoords = orig.targetTouches[0];
  821. var xMovement = Math.abs(endCoords.pageX - startCoords.pageX);
  822. var yMovement = Math.abs(endCoords.pageY - startCoords.pageY);
  823. if (settings.vertical === true) {
  824. if ((yMovement * 3) > xMovement) {
  825. e.preventDefault();
  826. }
  827. $this.touchMove(endCoords.pageY, startCoords.pageY);
  828. } else {
  829. if ((xMovement * 3) > yMovement) {
  830. e.preventDefault();
  831. }
  832. $this.touchMove(endCoords.pageX, startCoords.pageX);
  833. }
  834. });
  835. $slide.on('touchend', function () {
  836. if (w < elSize) {
  837. if (w !== 0) {
  838. return false;
  839. }
  840. }
  841. var distance;
  842. if (settings.vertical === true) {
  843. distance = endCoords.pageY - startCoords.pageY;
  844. } else {
  845. distance = endCoords.pageX - startCoords.pageX;
  846. }
  847. $this.touchEnd(distance);
  848. });
  849. }
  850. },
  851. build: function () {
  852. var $this = this;
  853. $this.initialStyle();
  854. if (this.doCss()) {
  855. if (settings.enableTouch === true) {
  856. $this.enableTouch();
  857. }
  858. if (settings.enableDrag === true) {
  859. $this.enableDrag();
  860. }
  861. }
  862. $(window).on('focus', function () {
  863. $this.auto();
  864. });
  865. $(window).on('blur', function () {
  866. clearInterval(interval);
  867. });
  868. $this.pager();
  869. $this.pauseOnHover();
  870. $this.controls();
  871. $this.keyPress();
  872. }
  873. };
  874. plugin.build();
  875. refresh.init = function () {
  876. refresh.chbreakpoint();
  877. if (settings.vertical === true) {
  878. if (settings.item > 1) {
  879. elSize = settings.verticalHeight;
  880. } else {
  881. elSize = $children.outerHeight();
  882. }
  883. $slide.css('height', elSize + 'px');
  884. } else {
  885. elSize = $slide.outerWidth();
  886. }
  887. if (settings.loop === true && settings.mode === 'slide') {
  888. refresh.clone();
  889. }
  890. refresh.calL();
  891. if (settings.mode === 'slide') {
  892. $el.removeClass('lSSlide');
  893. }
  894. if (settings.mode === 'slide') {
  895. refresh.calSW();
  896. refresh.sSW();
  897. }
  898. setTimeout(function () {
  899. if (settings.mode === 'slide') {
  900. $el.addClass('lSSlide');
  901. }
  902. }, 1000);
  903. if (settings.pager) {
  904. refresh.createPager();
  905. }
  906. if (settings.adaptiveHeight === true && settings.vertical === false) {
  907. $el.css('height', $children.eq(scene).outerHeight(true));
  908. }
  909. if (settings.adaptiveHeight === false) {
  910. if (settings.mode === 'slide') {
  911. if (settings.vertical === false) {
  912. plugin.setHeight($el, false);
  913. } else {
  914. plugin.auto();
  915. }
  916. } else {
  917. plugin.setHeight($el, true);
  918. }
  919. }
  920. if (settings.gallery === true) {
  921. plugin.slideThumb();
  922. }
  923. if (settings.mode === 'slide') {
  924. plugin.slide();
  925. }
  926. if (settings.autoWidth === false) {
  927. if ($children.length <= settings.item) {
  928. $slide.find('.lSAction').hide();
  929. } else {
  930. $slide.find('.lSAction').show();
  931. }
  932. } else {
  933. if ((refresh.calWidth(false) < elSize) && (w !== 0)) {
  934. $slide.find('.lSAction').hide();
  935. } else {
  936. $slide.find('.lSAction').show();
  937. }
  938. }
  939. };
  940. $el.goToPrevSlide = function () {
  941. if (scene > 0) {
  942. settings.onBeforePrevSlide.call(this, $el, scene);
  943. scene--;
  944. $el.mode(false);
  945. if (settings.gallery === true) {
  946. plugin.slideThumb();
  947. }
  948. } else {
  949. if (settings.loop === true) {
  950. settings.onBeforePrevSlide.call(this, $el, scene);
  951. if (settings.mode === 'fade') {
  952. var l = (length - 1);
  953. scene = parseInt(l / settings.slideMove);
  954. }
  955. $el.mode(false);
  956. if (settings.gallery === true) {
  957. plugin.slideThumb();
  958. }
  959. } else if (settings.slideEndAnimation === true) {
  960. $el.addClass('leftEnd');
  961. setTimeout(function () {
  962. $el.removeClass('leftEnd');
  963. }, 400);
  964. }
  965. }
  966. };
  967. $el.goToNextSlide = function () {
  968. var nextI = true;
  969. if (settings.mode === 'slide') {
  970. var _slideValue = plugin.slideValue();
  971. nextI = _slideValue < w - elSize - settings.slideMargin;
  972. }
  973. if (((scene * settings.slideMove) < length - settings.slideMove) && nextI) {
  974. settings.onBeforeNextSlide.call(this, $el, scene);
  975. scene++;
  976. $el.mode(false);
  977. if (settings.gallery === true) {
  978. plugin.slideThumb();
  979. }
  980. } else {
  981. if (settings.loop === true) {
  982. settings.onBeforeNextSlide.call(this, $el, scene);
  983. scene = 0;
  984. $el.mode(false);
  985. if (settings.gallery === true) {
  986. plugin.slideThumb();
  987. }
  988. } else if (settings.slideEndAnimation === true) {
  989. $el.addClass('rightEnd');
  990. setTimeout(function () {
  991. $el.removeClass('rightEnd');
  992. }, 400);
  993. }
  994. }
  995. };
  996. $el.mode = function (_touch) {
  997. if (settings.adaptiveHeight === true && settings.vertical === false) {
  998. $el.css('height', $children.eq(scene).outerHeight(true));
  999. }
  1000. if (on === false) {
  1001. if (settings.mode === 'slide') {
  1002. if (plugin.doCss()) {
  1003. $el.addClass('lSSlide');
  1004. if (settings.speed !== '') {
  1005. $slide.css('transition-duration', settings.speed + 'ms');
  1006. }
  1007. if (settings.cssEasing !== '') {
  1008. $slide.css('transition-timing-function', settings.cssEasing);
  1009. }
  1010. }
  1011. } else {
  1012. if (plugin.doCss()) {
  1013. if (settings.speed !== '') {
  1014. $el.css('transition-duration', settings.speed + 'ms');
  1015. }
  1016. if (settings.cssEasing !== '') {
  1017. $el.css('transition-timing-function', settings.cssEasing);
  1018. }
  1019. }
  1020. }
  1021. }
  1022. if (!_touch) {
  1023. settings.onBeforeSlide.call(this, $el, scene);
  1024. }
  1025. if (settings.mode === 'slide') {
  1026. plugin.slide();
  1027. } else {
  1028. plugin.fade();
  1029. }
  1030. if (!$slide.hasClass('ls-hover')) {
  1031. plugin.auto();
  1032. }
  1033. setTimeout(function () {
  1034. if (!_touch) {
  1035. settings.onAfterSlide.call(this, $el, scene);
  1036. }
  1037. }, settings.speed);
  1038. on = true;
  1039. };
  1040. $el.play = function () {
  1041. $el.goToNextSlide();
  1042. settings.auto = true;
  1043. plugin.auto();
  1044. };
  1045. $el.pause = function () {
  1046. settings.auto = false;
  1047. clearInterval(interval);
  1048. };
  1049. $el.refresh = function () {
  1050. refresh.init();
  1051. };
  1052. $el.getCurrentSlideCount = function () {
  1053. var sc = scene;
  1054. if (settings.loop) {
  1055. var ln = $slide.find('.lslide').length,
  1056. cl = $el.find('.clone.left').length;
  1057. if (scene <= cl - 1) {
  1058. sc = ln + (scene - cl);
  1059. } else if (scene >= (ln + cl)) {
  1060. sc = scene - ln - cl;
  1061. } else {
  1062. sc = scene - cl;
  1063. }
  1064. }
  1065. return sc + 1;
  1066. };
  1067. $el.getTotalSlideCount = function () {
  1068. return $slide.find('.lslide').length;
  1069. };
  1070. $el.goToSlide = function (s) {
  1071. if (settings.loop) {
  1072. scene = (s + $el.find('.clone.left').length - 1);
  1073. } else {
  1074. scene = s;
  1075. }
  1076. $el.mode(false);
  1077. if (settings.gallery === true) {
  1078. plugin.slideThumb();
  1079. }
  1080. };
  1081. $el.destroy = function () {
  1082. if ($el.lightSlider) {
  1083. $el.goToPrevSlide = function () {
  1084. };
  1085. $el.goToNextSlide = function () {
  1086. };
  1087. $el.mode = function () {
  1088. };
  1089. $el.play = function () {
  1090. };
  1091. $el.pause = function () {
  1092. };
  1093. $el.refresh = function () {
  1094. };
  1095. $el.getCurrentSlideCount = function () {
  1096. };
  1097. $el.getTotalSlideCount = function () {
  1098. };
  1099. $el.goToSlide = function () {
  1100. };
  1101. $el.lightSlider = null;
  1102. refresh = {
  1103. init: function () {
  1104. }
  1105. };
  1106. $el.parent().parent().find('.lSAction, .lSPager').remove();
  1107. $el.removeClass('lightSlider lSFade lSSlide lsGrab lsGrabbing leftEnd right').removeAttr('style').unwrap().unwrap();
  1108. $el.children().removeAttr('style');
  1109. $children.removeClass('lslide active');
  1110. $el.find('.clone').remove();
  1111. $children = null;
  1112. interval = null;
  1113. on = false;
  1114. scene = 0;
  1115. }
  1116. };
  1117. setTimeout(function () {
  1118. settings.onSliderLoad.call(this, $el);
  1119. }, 10);
  1120. $(window).on('resize orientationchange', function (e) {
  1121. setTimeout(function () {
  1122. if (e.preventDefault) {
  1123. e.preventDefault();
  1124. } else {
  1125. e.returnValue = false;
  1126. }
  1127. refresh.init();
  1128. }, 200);
  1129. });
  1130. return this;
  1131. };
  1132. }(jQuery));