splide.esm.js 133 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788
  1. /*!
  2. * Splide.js
  3. * Version : 2.3.2
  4. * License : MIT
  5. * Copyright: 2020 Naotoshi Fujita
  6. */
  7. (function webpackUniversalModuleDefinition(root, factory) {
  8. if(typeof exports === 'object' && typeof module === 'object')
  9. module.exports = factory();
  10. else if(typeof define === 'function' && define.amd)
  11. define([], factory);
  12. else if(typeof exports === 'object')
  13. exports["Splide"] = factory();
  14. else
  15. root["Splide"] = factory();
  16. })(window, function() {
  17. return /******/ (function(modules) { // webpackBootstrap
  18. /******/ // The module cache
  19. /******/ var installedModules = {};
  20. /******/
  21. /******/ // The require function
  22. /******/ function __webpack_require__(moduleId) {
  23. /******/
  24. /******/ // Check if module is in cache
  25. /******/ if(installedModules[moduleId]) {
  26. /******/ return installedModules[moduleId].exports;
  27. /******/ }
  28. /******/ // Create a new module (and put it into the cache)
  29. /******/ var module = installedModules[moduleId] = {
  30. /******/ i: moduleId,
  31. /******/ l: false,
  32. /******/ exports: {}
  33. /******/ };
  34. /******/
  35. /******/ // Execute the module function
  36. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  37. /******/
  38. /******/ // Flag the module as loaded
  39. /******/ module.l = true;
  40. /******/
  41. /******/ // Return the exports of the module
  42. /******/ return module.exports;
  43. /******/ }
  44. /******/
  45. /******/
  46. /******/ // expose the modules object (__webpack_modules__)
  47. /******/ __webpack_require__.m = modules;
  48. /******/
  49. /******/ // expose the module cache
  50. /******/ __webpack_require__.c = installedModules;
  51. /******/
  52. /******/ // define getter function for harmony exports
  53. /******/ __webpack_require__.d = function(exports, name, getter) {
  54. /******/ if(!__webpack_require__.o(exports, name)) {
  55. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  56. /******/ }
  57. /******/ };
  58. /******/
  59. /******/ // define __esModule on exports
  60. /******/ __webpack_require__.r = function(exports) {
  61. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  62. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  63. /******/ }
  64. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  65. /******/ };
  66. /******/
  67. /******/ // create a fake namespace object
  68. /******/ // mode & 1: value is a module id, require it
  69. /******/ // mode & 2: merge all properties of value into the ns
  70. /******/ // mode & 4: return value when already ns object
  71. /******/ // mode & 8|1: behave like require
  72. /******/ __webpack_require__.t = function(value, mode) {
  73. /******/ if(mode & 1) value = __webpack_require__(value);
  74. /******/ if(mode & 8) return value;
  75. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  76. /******/ var ns = Object.create(null);
  77. /******/ __webpack_require__.r(ns);
  78. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  79. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  80. /******/ return ns;
  81. /******/ };
  82. /******/
  83. /******/ // getDefaultExport function for compatibility with non-harmony modules
  84. /******/ __webpack_require__.n = function(module) {
  85. /******/ var getter = module && module.__esModule ?
  86. /******/ function getDefault() { return module['default']; } :
  87. /******/ function getModuleExports() { return module; };
  88. /******/ __webpack_require__.d(getter, 'a', getter);
  89. /******/ return getter;
  90. /******/ };
  91. /******/
  92. /******/ // Object.prototype.hasOwnProperty.call
  93. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  94. /******/
  95. /******/ // __webpack_public_path__
  96. /******/ __webpack_require__.p = "";
  97. /******/
  98. /******/
  99. /******/ // Load entry module and return exports
  100. /******/ return __webpack_require__(__webpack_require__.s = 0);
  101. /******/ })
  102. /************************************************************************/
  103. /******/ ([
  104. /* 0 */
  105. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  106. "use strict";
  107. // ESM COMPAT FLAG
  108. __webpack_require__.r(__webpack_exports__);
  109. // EXPORTS
  110. __webpack_require__.d(__webpack_exports__, "default", function() { return /* binding */ module_Splide; });
  111. // NAMESPACE OBJECT: ./src/js/constants/states.js
  112. var states_namespaceObject = {};
  113. __webpack_require__.r(states_namespaceObject);
  114. __webpack_require__.d(states_namespaceObject, "CREATED", function() { return CREATED; });
  115. __webpack_require__.d(states_namespaceObject, "MOUNTED", function() { return MOUNTED; });
  116. __webpack_require__.d(states_namespaceObject, "IDLE", function() { return IDLE; });
  117. __webpack_require__.d(states_namespaceObject, "MOVING", function() { return MOVING; });
  118. __webpack_require__.d(states_namespaceObject, "DESTROYED", function() { return DESTROYED; });
  119. // CONCATENATED MODULE: ./src/js/core/event.js
  120. /**
  121. * The function for providing an Event object simply managing events.
  122. *
  123. * @author Naotoshi Fujita
  124. * @copyright Naotoshi Fujita. All rights reserved.
  125. */
  126. /**
  127. * The function for providing an Event object simply managing events.
  128. */
  129. /* harmony default export */ var core_event = (function () {
  130. /**
  131. * Store all event data.
  132. *
  133. * @type {Array}
  134. */
  135. var data = [];
  136. var Event = {
  137. /**
  138. * Subscribe the given event(s).
  139. *
  140. * @param {string} events - An event name. Use space to separate multiple events.
  141. * Also, namespace is accepted by dot, such as 'resize.{namespace}'.
  142. * @param {function} handler - A callback function.
  143. * @param {Element} elm - Optional. Native event will be listened to when this arg is provided.
  144. * @param {Object} options - Optional. Options for addEventListener.
  145. */
  146. on: function on(events, handler, elm, options) {
  147. if (elm === void 0) {
  148. elm = null;
  149. }
  150. if (options === void 0) {
  151. options = {};
  152. }
  153. events.split(' ').forEach(function (event) {
  154. if (elm) {
  155. elm.addEventListener(event, handler, options);
  156. }
  157. data.push({
  158. event: event,
  159. handler: handler,
  160. elm: elm,
  161. options: options
  162. });
  163. });
  164. },
  165. /**
  166. * Unsubscribe the given event(s).
  167. *
  168. * @param {string} events - A event name or names split by space.
  169. * @param {Element} elm - Optional. removeEventListener() will be called when this arg is provided.
  170. */
  171. off: function off(events, elm) {
  172. if (elm === void 0) {
  173. elm = null;
  174. }
  175. events.split(' ').forEach(function (event) {
  176. data = data.filter(function (item) {
  177. if (item && item.event === event && item.elm === elm) {
  178. unsubscribe(item);
  179. return false;
  180. }
  181. return true;
  182. });
  183. });
  184. },
  185. /**
  186. * Emit an event.
  187. * This method is only for custom events.
  188. *
  189. * @param {string} event - An event name.
  190. * @param {*} args - Any number of arguments passed to handlers.
  191. */
  192. emit: function emit(event) {
  193. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  194. args[_key - 1] = arguments[_key];
  195. }
  196. data.forEach(function (item) {
  197. if (!item.elm && item.event.split('.')[0] === event) {
  198. item.handler.apply(item, args);
  199. }
  200. });
  201. },
  202. /**
  203. * Clear event data.
  204. */
  205. destroy: function destroy() {
  206. data.forEach(unsubscribe);
  207. data = [];
  208. }
  209. };
  210. /**
  211. * Remove the registered event listener.
  212. *
  213. * @param {Object} item - An object containing event data.
  214. */
  215. function unsubscribe(item) {
  216. if (item.elm) {
  217. item.elm.removeEventListener(item.event, item.handler, item.options);
  218. }
  219. }
  220. return Event;
  221. });
  222. // CONCATENATED MODULE: ./src/js/core/state.js
  223. /**
  224. * The function providing a super simple state system.
  225. *
  226. * @author Naotoshi Fujita
  227. * @copyright Naotoshi Fujita. All rights reserved.
  228. */
  229. /**
  230. * The function providing a super simple state system.
  231. *
  232. * @param {string|number} initialState - Provide the initial state value.
  233. */
  234. /* harmony default export */ var state = (function (initialState) {
  235. /**
  236. * Store the current state.
  237. *
  238. * @type {string|number}
  239. */
  240. var curr = initialState;
  241. return {
  242. /**
  243. * Change state.
  244. *
  245. * @param {string|number} state - A new state.
  246. */
  247. set: function set(state) {
  248. curr = state;
  249. },
  250. /**
  251. * Verify if the current state is given one or not.
  252. *
  253. * @param {string|number} state - A state name to be verified.
  254. *
  255. * @return {boolean} - True if the current state is the given one.
  256. */
  257. is: function is(state) {
  258. return state === curr;
  259. }
  260. };
  261. });
  262. // CONCATENATED MODULE: ./src/js/utils/object.js
  263. function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  264. /**
  265. * Some utility functions related with Object, supporting IE.
  266. *
  267. * @author Naotoshi Fujita
  268. * @copyright Naotoshi Fujita. All rights reserved.
  269. */
  270. /**
  271. * Iterate an object like Array.forEach.
  272. * IE doesn't support forEach of HTMLCollection.
  273. *
  274. * @param {Object} obj - An object.
  275. * @param {function} callback - A function handling each value. Arguments are value, property and index.
  276. */
  277. function each(obj, callback) {
  278. Object.keys(obj).some(function (key, index) {
  279. return callback(obj[key], key, index);
  280. });
  281. }
  282. /**
  283. * Return values of the given object as an array.
  284. * IE doesn't support Object.values.
  285. *
  286. * @param {Object} obj - An object.
  287. *
  288. * @return {Array} - An array containing all values of the given object.
  289. */
  290. function values(obj) {
  291. return Object.keys(obj).map(function (key) {
  292. return obj[key];
  293. });
  294. }
  295. /**
  296. * Check if the given subject is object or not.
  297. *
  298. * @param {*} subject - A subject to be verified.
  299. *
  300. * @return {boolean} - True if object, false otherwise.
  301. */
  302. function isObject(subject) {
  303. return typeof subject === 'object';
  304. }
  305. /**
  306. * Merge two objects deeply.
  307. *
  308. * @param {Object} to - An object where "from" is merged.
  309. * @param {Object} from - An object merged to "to".
  310. *
  311. * @return {Object} - A merged object.
  312. */
  313. function merge(_ref, from) {
  314. var to = _extends({}, _ref);
  315. each(from, function (value, key) {
  316. if (isObject(value)) {
  317. if (!isObject(to[key])) {
  318. to[key] = {};
  319. }
  320. to[key] = merge(to[key], value);
  321. } else {
  322. to[key] = value;
  323. }
  324. });
  325. return to;
  326. }
  327. /**
  328. * Assign all properties "from" to "to" object.
  329. *
  330. * @param {Object} to - An object where properties are assigned.
  331. * @param {Object} from - An object whose properties are assigned to "to".
  332. *
  333. * @return {Object} - An assigned object.
  334. */
  335. function object_assign(to, from) {
  336. to._s = from;
  337. Object.keys(from).forEach(function (key) {
  338. if (!to[key]) {
  339. Object.defineProperty(to, key, Object.getOwnPropertyDescriptor(from, key));
  340. }
  341. });
  342. return to;
  343. }
  344. // CONCATENATED MODULE: ./src/js/utils/utils.js
  345. /**
  346. * A package of some miscellaneous utility functions.
  347. *
  348. * @author Naotoshi Fujita
  349. * @copyright Naotoshi Fujita. All rights reserved.
  350. */
  351. /**
  352. * Convert the given value to array.
  353. *
  354. * @param {*} value - Any value.
  355. *
  356. * @return {*[]} - Array containing the given value.
  357. */
  358. function toArray(value) {
  359. return Array.isArray(value) ? value : [value];
  360. }
  361. /**
  362. * Check if the given value is between min and max.
  363. * Min will be returned when the value is less than min or max will do when greater than max.
  364. *
  365. * @param {number} value - A number to be checked.
  366. * @param {number} m1 - Minimum or maximum number.
  367. * @param {number} m2 - Maximum or minimum number.
  368. *
  369. * @return {number} - A value itself, min or max.
  370. */
  371. function between(value, m1, m2) {
  372. return Math.min(Math.max(value, m1 > m2 ? m2 : m1), m1 > m2 ? m1 : m2);
  373. }
  374. /**
  375. * The sprintf method with minimum functionality.
  376. *
  377. * @param {string} format - The string format.
  378. * @param {string|Array} replacements - Replacements accepting multiple arguments.
  379. *
  380. * @returns {string} - Converted string.
  381. */
  382. function sprintf(format, replacements) {
  383. var i = 0;
  384. return format.replace(/%s/g, function () {
  385. return toArray(replacements)[i++];
  386. });
  387. }
  388. /**
  389. * Append px unit to the given subject if necessary.
  390. *
  391. * @param {number|string} value - A value that may not include an unit.
  392. *
  393. * @return {string} - If the value is string, return itself.
  394. * If number, do value + "px". An empty string, otherwise.
  395. */
  396. function unit(value) {
  397. var type = typeof value;
  398. if (type === 'number' && value > 0) {
  399. return parseFloat(value) + 'px';
  400. }
  401. return type === 'string' ? value : '';
  402. }
  403. /**
  404. * Pad start with 0.
  405. *
  406. * @param {number} number - A number to be filled with 0.
  407. *
  408. * @return {string|number} - Padded number.
  409. */
  410. function pad(number) {
  411. return number < 10 ? '0' + number : number;
  412. }
  413. /**
  414. * Convert the given value to pixel.
  415. *
  416. * @param {Element} root - Root element where a dummy div is appended.
  417. * @param {string|number} value - CSS value to be converted, such as 10rem.
  418. *
  419. * @return {number} - Pixel.
  420. */
  421. function toPixel(root, value) {
  422. if (typeof value === 'string') {
  423. var div = create('div', {});
  424. applyStyle(div, {
  425. position: 'absolute',
  426. width: value
  427. });
  428. append(root, div);
  429. value = div.clientWidth;
  430. dom_remove(div);
  431. }
  432. return value;
  433. }
  434. // CONCATENATED MODULE: ./src/js/utils/dom.js
  435. /**
  436. * Some utility functions related with DOM.
  437. *
  438. * @author Naotoshi Fujita
  439. * @copyright Naotoshi Fujita. All rights reserved.
  440. */
  441. /**
  442. * Find the first element matching the given selector.
  443. * Be aware that all selectors after a space are ignored.
  444. *
  445. * @param {Element|Node} elm - An ancestor element.
  446. * @param {string} selector - DOMString.
  447. *
  448. * @return {Element|null} - A found element or null.
  449. */
  450. function find(elm, selector) {
  451. return elm ? elm.querySelector(selector.split(' ')[0]) : null;
  452. }
  453. /**
  454. * Find a first child having the given tag or class name.
  455. *
  456. * @param {Element} parent - A parent element.
  457. * @param {string} tagOrClassName - A tag or class name.
  458. *
  459. * @return {Element|null} - A found element on success. Null on failure.
  460. */
  461. function child(parent, tagOrClassName) {
  462. if (parent) {
  463. return values(parent.children).filter(function (child) {
  464. return hasClass(child, tagOrClassName.split(' ')[0]) || child.tagName.toLowerCase() === tagOrClassName;
  465. })[0] || null;
  466. }
  467. return null;
  468. }
  469. /**
  470. * Create an element with some optional attributes.
  471. *
  472. * @param {string} tag - A tag name.
  473. * @param {Object} attrs - An object any attribute pairs of name and value.
  474. *
  475. * @return {Element} - A created element.
  476. */
  477. function create(tag, attrs) {
  478. var elm = document.createElement(tag);
  479. each(attrs, function (value, key) {
  480. return setAttribute(elm, key, value);
  481. });
  482. return elm;
  483. }
  484. /**
  485. * Convert HTML string to DOM node.
  486. *
  487. * @param {string} html - HTML string.
  488. *
  489. * @return {Node} - A created node.
  490. */
  491. function domify(html) {
  492. var div = create('div', {});
  493. div.innerHTML = html;
  494. return div.firstChild;
  495. }
  496. /**
  497. * Remove a given element from a DOM tree.
  498. *
  499. * @param {Element|Element[]} elms - Element(s) to be removed.
  500. */
  501. function dom_remove(elms) {
  502. toArray(elms).forEach(function (elm) {
  503. if (elm && elm.parentElement) {
  504. elm.parentElement.removeChild(elm);
  505. }
  506. });
  507. }
  508. /**
  509. * Append a child to a given element.
  510. *
  511. * @param {Element} parent - A parent element.
  512. * @param {Element} child - An element to be appended.
  513. */
  514. function append(parent, child) {
  515. if (parent) {
  516. parent.appendChild(child);
  517. }
  518. }
  519. /**
  520. * Insert an element before the reference element.
  521. *
  522. * @param {Element|Node} ref - A reference element.
  523. * @param {Element} elm - An element to be inserted.
  524. */
  525. function before(elm, ref) {
  526. if (elm && ref && ref.parentElement) {
  527. ref.parentElement.insertBefore(elm, ref);
  528. }
  529. }
  530. /**
  531. * Apply styles to the given element.
  532. *
  533. * @param {Element} elm - An element where styles are applied.
  534. * @param {Object} styles - Object containing styles.
  535. */
  536. function applyStyle(elm, styles) {
  537. if (elm) {
  538. each(styles, function (value, prop) {
  539. if (value !== null) {
  540. elm.style[prop] = value;
  541. }
  542. });
  543. }
  544. }
  545. /**
  546. * Add or remove classes to/from the element.
  547. * This function is for internal usage.
  548. *
  549. * @param {Element} elm - An element where classes are added.
  550. * @param {string|string[]} classes - Class names being added.
  551. * @param {boolean} remove - Whether to remove or add classes.
  552. */
  553. function addOrRemoveClasses(elm, classes, remove) {
  554. if (elm) {
  555. toArray(classes).forEach(function (name) {
  556. if (name) {
  557. elm.classList[remove ? 'remove' : 'add'](name);
  558. }
  559. });
  560. }
  561. }
  562. /**
  563. * Add classes to the element.
  564. *
  565. * @param {Element} elm - An element where classes are added.
  566. * @param {string|string[]} classes - Class names being added.
  567. */
  568. function addClass(elm, classes) {
  569. addOrRemoveClasses(elm, classes, false);
  570. }
  571. /**
  572. * Remove a class from the element.
  573. *
  574. * @param {Element} elm - An element where classes are removed.
  575. * @param {string|string[]} classes - A class name being removed.
  576. */
  577. function removeClass(elm, classes) {
  578. addOrRemoveClasses(elm, classes, true);
  579. }
  580. /**
  581. * Verify if the provided element has the class or not.
  582. *
  583. * @param {Element} elm - An element.
  584. * @param {string} className - A class name.
  585. *
  586. * @return {boolean} - True if the element has the class or false if not.
  587. */
  588. function hasClass(elm, className) {
  589. return !!elm && elm.classList.contains(className);
  590. }
  591. /**
  592. * Set attribute to the given element.
  593. *
  594. * @param {Element} elm - An element where an attribute is assigned.
  595. * @param {string} name - Attribute name.
  596. * @param {string|number|boolean} value - Attribute value.
  597. */
  598. function setAttribute(elm, name, value) {
  599. if (elm) {
  600. elm.setAttribute(name, value);
  601. }
  602. }
  603. /**
  604. * Get attribute from the given element.
  605. *
  606. * @param {Element} elm - An element where an attribute is assigned.
  607. * @param {string} name - Attribute name.
  608. *
  609. * @return {string} - The value of the given attribute if available. An empty string if not.
  610. */
  611. function getAttribute(elm, name) {
  612. return elm ? elm.getAttribute(name) : '';
  613. }
  614. /**
  615. * Remove attribute from the given element.
  616. *
  617. * @param {Element|Element[]} elms - An element where an attribute is removed.
  618. * @param {string|string[]} names - Attribute name.
  619. */
  620. function removeAttribute(elms, names) {
  621. toArray(names).forEach(function (name) {
  622. toArray(elms).forEach(function (elm) {
  623. return elm && elm.removeAttribute(name);
  624. });
  625. });
  626. }
  627. /**
  628. * Trigger the given callback after all images contained by the element are loaded.
  629. *
  630. * @param {Element} elm - Element that may contain images.
  631. * @param {Function} callback - Callback function fired right after all images are loaded.
  632. */
  633. function dom_loaded(elm, callback) {
  634. var images = elm.querySelectorAll('img');
  635. var length = images.length;
  636. if (length) {
  637. var count = 0;
  638. each(images, function (img) {
  639. img.onload = img.onerror = function () {
  640. if (++count === length) {
  641. callback();
  642. }
  643. };
  644. });
  645. } else {
  646. // Trigger the callback immediately if there is no image.
  647. callback();
  648. }
  649. }
  650. // CONCATENATED MODULE: ./src/js/constants/types.js
  651. /**
  652. * Export slider types.
  653. *
  654. * @author Naotoshi Fujita
  655. * @copyright Naotoshi Fujita. All rights reserved.
  656. */
  657. /**
  658. * Normal slider.
  659. *
  660. * @type {string}
  661. */
  662. var SLIDE = 'slide';
  663. /**
  664. * Loop after the last slide and before the first one.
  665. *
  666. * @type {string}
  667. */
  668. var LOOP = 'loop';
  669. /**
  670. * The track doesn't move.
  671. *
  672. * @type {string}
  673. */
  674. var FADE = 'fade';
  675. // CONCATENATED MODULE: ./src/js/transitions/slide/index.js
  676. /**
  677. * The component for general slide effect transition.
  678. *
  679. * @author Naotoshi Fujita
  680. * @copyright Naotoshi Fujita. All rights reserved.
  681. */
  682. /**
  683. * The component for general slide effect transition.
  684. *
  685. * @param {Splide} Splide - A Splide instance.
  686. * @param {Object} Components - An object containing components.
  687. *
  688. * @return {Object} - The component object.
  689. */
  690. /* harmony default export */ var transitions_slide = (function (Splide, Components) {
  691. /**
  692. * Hold the list element.
  693. *
  694. * @type {Element}
  695. */
  696. var list;
  697. /**
  698. * Hold the onEnd callback function.
  699. *
  700. * @type {function}
  701. */
  702. var endCallback;
  703. return {
  704. /**
  705. * Called when the component is mounted.
  706. */
  707. mount: function mount() {
  708. list = Components.Elements.list;
  709. Splide.on('transitionend', function (e) {
  710. if (e.target === list && endCallback) {
  711. endCallback();
  712. }
  713. }, list);
  714. },
  715. /**
  716. * Start transition.
  717. *
  718. * @param {number} destIndex - Destination slide index that might be clone's.
  719. * @param {number} newIndex - New index.
  720. * @param {number} prevIndex - Previous index.
  721. * @param {Object} coord - Destination coordinates.
  722. * @param {function} done - Callback function must be invoked when transition is completed.
  723. */
  724. start: function start(destIndex, newIndex, prevIndex, coord, done) {
  725. var options = Splide.options;
  726. var edgeIndex = Components.Controller.edgeIndex;
  727. var speed = options.speed;
  728. endCallback = done;
  729. if (Splide.is(SLIDE)) {
  730. if (prevIndex === 0 && newIndex >= edgeIndex || prevIndex >= edgeIndex && newIndex === 0) {
  731. speed = options.rewindSpeed || speed;
  732. }
  733. }
  734. applyStyle(list, {
  735. transition: "transform " + speed + "ms " + options.easing,
  736. transform: "translate(" + coord.x + "px," + coord.y + "px)"
  737. });
  738. }
  739. };
  740. });
  741. // CONCATENATED MODULE: ./src/js/transitions/fade/index.js
  742. /**
  743. * The component for fade transition.
  744. *
  745. * @author Naotoshi Fujita
  746. * @copyright Naotoshi Fujita. All rights reserved.
  747. */
  748. /**
  749. * The component for fade transition.
  750. *
  751. * @param {Splide} Splide - A Splide instance.
  752. * @param {Object} Components - An object containing components.
  753. *
  754. * @return {Object} - The component object.
  755. */
  756. /* harmony default export */ var fade = (function (Splide, Components) {
  757. if (Components.Drag) {
  758. Components.Drag.required = false;
  759. }
  760. var Fade = {
  761. /**
  762. * Called when the component is mounted.
  763. * Apply transition style to the first slide.
  764. */
  765. mount: function mount() {
  766. apply(Splide.index);
  767. },
  768. /**
  769. * Start transition.
  770. *
  771. * @param {number} destIndex - Destination slide index that might be clone's.
  772. * @param {number} newIndex - New index.
  773. * @param {number} prevIndex - Previous index.
  774. * @param {Object} coord - Destination coordinates.
  775. * @param {function} done - Callback function must be invoked when transition is completed.
  776. */
  777. start: function start(destIndex, newIndex, prevIndex, coord, done) {
  778. var track = Components.Elements.track;
  779. applyStyle(track, {
  780. height: unit(track.clientHeight)
  781. });
  782. apply(newIndex);
  783. done();
  784. applyStyle(track, {
  785. height: ''
  786. });
  787. }
  788. };
  789. /**
  790. * Apply transition style to the slide specified by the given index.
  791. *
  792. * @param {number} index - A slide index.
  793. */
  794. function apply(index) {
  795. var options = Splide.options;
  796. applyStyle(Components.Elements.slides[index], {
  797. transition: "opacity " + options.speed + "ms " + options.easing
  798. });
  799. }
  800. return Fade;
  801. });
  802. // CONCATENATED MODULE: ./src/js/transitions/index.js
  803. /**
  804. * Export transition components.
  805. *
  806. * @author Naotoshi Fujita
  807. * @copyright Naotoshi Fujita. All rights reserved.
  808. */
  809. // CONCATENATED MODULE: ./src/js/core/composer.js
  810. /**
  811. * Provide a function for composing components.
  812. *
  813. * @author Naotoshi Fujita
  814. * @copyright Naotoshi Fujita. All rights reserved.
  815. */
  816. /**
  817. * Compose components.
  818. *
  819. * @param {Splide} Splide - Splide instance.
  820. * @param {Object} Components - Additional components.
  821. * @param {function} Transition - Change component for transition.
  822. *
  823. * @return {Object} - An object containing all components.
  824. */
  825. function compose(Splide, Components, Transition) {
  826. var components = {};
  827. each(Components, function (Component, name) {
  828. components[name] = Component(Splide, components, name.toLowerCase());
  829. });
  830. if (!Transition) {
  831. Transition = Splide.is(FADE) ? fade : transitions_slide;
  832. }
  833. components.Transition = Transition(Splide, components);
  834. return components;
  835. }
  836. // CONCATENATED MODULE: ./src/js/utils/error.js
  837. /**
  838. * Utility functions for outputting logs.
  839. *
  840. * @author Naotoshi Fujita
  841. * @copyright Naotoshi Fujita. All rights reserved.
  842. */
  843. /**
  844. * Prefix of an error massage.
  845. *
  846. * @type {string}
  847. */
  848. var MESSAGE_PREFIX = '[SPLIDE]';
  849. /**
  850. * Display an error message on the browser console.
  851. *
  852. * @param {string} message - An error message.
  853. */
  854. function error_error(message) {
  855. console.error(MESSAGE_PREFIX + " " + message);
  856. }
  857. /**
  858. * Check existence of the given object and throw an error if it doesn't.
  859. *
  860. * @throws {Error}
  861. *
  862. * @param {*} subject - A subject to be confirmed.
  863. * @param {string} message - An error message.
  864. */
  865. function exist(subject, message) {
  866. if (!subject) {
  867. throw new Error(message);
  868. }
  869. }
  870. // CONCATENATED MODULE: ./src/js/constants/classes.js
  871. /**
  872. * Export class names.
  873. *
  874. * @author Naotoshi Fujita
  875. * @copyright Naotoshi Fujita. All rights reserved.
  876. */
  877. /**
  878. * A root class name.
  879. *
  880. * @type {string}
  881. */
  882. var ROOT = 'splide';
  883. /**
  884. * The definition table of all classes for elements.
  885. * They might be modified by options.
  886. *
  887. * @type {Object}
  888. */
  889. var ELEMENT_CLASSES = {
  890. root: ROOT,
  891. slider: ROOT + "__slider",
  892. track: ROOT + "__track",
  893. list: ROOT + "__list",
  894. slide: ROOT + "__slide",
  895. container: ROOT + "__slide__container",
  896. arrows: ROOT + "__arrows",
  897. arrow: ROOT + "__arrow",
  898. prev: ROOT + "__arrow--prev",
  899. next: ROOT + "__arrow--next",
  900. pagination: ROOT + "__pagination",
  901. page: ROOT + "__pagination__page",
  902. clone: ROOT + "__slide--clone",
  903. progress: ROOT + "__progress",
  904. bar: ROOT + "__progress__bar",
  905. autoplay: ROOT + "__autoplay",
  906. play: ROOT + "__play",
  907. pause: ROOT + "__pause",
  908. spinner: ROOT + "__spinner",
  909. sr: ROOT + "__sr"
  910. };
  911. /**
  912. * Definitions of status classes.
  913. *
  914. * @type {Object}
  915. */
  916. var STATUS_CLASSES = {
  917. active: 'is-active',
  918. visible: 'is-visible',
  919. loading: 'is-loading'
  920. };
  921. // CONCATENATED MODULE: ./src/js/constants/i18n.js
  922. /**
  923. * Export i18n texts as object.
  924. *
  925. * @author Naotoshi Fujita
  926. * @copyright Naotoshi Fujita. All rights reserved.
  927. */
  928. /**
  929. * Texts for i18n.
  930. *
  931. * @type {Object}
  932. */
  933. var I18N = {
  934. prev: 'Previous slide',
  935. next: 'Next slide',
  936. first: 'Go to first slide',
  937. last: 'Go to last slide',
  938. slideX: 'Go to slide %s',
  939. pageX: 'Go to page %s',
  940. play: 'Start autoplay',
  941. pause: 'Pause autoplay'
  942. };
  943. // CONCATENATED MODULE: ./src/js/constants/defaults.js
  944. /**
  945. * Export default options.
  946. *
  947. * @author Naotoshi Fujita
  948. * @copyright Naotoshi Fujita. All rights reserved.
  949. */
  950. var DEFAULTS = {
  951. /**
  952. * Determine a slider type.
  953. * - 'slide': Regular slider.
  954. * - 'loop' : Carousel slider.
  955. * - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
  956. *
  957. * @type {string}
  958. */
  959. type: 'slide',
  960. /**
  961. * Whether to rewind a slider before the first slide or after the last one.
  962. * In "loop" mode, this option is ignored.
  963. *
  964. * @type {boolean}
  965. */
  966. rewind: false,
  967. /**
  968. * Transition speed in milliseconds.
  969. *
  970. * @type {number}
  971. */
  972. speed: 400,
  973. /**
  974. * Transition speed on rewind in milliseconds.
  975. *
  976. * @type {number}
  977. */
  978. rewindSpeed: 0,
  979. /**
  980. * Define slider max width.
  981. *
  982. * @type {number}
  983. */
  984. width: 0,
  985. /**
  986. * Define slider height.
  987. *
  988. * @type {number}
  989. */
  990. height: 0,
  991. /**
  992. * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
  993. * perPage number will be ignored when this option is falsy.
  994. *
  995. * @type {number|string}
  996. */
  997. fixedWidth: 0,
  998. /**
  999. * Fix height of slides. CSS format is allowed such as 10em, 80vh but % unit is not accepted.
  1000. * heightRatio option will be ignored when this option is falsy.
  1001. *
  1002. * @type {number}
  1003. */
  1004. fixedHeight: 0,
  1005. /**
  1006. * Determine height of slides by ratio to a slider width.
  1007. * This will be ignored when the fixedHeight is provided.
  1008. *
  1009. * @type {number}
  1010. */
  1011. heightRatio: 0,
  1012. /**
  1013. * If true, slide width will be determined by the element width itself.
  1014. * - perPage/perMove should be 1.
  1015. * - lazyLoad should be false.
  1016. *
  1017. * @type {boolean}
  1018. */
  1019. autoWidth: false,
  1020. /**
  1021. * Determine how many slides should be displayed per page.
  1022. *
  1023. * @type {number}
  1024. */
  1025. perPage: 1,
  1026. /**
  1027. * Determine how many slides should be moved when a slider goes to next or perv.
  1028. *
  1029. * @type {number}
  1030. */
  1031. perMove: 0,
  1032. /**
  1033. * Start index.
  1034. *
  1035. * @type {number}
  1036. */
  1037. start: 0,
  1038. /**
  1039. * Determine which slide should be focused if there are multiple slides in a page.
  1040. * A string "center" is acceptable for centering slides.
  1041. *
  1042. * @type {boolean|number|string}
  1043. */
  1044. focus: false,
  1045. /**
  1046. * Gap between slides. CSS format is allowed such as 1em.
  1047. *
  1048. * @type {number|string}
  1049. */
  1050. gap: 0,
  1051. /**
  1052. * Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
  1053. * Give a single value to set a same size for both sides or
  1054. * do an object for different sizes.
  1055. * Also, CSS format is allowed such as 1em.
  1056. *
  1057. * @example
  1058. * - 10: Number
  1059. * - '1em': CSS format.
  1060. * - { left: 0, right: 20 }: Object for different sizes in horizontal mode.
  1061. * - { top: 0, bottom: 20 }: Object for different sizes in vertical mode.
  1062. *
  1063. * @type {number|string|Object}
  1064. */
  1065. padding: 0,
  1066. /**
  1067. * Whether to append arrows.
  1068. *
  1069. * @type {boolean}
  1070. */
  1071. arrows: true,
  1072. /**
  1073. * Change the arrow SVG path like 'm7.61 0.807-2.12...'.
  1074. *
  1075. * @type {string}
  1076. */
  1077. arrowPath: '',
  1078. /**
  1079. * Whether to append pagination(indicator dots) or not.
  1080. *
  1081. * @type {boolean}
  1082. */
  1083. pagination: true,
  1084. /**
  1085. * Activate autoplay.
  1086. *
  1087. * @type {boolean}
  1088. */
  1089. autoplay: false,
  1090. /**
  1091. * Autoplay interval in milliseconds.
  1092. *
  1093. * @type {number}
  1094. */
  1095. interval: 5000,
  1096. /**
  1097. * Whether to stop autoplay when a slider is hovered.
  1098. *
  1099. * @type {boolean}
  1100. */
  1101. pauseOnHover: true,
  1102. /**
  1103. * Whether to stop autoplay when a slider elements are focused.
  1104. * True is recommended for accessibility.
  1105. *
  1106. * @type {boolean}
  1107. */
  1108. pauseOnFocus: true,
  1109. /**
  1110. * Whether to reset progress of the autoplay timer when resumed.
  1111. *
  1112. * @type {boolean}
  1113. */
  1114. resetProgress: true,
  1115. /**
  1116. * Loading images lazily.
  1117. * Image src must be provided by a data-splide-lazy attribute.
  1118. *
  1119. * - false: Do nothing.
  1120. * - 'nearby': Only images around an active slide will be loaded.
  1121. * - 'sequential': All images will be sequentially loaded.
  1122. *
  1123. * @type {boolean|string}
  1124. */
  1125. lazyLoad: false,
  1126. /**
  1127. * This option works only when a lazyLoad option is "nearby".
  1128. * Determine how many pages(not slides) around an active slide should be loaded beforehand.
  1129. *
  1130. * @type {number}
  1131. */
  1132. preloadPages: 1,
  1133. /**
  1134. * Easing for CSS transition. For example, linear, ease or cubic-bezier().
  1135. *
  1136. * @type {string}
  1137. */
  1138. easing: 'cubic-bezier(.42,.65,.27,.99)',
  1139. /**
  1140. * Whether to control a slide via keyboard.
  1141. *
  1142. * @type {boolean}
  1143. */
  1144. keyboard: true,
  1145. /**
  1146. * Whether to allow mouse drag and touch swipe.
  1147. *
  1148. * @type {boolean}
  1149. */
  1150. drag: true,
  1151. /**
  1152. * The angle threshold for drag.
  1153. * The slider starts moving only when the drag angle is less than this threshold.
  1154. *
  1155. * @type {number}
  1156. */
  1157. dragAngleThreshold: 30,
  1158. /**
  1159. * Distance threshold for determining if the action is "flick" or "swipe".
  1160. * When a drag distance is over this value, the action will be treated as "swipe", not "flick".
  1161. *
  1162. * @type {number}
  1163. */
  1164. swipeDistanceThreshold: 150,
  1165. /**
  1166. * Velocity threshold for determining if the action is "flick" or "swipe".
  1167. * Around 0.5 is recommended.
  1168. *
  1169. * @type {number}
  1170. */
  1171. flickVelocityThreshold: .6,
  1172. /**
  1173. * Determine power of flick. The larger number this is, the farther a slider runs by flick.
  1174. * Around 500 is recommended.
  1175. *
  1176. * @type {number}
  1177. */
  1178. flickPower: 600,
  1179. /**
  1180. * Limit a number of pages to move by flick.
  1181. *
  1182. * @type {number}
  1183. */
  1184. flickMaxPages: 1,
  1185. /**
  1186. * Slider direction.
  1187. * - 'ltr': Left to right.
  1188. * - 'rtl': Right to left.
  1189. * - 'ttb': Top to bottom.
  1190. *
  1191. * @type {string}
  1192. */
  1193. direction: 'ltr',
  1194. /**
  1195. * Set img src to background-image of its parent element.
  1196. * Images with various sizes can be displayed as same dimension without cropping work.
  1197. * fixedHeight or heightRatio is required.
  1198. *
  1199. * @type {boolean}
  1200. */
  1201. cover: false,
  1202. /**
  1203. * Whether to enable accessibility(aria and screen reader texts) or not.
  1204. *
  1205. * @type {boolean}
  1206. */
  1207. accessibility: true,
  1208. /**
  1209. * Determine if a slider is navigation for another.
  1210. * Use "sync" API to synchronize two sliders.
  1211. *
  1212. * @type {boolean}
  1213. */
  1214. isNavigation: false,
  1215. /**
  1216. * Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
  1217. *
  1218. * @type {boolean}
  1219. */
  1220. trimSpace: true,
  1221. /**
  1222. * The "is-active" class is added after transition as default.
  1223. * If true, it will be added before move.
  1224. *
  1225. * @type {boolean}
  1226. */
  1227. updateOnMove: false,
  1228. /**
  1229. * Throttle duration in milliseconds for the resize event.
  1230. *
  1231. * @type {number}
  1232. */
  1233. throttle: 100,
  1234. /**
  1235. * Breakpoints definitions.
  1236. *
  1237. * @example
  1238. * {
  1239. * '1000': {
  1240. * perPage: 3,
  1241. * gap: 20
  1242. * },
  1243. * '600': {
  1244. * perPage: 1,
  1245. * gap: 5,
  1246. * }
  1247. * }
  1248. *
  1249. * @type {boolean|Object}
  1250. */
  1251. breakpoints: false,
  1252. /**
  1253. * Collection of class names.
  1254. *
  1255. * @see ./classes.js
  1256. *
  1257. * @type {Object}
  1258. */
  1259. classes: ELEMENT_CLASSES,
  1260. /**
  1261. * Collection of i18n texts.
  1262. *
  1263. * @see ./i18n.js
  1264. *
  1265. * @type {Object}
  1266. */
  1267. i18n: I18N
  1268. };
  1269. // CONCATENATED MODULE: ./src/js/constants/states.js
  1270. /**
  1271. * Export state constants.
  1272. *
  1273. * @author Naotoshi Fujita
  1274. * @copyright Naotoshi Fujita. All rights reserved.
  1275. */
  1276. /**
  1277. * Splide has been just created.
  1278. *
  1279. * @type {number}
  1280. */
  1281. var CREATED = 1;
  1282. /**
  1283. * All components have been mounted and initialized.
  1284. *
  1285. * @type {number}
  1286. */
  1287. var MOUNTED = 2;
  1288. /**
  1289. * Splide is ready for transition.
  1290. *
  1291. * @type {number}
  1292. */
  1293. var IDLE = 3;
  1294. /**
  1295. * Splide is moving.
  1296. *
  1297. * @type {number}
  1298. */
  1299. var MOVING = 4;
  1300. /**
  1301. * Splide is moving.
  1302. *
  1303. * @type {number}
  1304. */
  1305. var DESTROYED = 5;
  1306. // CONCATENATED MODULE: ./src/js/splide.js
  1307. function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
  1308. function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
  1309. /**
  1310. * The main class for applying Splide to an element.
  1311. *
  1312. * @author Naotoshi Fujita
  1313. * @copyright Naotoshi Fujita. All rights reserved.
  1314. */
  1315. /**
  1316. * The main class for applying Splide to an element,
  1317. * providing some APIs to control the behavior.
  1318. */
  1319. var splide_Splide = /*#__PURE__*/function () {
  1320. /**
  1321. * Splide constructor.
  1322. *
  1323. * @throws {Error} When the given root element or selector is invalid.
  1324. *
  1325. * @param {Element|string} root - A selector for a root element or an element itself.
  1326. * @param {Object} options - Optional. Options to change default behaviour.
  1327. * @param {Object} Components - Optional. Components.
  1328. */
  1329. function Splide(root, options, Components) {
  1330. if (options === void 0) {
  1331. options = {};
  1332. }
  1333. if (Components === void 0) {
  1334. Components = {};
  1335. }
  1336. this.root = root instanceof Element ? root : document.querySelector(root);
  1337. exist(this.root, 'An invalid element/selector was given.');
  1338. this.Components = null;
  1339. this.Event = core_event();
  1340. this.State = state(CREATED);
  1341. this.STATES = states_namespaceObject;
  1342. this._o = merge(DEFAULTS, options);
  1343. this._i = 0;
  1344. this._c = Components;
  1345. }
  1346. /**
  1347. * Compose and mount components.
  1348. *
  1349. * @param {Object} Extensions - Optional. Additional components.
  1350. * @param {function} Transition - Optional. Set a custom transition component.
  1351. *
  1352. * @return {Splide|null} - This instance or null if an exception occurred.
  1353. */
  1354. var _proto = Splide.prototype;
  1355. _proto.mount = function mount(Extensions, Transition) {
  1356. var _this = this;
  1357. if (Extensions === void 0) {
  1358. Extensions = {};
  1359. }
  1360. if (Transition === void 0) {
  1361. Transition = null;
  1362. }
  1363. this.Components = this.Components || compose(this, merge(this._c, Extensions), Transition);
  1364. try {
  1365. each(this.Components, function (component, key) {
  1366. var required = component.required;
  1367. if (required === undefined || required) {
  1368. component.mount && component.mount();
  1369. } else {
  1370. delete _this.Components[key];
  1371. }
  1372. });
  1373. } catch (e) {
  1374. error_error(e.message);
  1375. return null;
  1376. }
  1377. this.State.set(MOUNTED);
  1378. each(this.Components, function (component) {
  1379. component.mounted && component.mounted();
  1380. });
  1381. this.emit('mounted');
  1382. this.State.set(IDLE);
  1383. this.emit('ready');
  1384. applyStyle(this.root, {
  1385. visibility: 'visible'
  1386. });
  1387. this.on('move drag', function () {
  1388. return _this.State.set(MOVING);
  1389. }).on('moved dragged', function () {
  1390. return _this.State.set(IDLE);
  1391. });
  1392. return this;
  1393. }
  1394. /**
  1395. * Set sync target.
  1396. *
  1397. * @param {Splide} splide - A Splide instance.
  1398. *
  1399. * @return {Splide} - This instance.
  1400. */
  1401. ;
  1402. _proto.sync = function sync(splide) {
  1403. this.sibling = splide;
  1404. return this;
  1405. }
  1406. /**
  1407. * Register callback fired on the given event(s).
  1408. *
  1409. * @param {string} events - An event name. Use space to separate multiple events.
  1410. * Also, namespace is accepted by dot, such as 'resize.{namespace}'.
  1411. * @param {function} handler - A callback function.
  1412. * @param {Element} elm - Optional. Native event will be listened to when this arg is provided.
  1413. * @param {Object} options - Optional. Options for addEventListener.
  1414. *
  1415. * @return {Splide} - This instance.
  1416. */
  1417. ;
  1418. _proto.on = function on(events, handler, elm, options) {
  1419. if (elm === void 0) {
  1420. elm = null;
  1421. }
  1422. if (options === void 0) {
  1423. options = {};
  1424. }
  1425. this.Event.on(events, handler, elm, options);
  1426. return this;
  1427. }
  1428. /**
  1429. * Unsubscribe the given event.
  1430. *
  1431. * @param {string} events - A event name.
  1432. * @param {Element} elm - Optional. removeEventListener() will be called when this arg is provided.
  1433. *
  1434. * @return {Splide} - This instance.
  1435. */
  1436. ;
  1437. _proto.off = function off(events, elm) {
  1438. if (elm === void 0) {
  1439. elm = null;
  1440. }
  1441. this.Event.off(events, elm);
  1442. return this;
  1443. }
  1444. /**
  1445. * Emit an event.
  1446. *
  1447. * @param {string} event - An event name.
  1448. * @param {*} args - Any number of arguments passed to handlers.
  1449. */
  1450. ;
  1451. _proto.emit = function emit(event) {
  1452. var _this$Event;
  1453. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  1454. args[_key - 1] = arguments[_key];
  1455. }
  1456. (_this$Event = this.Event).emit.apply(_this$Event, [event].concat(args));
  1457. return this;
  1458. }
  1459. /**
  1460. * Go to the slide specified by the given control.
  1461. *
  1462. * @param {string|number} control - A control pattern.
  1463. * @param {boolean} wait - Optional. Whether to wait for transition.
  1464. */
  1465. ;
  1466. _proto.go = function go(control, wait) {
  1467. if (wait === void 0) {
  1468. wait = true;
  1469. }
  1470. if (this.State.is(IDLE) || this.State.is(MOVING) && !wait) {
  1471. this.Components.Controller.go(control, false);
  1472. }
  1473. return this;
  1474. }
  1475. /**
  1476. * Verify whether the slider type is the given one or not.
  1477. *
  1478. * @param {string} type - A slider type.
  1479. *
  1480. * @return {boolean} - True if the slider type is the provided type or false if not.
  1481. */
  1482. ;
  1483. _proto.is = function is(type) {
  1484. return type === this._o.type;
  1485. }
  1486. /**
  1487. * Insert a slide.
  1488. *
  1489. * @param {Element|string} slide - A slide element to be added.
  1490. * @param {number} index - A slide will be added at the position.
  1491. */
  1492. ;
  1493. _proto.add = function add(slide, index) {
  1494. if (index === void 0) {
  1495. index = -1;
  1496. }
  1497. this.Components.Elements.add(slide, index, this.refresh.bind(this));
  1498. return this;
  1499. }
  1500. /**
  1501. * Remove the slide designated by the index.
  1502. *
  1503. * @param {number} index - A slide index.
  1504. */
  1505. ;
  1506. _proto.remove = function remove(index) {
  1507. this.Components.Elements.remove(index);
  1508. this.refresh();
  1509. return this;
  1510. }
  1511. /**
  1512. * Destroy all Slide objects and clones and recreate them again.
  1513. */
  1514. ;
  1515. _proto.refresh = function refresh() {
  1516. this.emit('refresh').emit('resize');
  1517. return this;
  1518. }
  1519. /**
  1520. * Destroy the Splide.
  1521. * "Completely" boolean is mainly for breakpoints.
  1522. *
  1523. * @param {boolean} completely - Destroy completely.
  1524. */
  1525. ;
  1526. _proto.destroy = function destroy(completely) {
  1527. var _this2 = this;
  1528. if (completely === void 0) {
  1529. completely = true;
  1530. }
  1531. // Postpone destroy because it should be done after mount.
  1532. if (this.State.is(CREATED)) {
  1533. this.on('ready', function () {
  1534. return _this2.destroy(completely);
  1535. });
  1536. return;
  1537. }
  1538. values(this.Components).reverse().forEach(function (component) {
  1539. component.destroy && component.destroy(completely);
  1540. });
  1541. this.emit('destroy', completely); // Destroy all event handlers, including ones for native events.
  1542. this.Event.destroy();
  1543. this.State.set(DESTROYED);
  1544. return this;
  1545. }
  1546. /**
  1547. * Return the current slide index.
  1548. *
  1549. * @return {number} - The current slide index.
  1550. // */
  1551. ;
  1552. _createClass(Splide, [{
  1553. key: "index",
  1554. get: function get() {
  1555. return this._i;
  1556. }
  1557. /**
  1558. * Set the current slide index.
  1559. *
  1560. * @param {number|string} index - A new index.
  1561. */
  1562. ,
  1563. set: function set(index) {
  1564. this._i = parseInt(index);
  1565. }
  1566. /**
  1567. * Return length of slides.
  1568. * This is an alias of Elements.length.
  1569. *
  1570. * @return {number} - A number of slides.
  1571. */
  1572. }, {
  1573. key: "length",
  1574. get: function get() {
  1575. return this.Components.Elements.length;
  1576. }
  1577. /**
  1578. * Return options.
  1579. *
  1580. * @return {Object} - Options object.
  1581. */
  1582. }, {
  1583. key: "options",
  1584. get: function get() {
  1585. return this._o;
  1586. }
  1587. /**
  1588. * Set options with merging the given object to the current one.
  1589. *
  1590. * @param {Object} options - New options.
  1591. */
  1592. ,
  1593. set: function set(options) {
  1594. var created = this.State.is(CREATED);
  1595. if (!created) {
  1596. this.emit('update');
  1597. }
  1598. this._o = merge(this._o, options);
  1599. if (!created) {
  1600. this.emit('updated', this._o);
  1601. }
  1602. }
  1603. /**
  1604. * Return the class list.
  1605. * This is an alias of Splide.options.classList.
  1606. *
  1607. * @return {Object} - An object containing all class list.
  1608. */
  1609. }, {
  1610. key: "classes",
  1611. get: function get() {
  1612. return this._o.classes;
  1613. }
  1614. /**
  1615. * Return the i18n strings.
  1616. * This is an alias of Splide.options.i18n.
  1617. *
  1618. * @return {Object} - An object containing all i18n strings.
  1619. */
  1620. }, {
  1621. key: "i18n",
  1622. get: function get() {
  1623. return this._o.i18n;
  1624. }
  1625. }]);
  1626. return Splide;
  1627. }();
  1628. // CONCATENATED MODULE: ./src/js/components/options/index.js
  1629. /**
  1630. * The component for initializing options.
  1631. *
  1632. * @author Naotoshi Fujita
  1633. * @copyright Naotoshi Fujita. All rights reserved.
  1634. */
  1635. /**
  1636. * The component for initializing options.
  1637. *
  1638. * @param {Splide} Splide - A Splide instance.
  1639. *
  1640. * @return {Object} - The component object.
  1641. */
  1642. /* harmony default export */ var components_options = (function (Splide) {
  1643. /**
  1644. * Retrieve options from the data attribute.
  1645. * Note that IE10 doesn't support dataset property.
  1646. *
  1647. * @type {string}
  1648. */
  1649. var options = getAttribute(Splide.root, 'data-splide');
  1650. if (options) {
  1651. try {
  1652. Splide.options = JSON.parse(options);
  1653. } catch (e) {
  1654. error_error(e.message);
  1655. }
  1656. }
  1657. return {
  1658. /**
  1659. * Called when the component is mounted.
  1660. */
  1661. mount: function mount() {
  1662. if (Splide.State.is(CREATED)) {
  1663. Splide.index = Splide.options.start;
  1664. }
  1665. }
  1666. };
  1667. });
  1668. // CONCATENATED MODULE: ./src/js/constants/directions.js
  1669. /**
  1670. * Export layout modes.
  1671. *
  1672. * @author Naotoshi Fujita
  1673. * @copyright Naotoshi Fujita. All rights reserved.
  1674. */
  1675. /**
  1676. * Enumerate slides from left to right.
  1677. *
  1678. * @type {string}
  1679. */
  1680. var LTR = 'ltr';
  1681. /**
  1682. * Enumerate slides from right to left.
  1683. *
  1684. * @type {string}
  1685. */
  1686. var RTL = 'rtl';
  1687. /**
  1688. * Enumerate slides in a col.
  1689. *
  1690. * @type {string}
  1691. */
  1692. var TTB = 'ttb';
  1693. // CONCATENATED MODULE: ./src/js/components/elements/slide.js
  1694. /**
  1695. * The sub component for handling each slide.
  1696. *
  1697. * @author Naotoshi Fujita
  1698. * @copyright Naotoshi Fujita. All rights reserved.
  1699. */
  1700. /**
  1701. * Events for restoring original styles.
  1702. *
  1703. * @type {string}
  1704. */
  1705. var STYLE_RESTORE_EVENTS = 'update.slide';
  1706. /**
  1707. * The sub component for handling each slide.
  1708. *
  1709. * @param {Splide} Splide - A Splide instance.
  1710. * @param {number} index - An unique slide index.
  1711. * @param {number} realIndex - Clones should pass a real slide index.
  1712. * @param {Element} slide - A slide element.
  1713. *
  1714. * @return {Object} - The sub component object.
  1715. */
  1716. /* harmony default export */ var elements_slide = (function (Splide, index, realIndex, slide) {
  1717. /**
  1718. * Whether to update "is-active" class before or after transition.
  1719. *
  1720. * @type {boolean}
  1721. */
  1722. var updateOnMove = Splide.options.updateOnMove;
  1723. /**
  1724. * Events when the slide status is updated.
  1725. * Append a namespace to remove listeners later.
  1726. *
  1727. * @type {string}
  1728. */
  1729. var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resize.slide moved.slide' + (updateOnMove ? ' move.slide' : '');
  1730. /**
  1731. * Slide sub component object.
  1732. *
  1733. * @type {Object}
  1734. */
  1735. var Slide = {
  1736. /**
  1737. * Slide element.
  1738. *
  1739. * @type {Element}
  1740. */
  1741. slide: slide,
  1742. /**
  1743. * Slide index.
  1744. *
  1745. * @type {number}
  1746. */
  1747. index: index,
  1748. /**
  1749. * Real index for clones.
  1750. *
  1751. * @type {number}
  1752. */
  1753. realIndex: realIndex,
  1754. /**
  1755. * Container element if available.
  1756. *
  1757. * @type {Element|null}
  1758. */
  1759. container: find(slide, "." + Splide.classes.container),
  1760. /**
  1761. * Whether this is a cloned slide or not.
  1762. *
  1763. * @type {boolean}
  1764. */
  1765. isClone: realIndex > -1,
  1766. /**
  1767. * Called when the component is mounted.
  1768. */
  1769. mount: function mount() {
  1770. var _this = this;
  1771. if (!this.isClone) {
  1772. slide.id = Splide.root.id + "-slide" + pad(index + 1);
  1773. }
  1774. Splide.on(STATUS_UPDATE_EVENTS, function () {
  1775. return _this.update();
  1776. }).on(STYLE_RESTORE_EVENTS, restoreStyles);
  1777. /*
  1778. * Add "is-active" class to a clone element temporarily
  1779. * and it will be removed on "moved" event.
  1780. */
  1781. if (updateOnMove) {
  1782. Splide.on('move.slide', function () {
  1783. if (Splide.index === realIndex) {
  1784. _update(true, false);
  1785. }
  1786. });
  1787. } // Make sure the slide is shown.
  1788. applyStyle(slide, {
  1789. display: ''
  1790. }); // Hold the original styles.
  1791. this.styles = getAttribute(slide, 'style') || '';
  1792. },
  1793. /**
  1794. * Destroy.
  1795. */
  1796. destroy: function destroy() {
  1797. Splide.off(STATUS_UPDATE_EVENTS).off(STYLE_RESTORE_EVENTS);
  1798. removeClass(slide, values(STATUS_CLASSES));
  1799. restoreStyles();
  1800. },
  1801. /**
  1802. * Update active and visible status.
  1803. */
  1804. update: function update() {
  1805. _update(this.isActive(), false);
  1806. _update(this.isVisible(), true);
  1807. },
  1808. /**
  1809. * Check whether this slide is active or not.
  1810. *
  1811. * @return {boolean} - True if the slide is active or false if not.
  1812. */
  1813. isActive: function isActive() {
  1814. return Splide.index === index;
  1815. },
  1816. /**
  1817. * Check whether this slide is visible in the viewport or not.
  1818. *
  1819. * @return {boolean} - True if the slide is visible or false if not.
  1820. */
  1821. isVisible: function isVisible() {
  1822. var active = this.isActive();
  1823. if (Splide.is(FADE) || active) {
  1824. return active;
  1825. }
  1826. var floor = Math.floor;
  1827. var Components = Splide.Components;
  1828. var Track = Components.Track;
  1829. var Layout = Components.Layout;
  1830. var isVertical = Splide.options.direction === TTB;
  1831. var position = floor((Track.toPosition(index) + Track.offset(index) - Track.position) * Track.sign);
  1832. var edge = floor(position + Layout[isVertical ? 'slideHeight' : 'slideWidth'](index));
  1833. var size = Layout[isVertical ? 'height' : 'width'];
  1834. return 0 <= position && position <= size && 0 <= edge && edge <= size;
  1835. },
  1836. /**
  1837. * Calculate how far this slide is from another slide and
  1838. * return true if the distance is within the given number.
  1839. *
  1840. * @param {number} from - Index of a target slide.
  1841. * @param {number} within - True if the slide is within this number.
  1842. *
  1843. * @return {boolean} - True if the slide is within the number or false otherwise.
  1844. */
  1845. isWithin: function isWithin(from, within) {
  1846. var diff = Math.abs(from - index);
  1847. if (!Splide.is(SLIDE) && !this.isClone) {
  1848. diff = Math.min(diff, Splide.length - diff);
  1849. }
  1850. return diff < within;
  1851. }
  1852. };
  1853. /**
  1854. * Update classes for activity or visibility.
  1855. *
  1856. * @param {boolean} active - Is active/visible or not.
  1857. * @param {boolean} forVisibility - Toggle classes for activity or visibility.
  1858. */
  1859. function _update(active, forVisibility) {
  1860. var type = forVisibility ? 'visible' : 'active';
  1861. var className = STATUS_CLASSES[type];
  1862. if (active) {
  1863. addClass(slide, className);
  1864. Splide.emit("" + type, Slide);
  1865. } else {
  1866. if (hasClass(slide, className)) {
  1867. removeClass(slide, className);
  1868. Splide.emit("" + (forVisibility ? 'hidden' : 'inactive'), Slide);
  1869. }
  1870. }
  1871. }
  1872. /**
  1873. * Restore the original styles.
  1874. */
  1875. function restoreStyles() {
  1876. setAttribute(slide, 'style', Slide.styles);
  1877. }
  1878. return Slide;
  1879. });
  1880. // CONCATENATED MODULE: ./src/js/components/elements/index.js
  1881. /**
  1882. * The component for main elements.
  1883. *
  1884. * @author Naotoshi Fujita
  1885. * @copyright Naotoshi Fujita. All rights reserved.
  1886. */
  1887. /**
  1888. * The property name for UID stored in a window object.
  1889. *
  1890. * @type {string}
  1891. */
  1892. var UID_NAME = 'uid';
  1893. /**
  1894. * The component for main elements.
  1895. *
  1896. * @param {Splide} Splide - A Splide instance.
  1897. * @param {Object} Components - An object containing components.
  1898. *
  1899. * @return {Object} - The component object.
  1900. */
  1901. /* harmony default export */ var components_elements = (function (Splide, Components) {
  1902. /**
  1903. * Hold the root element.
  1904. *
  1905. * @type {Element}
  1906. */
  1907. var root = Splide.root;
  1908. /**
  1909. * Hold the class list.
  1910. *
  1911. * @type {Object}
  1912. */
  1913. var classes = Splide.classes;
  1914. /**
  1915. * Store Slide objects.
  1916. *
  1917. * @type {Array}
  1918. */
  1919. var Slides = [];
  1920. /*
  1921. * Assign unique ID to the root element if it doesn't have the one.
  1922. * Note that IE doesn't support padStart() to fill the uid by 0.
  1923. */
  1924. if (!root.id) {
  1925. window.splide = window.splide || {};
  1926. var uid = window.splide[UID_NAME] || 0;
  1927. window.splide[UID_NAME] = ++uid;
  1928. root.id = "splide" + pad(uid);
  1929. }
  1930. /**
  1931. * Elements component object.
  1932. *
  1933. * @type {Object}
  1934. */
  1935. var Elements = {
  1936. /**
  1937. * Called when the component is mounted.
  1938. * Collect main elements and store them as member properties.
  1939. */
  1940. mount: function mount() {
  1941. var _this = this;
  1942. collect();
  1943. this.init();
  1944. Splide.on('refresh', function () {
  1945. _this.destroy();
  1946. _this.init();
  1947. });
  1948. Splide.on('updated', function () {
  1949. removeClass(root, getClasses());
  1950. addClass(root, getClasses());
  1951. });
  1952. },
  1953. /**
  1954. * Destroy.
  1955. */
  1956. destroy: function destroy() {
  1957. Slides.forEach(function (Slide) {
  1958. Slide.destroy();
  1959. });
  1960. Slides = [];
  1961. removeClass(root, getClasses());
  1962. },
  1963. /**
  1964. * Initialization.
  1965. */
  1966. init: function init() {
  1967. addClass(root, getClasses());
  1968. Elements.slides.forEach(function (slide, index) {
  1969. Elements.register(slide, index, -1);
  1970. });
  1971. },
  1972. /**
  1973. * Register a slide to create a Slide object and handle its behavior.
  1974. *
  1975. * @param {Element} slide - A slide element.
  1976. * @param {number} index - A unique index. This can be negative.
  1977. * @param {number} realIndex - A real index for clones. Set -1 for real slides.
  1978. */
  1979. register: function register(slide, index, realIndex) {
  1980. var SlideObject = elements_slide(Splide, index, realIndex, slide);
  1981. SlideObject.mount();
  1982. Slides.push(SlideObject);
  1983. },
  1984. /**
  1985. * Return the Slide object designated by the index.
  1986. * Note that "find" is not supported by IE.
  1987. *
  1988. * @return {Object|undefined} - A Slide object if available. Undefined if not.
  1989. */
  1990. getSlide: function getSlide(index) {
  1991. return Slides.filter(function (Slide) {
  1992. return Slide.index === index;
  1993. })[0];
  1994. },
  1995. /**
  1996. * Return all Slide objects.
  1997. *
  1998. * @param {boolean} includeClones - Whether to include cloned slides or not.
  1999. *
  2000. * @return {Object[]} - Slide objects.
  2001. */
  2002. getSlides: function getSlides(includeClones) {
  2003. return includeClones ? Slides : Slides.filter(function (Slide) {
  2004. return !Slide.isClone;
  2005. });
  2006. },
  2007. /**
  2008. * Return Slide objects belonging to the given page.
  2009. *
  2010. * @param {number} page - A page number.
  2011. *
  2012. * @return {Object[]} - An array containing Slide objects.
  2013. */
  2014. getSlidesByPage: function getSlidesByPage(page) {
  2015. var idx = Components.Controller.toIndex(page);
  2016. var options = Splide.options;
  2017. var max = options.focus !== false ? 1 : options.perPage;
  2018. return Slides.filter(function (_ref) {
  2019. var index = _ref.index;
  2020. return idx <= index && index < idx + max;
  2021. });
  2022. },
  2023. /**
  2024. * Insert a slide to a slider.
  2025. * Need to refresh Splide after adding a slide.
  2026. *
  2027. * @param {Node|string} slide - A slide element to be added.
  2028. * @param {number} index - A slide will be added at the position.
  2029. * @param {Function} callback - Called right after the slide is added to the DOM tree.
  2030. */
  2031. add: function add(slide, index, callback) {
  2032. if (typeof slide === 'string') {
  2033. slide = domify(slide);
  2034. }
  2035. if (slide instanceof Element) {
  2036. var ref = this.slides[index]; // This will be removed in mount() of Slide component.
  2037. applyStyle(slide, {
  2038. display: 'none'
  2039. });
  2040. if (ref) {
  2041. before(slide, ref);
  2042. this.slides.splice(index, 0, slide);
  2043. } else {
  2044. append(this.list, slide);
  2045. this.slides.push(slide);
  2046. }
  2047. dom_loaded(slide, function () {
  2048. callback && callback(slide);
  2049. });
  2050. }
  2051. },
  2052. /**
  2053. * Remove a slide from a slider.
  2054. * Need to refresh Splide after removing a slide.
  2055. *
  2056. * @param index - Slide index.
  2057. */
  2058. remove: function remove(index) {
  2059. dom_remove(this.slides.splice(index, 1)[0]);
  2060. },
  2061. /**
  2062. * Trigger the provided callback for each Slide object.
  2063. *
  2064. * @param {Function} callback - A callback function. The first argument will be the Slide object.
  2065. */
  2066. each: function each(callback) {
  2067. Slides.forEach(callback);
  2068. },
  2069. /**
  2070. * Return slides length without clones.
  2071. *
  2072. * @return {number} - Slide length.
  2073. */
  2074. get length() {
  2075. return this.slides.length;
  2076. },
  2077. /**
  2078. * Return "SlideObjects" length including clones.
  2079. *
  2080. * @return {number} - Slide length including clones.
  2081. */
  2082. get total() {
  2083. return Slides.length;
  2084. }
  2085. };
  2086. /**
  2087. * Collect elements.
  2088. */
  2089. function collect() {
  2090. Elements.slider = child(root, classes.slider);
  2091. Elements.track = find(root, "." + classes.track);
  2092. Elements.list = child(Elements.track, classes.list);
  2093. exist(Elements.track && Elements.list, 'Track or list was not found.');
  2094. Elements.slides = values(Elements.list.children);
  2095. var arrows = findParts(classes.arrows);
  2096. Elements.arrows = {
  2097. prev: find(arrows, "." + classes.prev),
  2098. next: find(arrows, "." + classes.next)
  2099. };
  2100. var autoplay = findParts(classes.autoplay);
  2101. Elements.bar = find(findParts(classes.progress), "." + classes.bar);
  2102. Elements.play = find(autoplay, "." + classes.play);
  2103. Elements.pause = find(autoplay, "." + classes.pause);
  2104. Elements.track.id = Elements.track.id || root.id + "-track";
  2105. Elements.list.id = Elements.list.id || root.id + "-list";
  2106. }
  2107. /**
  2108. * Return class names for the root element.
  2109. */
  2110. function getClasses() {
  2111. var rootClass = classes.root;
  2112. var options = Splide.options;
  2113. return [rootClass + "--" + options.type, rootClass + "--" + options.direction, options.drag ? rootClass + "--draggable" : '', options.isNavigation ? rootClass + "--nav" : ''];
  2114. }
  2115. /**
  2116. * Find parts only from children of the root or track.
  2117. *
  2118. * @return {Element|null} - A found element or null.
  2119. */
  2120. function findParts(className) {
  2121. return child(root, className) || child(Elements.slider, className);
  2122. }
  2123. return Elements;
  2124. });
  2125. // CONCATENATED MODULE: ./src/js/components/controller/index.js
  2126. /**
  2127. * The component for controlling the track.
  2128. *
  2129. * @author Naotoshi Fujita
  2130. * @copyright Naotoshi Fujita. All rights reserved.
  2131. */
  2132. var controller_floor = Math.floor;
  2133. /**
  2134. * The component for controlling the track.
  2135. *
  2136. * @param {Splide} Splide - A Splide instance.
  2137. * @param {Object} Components - An object containing components.
  2138. *
  2139. * @return {Object} - The component object.
  2140. */
  2141. /* harmony default export */ var controller = (function (Splide, Components) {
  2142. /**
  2143. * Store current options.
  2144. *
  2145. * @type {Object}
  2146. */
  2147. var options;
  2148. /**
  2149. * True if the slide is LOOP mode.
  2150. *
  2151. * @type {boolean}
  2152. */
  2153. var isLoop;
  2154. /**
  2155. * Controller component object.
  2156. *
  2157. * @type {Object}
  2158. */
  2159. var Controller = {
  2160. /**
  2161. * Called when the component is mounted.
  2162. */
  2163. mount: function mount() {
  2164. options = Splide.options;
  2165. isLoop = Splide.is(LOOP);
  2166. bind();
  2167. },
  2168. /**
  2169. * Make track run by the given control.
  2170. * - "+{i}" : Increment the slide index by i.
  2171. * - "-{i}" : Decrement the slide index by i.
  2172. * - "{i}" : Go to the slide whose index is i.
  2173. * - ">" : Go to next page.
  2174. * - "<" : Go to prev page.
  2175. * - ">{i}" : Go to page i.
  2176. *
  2177. * @param {string|number} control - A control pattern.
  2178. * @param {boolean} silently - Go to the destination without event emission.
  2179. */
  2180. go: function go(control, silently) {
  2181. var destIndex = this.trim(this.parse(control));
  2182. Components.Track.go(destIndex, this.rewind(destIndex), silently);
  2183. },
  2184. /**
  2185. * Parse the given control and return the destination index for the track.
  2186. *
  2187. * @param {string} control - A control target pattern.
  2188. *
  2189. * @return {string|number} - A parsed target.
  2190. */
  2191. parse: function parse(control) {
  2192. var index = Splide.index;
  2193. var matches = String(control).match(/([+\-<>]+)(\d+)?/);
  2194. var indicator = matches ? matches[1] : '';
  2195. var number = matches ? parseInt(matches[2]) : 0;
  2196. switch (indicator) {
  2197. case '+':
  2198. index += number || 1;
  2199. break;
  2200. case '-':
  2201. index -= number || 1;
  2202. break;
  2203. case '>':
  2204. case '<':
  2205. index = parsePage(number, index, indicator === '<');
  2206. break;
  2207. default:
  2208. index = parseInt(control);
  2209. }
  2210. return index;
  2211. },
  2212. /**
  2213. * Compute index from the given page number.
  2214. *
  2215. * @param {number} page - Page number.
  2216. *
  2217. * @return {number} - A computed page number.
  2218. */
  2219. toIndex: function toIndex(page) {
  2220. if (hasFocus()) {
  2221. return page;
  2222. }
  2223. var length = Splide.length;
  2224. var perPage = options.perPage;
  2225. var index = page * perPage;
  2226. index = index - (this.pageLength * perPage - length) * controller_floor(index / length); // Adjustment for the last page.
  2227. if (length - perPage <= index && index < length) {
  2228. index = length - perPage;
  2229. }
  2230. return index;
  2231. },
  2232. /**
  2233. * Compute page number from the given slide index.
  2234. *
  2235. * @param index - Slide index.
  2236. *
  2237. * @return {number} - A computed page number.
  2238. */
  2239. toPage: function toPage(index) {
  2240. if (hasFocus()) {
  2241. return index;
  2242. }
  2243. var length = Splide.length;
  2244. var perPage = options.perPage; // Make the last "perPage" number of slides belong to the last page.
  2245. if (length - perPage <= index && index < length) {
  2246. return controller_floor((length - 1) / perPage);
  2247. }
  2248. return controller_floor(index / perPage);
  2249. },
  2250. /**
  2251. * Trim the given index according to the current mode.
  2252. * Index being returned could be less than 0 or greater than the length in Loop mode.
  2253. *
  2254. * @param {number} index - An index being trimmed.
  2255. *
  2256. * @return {number} - A trimmed index.
  2257. */
  2258. trim: function trim(index) {
  2259. if (!isLoop) {
  2260. index = options.rewind ? this.rewind(index) : between(index, 0, this.edgeIndex);
  2261. }
  2262. return index;
  2263. },
  2264. /**
  2265. * Rewind the given index if it's out of range.
  2266. *
  2267. * @param {number} index - An index.
  2268. *
  2269. * @return {number} - A rewound index.
  2270. */
  2271. rewind: function rewind(index) {
  2272. var edge = this.edgeIndex;
  2273. if (isLoop) {
  2274. while (index > edge) {
  2275. index -= edge + 1;
  2276. }
  2277. while (index < 0) {
  2278. index += edge + 1;
  2279. }
  2280. } else {
  2281. if (index > edge) {
  2282. index = 0;
  2283. } else if (index < 0) {
  2284. index = edge;
  2285. }
  2286. }
  2287. return index;
  2288. },
  2289. /**
  2290. * Check if the direction is "rtl" or not.
  2291. *
  2292. * @return {boolean} - True if "rtl" or false if not.
  2293. */
  2294. isRtl: function isRtl() {
  2295. return options.direction === RTL;
  2296. },
  2297. /**
  2298. * Return the page length.
  2299. *
  2300. * @return {number} - Max page number.
  2301. */
  2302. get pageLength() {
  2303. var length = Splide.length;
  2304. return hasFocus() ? length : Math.ceil(length / options.perPage);
  2305. },
  2306. /**
  2307. * Return the edge index.
  2308. *
  2309. * @return {number} - Edge index.
  2310. */
  2311. get edgeIndex() {
  2312. var length = Splide.length;
  2313. if (!length) {
  2314. return 0;
  2315. }
  2316. if (hasFocus() || options.isNavigation || isLoop) {
  2317. return length - 1;
  2318. }
  2319. return length - options.perPage;
  2320. },
  2321. /**
  2322. * Return the index of the previous slide.
  2323. *
  2324. * @return {number} - The index of the previous slide if available. -1 otherwise.
  2325. */
  2326. get prevIndex() {
  2327. var prev = Splide.index - 1;
  2328. if (isLoop || options.rewind) {
  2329. prev = this.rewind(prev);
  2330. }
  2331. return prev > -1 ? prev : -1;
  2332. },
  2333. /**
  2334. * Return the index of the next slide.
  2335. *
  2336. * @return {number} - The index of the next slide if available. -1 otherwise.
  2337. */
  2338. get nextIndex() {
  2339. var next = Splide.index + 1;
  2340. if (isLoop || options.rewind) {
  2341. next = this.rewind(next);
  2342. }
  2343. return Splide.index < next && next <= this.edgeIndex || next === 0 ? next : -1;
  2344. }
  2345. };
  2346. /**
  2347. * Listen to some events.
  2348. */
  2349. function bind() {
  2350. Splide.on('move', function (newIndex) {
  2351. Splide.index = newIndex;
  2352. }).on('updated refresh', function (newOptions) {
  2353. options = newOptions || options;
  2354. Splide.index = between(Splide.index, 0, Controller.edgeIndex);
  2355. });
  2356. }
  2357. /**
  2358. * Verify if the focus option is available or not.
  2359. *
  2360. * @return {boolean} - True if a slider has the focus option.
  2361. */
  2362. function hasFocus() {
  2363. return options.focus !== false;
  2364. }
  2365. /**
  2366. * Return the next or previous page index computed by the page number and current index.
  2367. *
  2368. * @param {number} number - Specify the page number.
  2369. * @param {number} index - Current index.
  2370. * @param {boolean} prev - Prev or next.
  2371. *
  2372. * @return {number} - Slide index.
  2373. */
  2374. function parsePage(number, index, prev) {
  2375. if (number > -1) {
  2376. return Controller.toIndex(number);
  2377. }
  2378. var perMove = options.perMove;
  2379. var sign = prev ? -1 : 1;
  2380. if (perMove) {
  2381. return index + perMove * sign;
  2382. }
  2383. return Controller.toIndex(Controller.toPage(index) + sign);
  2384. }
  2385. return Controller;
  2386. });
  2387. // CONCATENATED MODULE: ./src/js/components/track/directions/vertical.js
  2388. /**
  2389. * The resolver component for vertical move.
  2390. *
  2391. * @author Naotoshi Fujita
  2392. * @copyright Naotoshi Fujita. All rights reserved.
  2393. */
  2394. /**
  2395. * The resolver component for vertical move.
  2396. *
  2397. * @param {Splide} Splide - A Splide instance.
  2398. * @param {Object} Components - An object containing components.
  2399. *
  2400. * @return {Object} - The resolver object.
  2401. */
  2402. /* harmony default export */ var vertical = (function (Splide, Components) {
  2403. /**
  2404. * Hold the Layout object.
  2405. *
  2406. * @type {Object}
  2407. */
  2408. var Layout;
  2409. return {
  2410. /**
  2411. * Axis of translate.
  2412. *
  2413. * @type {string}
  2414. */
  2415. axis: 'Y',
  2416. /**
  2417. * Sign for the direction.
  2418. *
  2419. * @return {number}
  2420. */
  2421. sign: -1,
  2422. /**
  2423. * Initialization.
  2424. */
  2425. init: function init() {
  2426. Layout = Components.Layout;
  2427. },
  2428. /**
  2429. * Calculate position by index.
  2430. *
  2431. * @param {number} index - Slide index.
  2432. *
  2433. * @return {Object} - Calculated position.
  2434. */
  2435. toPosition: function toPosition(index) {
  2436. return -((index + Components.Clones.length / 2) * (Layout.slideHeight() + Layout.gap) + this.offset());
  2437. },
  2438. /**
  2439. * Calculate the closest slide index from the given position.
  2440. *
  2441. * @return {number} - The closest slide index.
  2442. */
  2443. toIndex: function toIndex(position) {
  2444. var slideHeight = Layout.slideHeight();
  2445. var cloneOffset = (slideHeight + Layout.gap) * Components.Clones.length / 2;
  2446. return Math.round(-(position + cloneOffset + this.offset()) / (slideHeight + Layout.gap));
  2447. },
  2448. /**
  2449. * Trim redundant spaces on the left or right edge if necessary.
  2450. *
  2451. * @param {number} position - Position value to be trimmed.
  2452. *
  2453. * @return {number} - Trimmed position.
  2454. */
  2455. trim: function trim(position) {
  2456. var edge = -(Layout.listHeight - (Layout.height + Layout.gap));
  2457. return between(position, edge, 0);
  2458. },
  2459. /**
  2460. * Return current offset value, considering direction.
  2461. *
  2462. * @return {number} - Offset amount.
  2463. */
  2464. offset: function offset() {
  2465. var focus = Splide.options.focus;
  2466. var slideHeight = Layout.slideHeight();
  2467. if (focus === 'center') {
  2468. return -(Layout.height - slideHeight) / 2;
  2469. }
  2470. return -(parseInt(focus) || 0) * (slideHeight + Layout.gap);
  2471. }
  2472. };
  2473. });
  2474. // CONCATENATED MODULE: ./src/js/components/track/directions/horizontal.js
  2475. /**
  2476. * The resolver component for horizontal move.
  2477. *
  2478. * @author Naotoshi Fujita
  2479. * @copyright Naotoshi Fujita. All rights reserved.
  2480. */
  2481. /**
  2482. * The resolver component for horizontal move.
  2483. *
  2484. * @param {Splide} Splide - A Splide instance.
  2485. * @param {Object} Components - An object containing components.
  2486. *
  2487. * @return {Object} - The resolver object.
  2488. */
  2489. /* harmony default export */ var horizontal = (function (Splide, Components) {
  2490. /**
  2491. * Hold the Layout component.
  2492. *
  2493. * @type {Object}
  2494. */
  2495. var Layout;
  2496. /**
  2497. * Hold the Elements component.
  2498. *
  2499. * @type {Object}
  2500. */
  2501. var Elements;
  2502. return {
  2503. /**
  2504. * Axis of translate.
  2505. *
  2506. * @type {string}
  2507. */
  2508. axis: 'X',
  2509. /**
  2510. * Sign for the direction.
  2511. *
  2512. * @type {number}
  2513. */
  2514. sign: Splide.options.direction === RTL ? 1 : -1,
  2515. /**
  2516. * Initialization.
  2517. */
  2518. init: function init() {
  2519. Layout = Components.Layout;
  2520. Elements = Components.Elements;
  2521. },
  2522. /**
  2523. * Calculate position by index.
  2524. *
  2525. * @param {number} index - Slide index.
  2526. *
  2527. * @return {Object} - Calculated position.
  2528. */
  2529. toPosition: function toPosition(index) {
  2530. return this.sign * (Layout.totalWidth(index - 1) + this.offset(index));
  2531. },
  2532. /**
  2533. * Calculate the closest slide index from the given position.
  2534. *
  2535. * @return {number} - The closest slide position.
  2536. */
  2537. toIndex: function toIndex(position) {
  2538. position *= this.sign;
  2539. if (Splide.is(SLIDE)) {
  2540. position = between(position, Layout.totalWidth(Elements.total), 0);
  2541. }
  2542. var Slides = Elements.getSlides(true);
  2543. for (var i in Slides) {
  2544. var Slide = Slides[i];
  2545. var slideIndex = Slide.index;
  2546. var slidePosition = this.sign * this.toPosition(slideIndex);
  2547. if (slidePosition < position && position <= slidePosition + Layout.slideWidth(slideIndex) + Layout.gap) {
  2548. return slideIndex;
  2549. }
  2550. }
  2551. return 0;
  2552. },
  2553. /**
  2554. * Trim redundant spaces on the left or right edge if necessary.
  2555. *
  2556. * @param {number} position - Position value to be trimmed.
  2557. *
  2558. * @return {number} - Trimmed position.
  2559. */
  2560. trim: function trim(position) {
  2561. var edge = this.sign * (Layout.totalWidth(Elements.total) - (Layout.width + Layout.gap));
  2562. return between(position, edge, 0);
  2563. },
  2564. /**
  2565. * Return current offset value, considering direction.
  2566. *
  2567. * @return {number} - Offset amount.
  2568. */
  2569. offset: function offset(index) {
  2570. var focus = Splide.options.focus;
  2571. var slideWidth = Layout.slideWidth(index);
  2572. if (focus === 'center') {
  2573. return -(Layout.width - slideWidth) / 2;
  2574. }
  2575. return -(parseInt(focus) || 0) * (slideWidth + Layout.gap);
  2576. }
  2577. };
  2578. });
  2579. // CONCATENATED MODULE: ./src/js/components/track/index.js
  2580. /**
  2581. * The component for moving list in the track.
  2582. *
  2583. * @author Naotoshi Fujita
  2584. * @copyright Naotoshi Fujita. All rights reserved.
  2585. */
  2586. /**
  2587. * The component for moving list in the track.
  2588. *
  2589. * @param {Splide} Splide - A Splide instance.
  2590. * @param {Object} Components - An object containing components.
  2591. *
  2592. * @return {Object} - The component object.
  2593. */
  2594. /* harmony default export */ var components_track = (function (Splide, Components) {
  2595. /**
  2596. * Store the list element.
  2597. *
  2598. * @type {Element}
  2599. */
  2600. var list;
  2601. /**
  2602. * Store the current position.
  2603. *
  2604. * @type {number}
  2605. */
  2606. var currPosition = 0;
  2607. /**
  2608. * Whether the current direction is vertical or not.
  2609. *
  2610. * @type {boolean}
  2611. */
  2612. var isVertical = Splide.options.direction === TTB;
  2613. /**
  2614. * Whether the slider type is FADE or not.
  2615. *
  2616. * @type {boolean}
  2617. */
  2618. var isFade = Splide.is(FADE);
  2619. /**
  2620. * Track component object.
  2621. *
  2622. * @type {Object}
  2623. */
  2624. var Track = object_assign({
  2625. /**
  2626. * Called when the component is mounted.
  2627. */
  2628. mount: function mount() {
  2629. list = Components.Elements.list;
  2630. this.init();
  2631. },
  2632. /**
  2633. * Called after the component is mounted.
  2634. * The resize event must be registered after the Layout's one is done.
  2635. */
  2636. mounted: function mounted() {
  2637. var _this = this;
  2638. if (!isFade) {
  2639. Splide.on('mounted resize updated', function () {
  2640. _this.jump(Splide.index);
  2641. });
  2642. }
  2643. },
  2644. /**
  2645. * Go to the given destination index.
  2646. * After arriving there, the track is jump to the new index without animation, mainly for loop mode.
  2647. *
  2648. * @param {number} destIndex - A destination index.
  2649. * This can be negative or greater than slides length for reaching clones.
  2650. * @param {number} newIndex - An actual new index. They are always same in Slide and Rewind mode.
  2651. * @param {boolean} silently - If true, suppress emitting events.
  2652. */
  2653. go: function go(destIndex, newIndex, silently) {
  2654. var _this2 = this;
  2655. var newPosition = getTrimmedPosition(destIndex);
  2656. var prevIndex = Splide.index;
  2657. if (!silently) {
  2658. Splide.emit('move', newIndex, prevIndex, destIndex);
  2659. }
  2660. if (Math.abs(newPosition - currPosition) >= 1 || isFade) {
  2661. Components.Transition.start(destIndex, newIndex, prevIndex, this.toCoord(newPosition), function () {
  2662. _this2.end(destIndex, newIndex, prevIndex, silently);
  2663. });
  2664. } else {
  2665. if (destIndex !== prevIndex && Splide.options.trimSpace === 'move') {
  2666. Components.Controller.go(destIndex + destIndex - prevIndex, silently);
  2667. } else {
  2668. this.end(destIndex, newIndex, prevIndex, silently);
  2669. }
  2670. }
  2671. },
  2672. /**
  2673. * Called whenever slides arrive at a destination.
  2674. *
  2675. * @param {number} destIndex - A destination index.
  2676. * @param {number} newIndex - A new index.
  2677. * @param {number} prevIndex - A previous index.
  2678. * @param {boolean} silently - If true, suppress emitting events.
  2679. */
  2680. end: function end(destIndex, newIndex, prevIndex, silently) {
  2681. applyStyle(list, {
  2682. transition: ''
  2683. });
  2684. if (!isFade) {
  2685. this.jump(newIndex);
  2686. }
  2687. if (!silently) {
  2688. Splide.emit('moved', newIndex, prevIndex, destIndex);
  2689. }
  2690. },
  2691. /**
  2692. * Move the track to the specified index.
  2693. *
  2694. * @param {number} index - A destination index where the track jumps.
  2695. */
  2696. jump: function jump(index) {
  2697. this.translate(getTrimmedPosition(index));
  2698. },
  2699. /**
  2700. * Set position.
  2701. *
  2702. * @param {number} position - A new position value.
  2703. */
  2704. translate: function translate(position) {
  2705. currPosition = position;
  2706. applyStyle(list, {
  2707. transform: "translate" + this.axis + "(" + position + "px)"
  2708. });
  2709. },
  2710. /**
  2711. * Trim redundant spaces on the left or right edge if necessary.
  2712. *
  2713. * @param {number} position - Position value to be trimmed.
  2714. *
  2715. * @return {number} - Trimmed position.
  2716. */
  2717. trim: function trim(position) {
  2718. if (!Splide.options.trimSpace || Splide.is(LOOP)) {
  2719. return position;
  2720. }
  2721. return this._s.trim(position);
  2722. },
  2723. /**
  2724. * Return coordinates object by the given position.
  2725. *
  2726. * @param {number} position - A position value.
  2727. *
  2728. * @return {Object} - A coordinates object.
  2729. */
  2730. toCoord: function toCoord(position) {
  2731. return {
  2732. x: isVertical ? 0 : position,
  2733. y: isVertical ? position : 0
  2734. };
  2735. },
  2736. /**
  2737. * Return current position.
  2738. *
  2739. * @return {number} - Current position.
  2740. */
  2741. get position() {
  2742. return currPosition;
  2743. }
  2744. }, isVertical ? vertical(Splide, Components) : horizontal(Splide, Components));
  2745. /**
  2746. * Convert index to the trimmed position.
  2747. *
  2748. * @return {number} - Trimmed position.
  2749. */
  2750. function getTrimmedPosition(index) {
  2751. return Track.trim(Track.toPosition(index));
  2752. }
  2753. return Track;
  2754. });
  2755. // CONCATENATED MODULE: ./src/js/components/clones/index.js
  2756. /**
  2757. * The component for cloning some slides for "loop" mode of the track.
  2758. *
  2759. * @author Naotoshi Fujita
  2760. * @copyright Naotoshi Fujita. All rights reserved.
  2761. */
  2762. /**
  2763. * The component for cloning some slides for "loop" mode of the track.
  2764. *
  2765. * @param {Splide} Splide - A Splide instance.
  2766. * @param {Object} Components - An object containing components.
  2767. *
  2768. * @return {Object} - The component object.
  2769. */
  2770. /* harmony default export */ var components_clones = (function (Splide, Components) {
  2771. /**
  2772. * Store information of all clones.
  2773. *
  2774. * @type {Array}
  2775. */
  2776. var clones = [];
  2777. /**
  2778. * Keep Elements component.
  2779. *
  2780. * @type {Object}
  2781. */
  2782. var Elements = Components.Elements;
  2783. /**
  2784. * Clones component object.
  2785. *
  2786. * @type {Object}
  2787. */
  2788. var Clones = {
  2789. /**
  2790. * Called when the component is mounted.
  2791. */
  2792. mount: function mount() {
  2793. var _this = this;
  2794. if (Splide.is(LOOP)) {
  2795. generateClones();
  2796. Splide.on('refresh', function () {
  2797. _this.destroy();
  2798. generateClones();
  2799. });
  2800. }
  2801. },
  2802. /**
  2803. * Destroy.
  2804. */
  2805. destroy: function destroy() {
  2806. dom_remove(clones);
  2807. clones = [];
  2808. },
  2809. /**
  2810. * Return all clones.
  2811. *
  2812. * @return {Element[]} - Cloned elements.
  2813. */
  2814. get clones() {
  2815. return clones;
  2816. },
  2817. /**
  2818. * Return clone length.
  2819. *
  2820. * @return {number} - A length of clones.
  2821. */
  2822. get length() {
  2823. return clones.length;
  2824. }
  2825. };
  2826. /**
  2827. * Generate and append clones.
  2828. */
  2829. function generateClones() {
  2830. var length = Elements.length;
  2831. if (!length) {
  2832. return;
  2833. }
  2834. var count = getCloneCount();
  2835. var slides = Elements.slides;
  2836. while (slides.length < count) {
  2837. slides = slides.concat(slides);
  2838. }
  2839. slides.slice(0, count).forEach(function (elm, index) {
  2840. var clone = cloneDeeply(elm);
  2841. append(Elements.list, clone);
  2842. clones.push(clone);
  2843. Elements.register(clone, index + length, index);
  2844. });
  2845. slides.slice(-count).forEach(function (elm, index) {
  2846. var clone = cloneDeeply(elm);
  2847. before(clone, slides[0]);
  2848. clones.push(clone);
  2849. Elements.register(clone, index - count, length + index - count);
  2850. });
  2851. }
  2852. /**
  2853. * Return half count of clones to be generated.
  2854. * Clone count is determined by:
  2855. * - Max pages a flick action can move.
  2856. * - Whether the slide length is enough for perPage.
  2857. *
  2858. * @return {number} - Count for clones.
  2859. */
  2860. function getCloneCount() {
  2861. var options = Splide.options;
  2862. if (options.autoWidth) {
  2863. return Elements.length;
  2864. }
  2865. return options.perPage * (options.drag ? options.flickMaxPages + 1 : 1);
  2866. }
  2867. /**
  2868. * Clone deeply the given element.
  2869. *
  2870. * @param {Element} elm - An element being duplicated.
  2871. *
  2872. * @return {Node} - A cloned node(element).
  2873. */
  2874. function cloneDeeply(elm) {
  2875. var clone = elm.cloneNode(true);
  2876. addClass(clone, Splide.classes.clone); // ID should not be duplicated.
  2877. removeAttribute(clone, 'id');
  2878. return clone;
  2879. }
  2880. return Clones;
  2881. });
  2882. // CONCATENATED MODULE: ./src/js/components/layout/directions/horizontal.js
  2883. /**
  2884. * The resolver component for horizontal layout.
  2885. *
  2886. * @author Naotoshi Fujita
  2887. * @copyright Naotoshi Fujita. All rights reserved.
  2888. */
  2889. /**
  2890. * Max width of a slide.
  2891. *
  2892. * @type {number}
  2893. */
  2894. var SLIDE_MAX_WIDTH = 5000;
  2895. /**
  2896. * The resolver component for horizontal layout.
  2897. *
  2898. * @param {Splide} Splide - A Splide instance.
  2899. * @param {Object} Components - An object containing components.
  2900. *
  2901. * @return {Object} - The resolver object.
  2902. */
  2903. /* harmony default export */ var directions_horizontal = (function (Splide, Components) {
  2904. /**
  2905. * Keep the Elements component.
  2906. *
  2907. * @type {string}
  2908. */
  2909. var Elements = Components.Elements;
  2910. /**
  2911. * Keep the root element.
  2912. *
  2913. * @type {Element}
  2914. */
  2915. var root = Splide.root;
  2916. /**
  2917. * Keep the track element.
  2918. *
  2919. * @type {Element}
  2920. */
  2921. var track;
  2922. /**
  2923. * Keep the latest options.
  2924. *
  2925. * @type {Element}
  2926. */
  2927. var options = Splide.options;
  2928. return {
  2929. /**
  2930. * Margin property name.
  2931. *
  2932. * @type {string}
  2933. */
  2934. margin: 'margin' + (options.direction === RTL ? 'Left' : 'Right'),
  2935. /**
  2936. * Always 0 because the height will be determined by inner contents.
  2937. *
  2938. * @type {number}
  2939. */
  2940. height: 0,
  2941. /**
  2942. * Always 0 because the height will be determined by inner contents.
  2943. *
  2944. * @type {number}
  2945. */
  2946. listHeight: 0,
  2947. /**
  2948. * Initialization.
  2949. */
  2950. init: function init() {
  2951. options = Splide.options;
  2952. track = Elements.track;
  2953. this.gap = toPixel(root, options.gap);
  2954. var padding = options.padding;
  2955. var _padding$left = padding.left,
  2956. left = _padding$left === void 0 ? padding : _padding$left,
  2957. _padding$right = padding.right,
  2958. right = _padding$right === void 0 ? padding : _padding$right;
  2959. this.padding = {
  2960. left: toPixel(root, left),
  2961. right: toPixel(root, right)
  2962. };
  2963. applyStyle(track, {
  2964. paddingLeft: unit(left),
  2965. paddingRight: unit(right)
  2966. });
  2967. },
  2968. /**
  2969. * Accumulate slide width including the gap to the designated index.
  2970. *
  2971. * @param {number|undefined} index - If undefined, width of all slides will be accumulated.
  2972. *
  2973. * @return {number} - Accumulated width.
  2974. */
  2975. totalWidth: function totalWidth(index) {
  2976. var _this = this;
  2977. return Elements.getSlides(true).filter(function (Slide) {
  2978. return Slide.index <= index;
  2979. }).reduce(function (accumulator, Slide) {
  2980. return accumulator + _this.slideWidth(Slide.index) + _this.gap;
  2981. }, 0);
  2982. },
  2983. /**
  2984. * Return the slide width in px.
  2985. *
  2986. * @param {number} index - Slide index.
  2987. *
  2988. * @return {number} - The slide width.
  2989. */
  2990. slideWidth: function slideWidth(index) {
  2991. if (options.autoWidth) {
  2992. var Slide = Elements.getSlide(index);
  2993. return Slide ? Slide.slide.offsetWidth : 0;
  2994. }
  2995. var width = options.fixedWidth || (this.width + this.gap) / options.perPage - this.gap;
  2996. return toPixel(root, width);
  2997. },
  2998. /**
  2999. * Return the slide height in px.
  3000. *
  3001. * @return {number} - The slide height.
  3002. */
  3003. slideHeight: function slideHeight() {
  3004. var height = options.height || options.fixedHeight || this.width * options.heightRatio;
  3005. return toPixel(root, height);
  3006. },
  3007. /**
  3008. * Return slider width without padding.
  3009. *
  3010. * @return {number} - Current slider width.
  3011. */
  3012. get width() {
  3013. return track.clientWidth - this.padding.left - this.padding.right;
  3014. },
  3015. /**
  3016. * Return list width.
  3017. *
  3018. * @return {number} - Current list width.
  3019. */
  3020. get listWidth() {
  3021. var total = Elements.total;
  3022. return options.autoWidth ? total * SLIDE_MAX_WIDTH : this.totalWidth(total);
  3023. }
  3024. };
  3025. });
  3026. // CONCATENATED MODULE: ./src/js/components/layout/directions/vertical.js
  3027. /**
  3028. * The resolver component for vertical layout.
  3029. *
  3030. * @author Naotoshi Fujita
  3031. * @copyright Naotoshi Fujita. All rights reserved.
  3032. */
  3033. /**
  3034. * The resolver component for vertical layout.
  3035. *
  3036. * @param {Splide} Splide - A Splide instance.
  3037. * @param {Object} Components - An object containing components.
  3038. *
  3039. * @return {Object} - The resolver object.
  3040. */
  3041. /* harmony default export */ var directions_vertical = (function (Splide, Components) {
  3042. /**
  3043. * Keep the Elements component.
  3044. *
  3045. * @type {string}
  3046. */
  3047. var Elements = Components.Elements;
  3048. /**
  3049. * Keep the root element.
  3050. *
  3051. * @type {Element}
  3052. */
  3053. var root = Splide.root;
  3054. /**
  3055. * Keep the track element.
  3056. *
  3057. * @type {Element}
  3058. */
  3059. var track;
  3060. /**
  3061. * Keep the latest options.
  3062. *
  3063. * @type {Element}
  3064. */
  3065. var options;
  3066. return {
  3067. /**
  3068. * Margin property name.
  3069. *
  3070. * @type {string}
  3071. */
  3072. margin: 'marginBottom',
  3073. /**
  3074. * Init slider styles according to options.
  3075. */
  3076. init: function init() {
  3077. options = Splide.options;
  3078. track = Elements.track;
  3079. this.gap = toPixel(root, options.gap);
  3080. var padding = options.padding;
  3081. var _padding$top = padding.top,
  3082. top = _padding$top === void 0 ? padding : _padding$top,
  3083. _padding$bottom = padding.bottom,
  3084. bottom = _padding$bottom === void 0 ? padding : _padding$bottom;
  3085. this.padding = {
  3086. top: toPixel(root, top),
  3087. bottom: toPixel(root, bottom)
  3088. };
  3089. applyStyle(track, {
  3090. paddingTop: unit(top),
  3091. paddingBottom: unit(bottom)
  3092. });
  3093. },
  3094. /**
  3095. * Return the slide width in px.
  3096. *
  3097. * @return {number} - The slide width.
  3098. */
  3099. slideWidth: function slideWidth() {
  3100. return toPixel(root, options.fixedWidth || this.width);
  3101. },
  3102. /**
  3103. * Return the slide height in px.
  3104. *
  3105. * @return {number} - The slide height.
  3106. */
  3107. slideHeight: function slideHeight() {
  3108. var height = options.fixedHeight || (this.height + this.gap) / options.perPage - this.gap;
  3109. return toPixel(root, height);
  3110. },
  3111. /**
  3112. * Return slider width without padding.
  3113. *
  3114. * @return {number} - Current slider width.
  3115. */
  3116. get width() {
  3117. return track.clientWidth;
  3118. },
  3119. /**
  3120. * Return slide height without padding.
  3121. *
  3122. * @return {number} - Slider height.
  3123. */
  3124. get height() {
  3125. var height = options.height || this.width * options.heightRatio;
  3126. exist(height, '"height" or "heightRatio" is missing.');
  3127. return toPixel(root, height) - this.padding.top - this.padding.bottom;
  3128. },
  3129. /**
  3130. * Return list width.
  3131. *
  3132. * @return {number} - Current list width.
  3133. */
  3134. get listWidth() {
  3135. return this.width;
  3136. },
  3137. /**
  3138. * Return list height.
  3139. *
  3140. * @return {number} - Current list height.
  3141. */
  3142. get listHeight() {
  3143. return (this.slideHeight() + this.gap) * Elements.total;
  3144. }
  3145. };
  3146. });
  3147. // CONCATENATED MODULE: ./src/js/utils/time.js
  3148. /**
  3149. * A package of utility functions related with time.
  3150. *
  3151. * @author Naotoshi Fujita
  3152. * @copyright Naotoshi Fujita. All rights reserved.
  3153. */
  3154. /**
  3155. * Simple throttle function that controls how often the given function is executed.
  3156. *
  3157. * @param {function} func - A function to be throttled.
  3158. * @param {number} wait - Time in millisecond for interval of execution.
  3159. *
  3160. * @return {Function} - A debounced function.
  3161. */
  3162. function throttle(func, wait) {
  3163. var timeout; // Declare function by the "function" keyword to prevent "this" from being inherited.
  3164. return function () {
  3165. if (!timeout) {
  3166. timeout = setTimeout(function () {
  3167. func();
  3168. timeout = null;
  3169. }, wait);
  3170. }
  3171. };
  3172. }
  3173. /**
  3174. * Custom setInterval function that provides progress rate as callback.
  3175. *
  3176. * @param {function} callback - A callback function fired every time the interval time passes.
  3177. * @param {number} interval - Interval duration in milliseconds.
  3178. * @param {function} progress - A callback function fired whenever the progress goes.
  3179. *
  3180. * @return {Object} - An object containing play() and pause() functions.
  3181. */
  3182. function createInterval(callback, interval, progress) {
  3183. var _window = window,
  3184. requestAnimationFrame = _window.requestAnimationFrame;
  3185. var start,
  3186. elapse,
  3187. rate,
  3188. _pause = true;
  3189. var step = function step(timestamp) {
  3190. if (!_pause) {
  3191. if (!start) {
  3192. start = timestamp;
  3193. if (rate && rate < 1) {
  3194. start -= rate * interval;
  3195. }
  3196. }
  3197. elapse = timestamp - start;
  3198. rate = elapse / interval;
  3199. if (elapse >= interval) {
  3200. start = 0;
  3201. rate = 1;
  3202. callback();
  3203. }
  3204. if (progress) {
  3205. progress(rate);
  3206. }
  3207. requestAnimationFrame(step);
  3208. }
  3209. };
  3210. return {
  3211. pause: function pause() {
  3212. _pause = true;
  3213. start = 0;
  3214. },
  3215. play: function play(reset) {
  3216. start = 0;
  3217. if (_pause) {
  3218. _pause = false;
  3219. if (reset) {
  3220. rate = 0;
  3221. }
  3222. requestAnimationFrame(step);
  3223. }
  3224. }
  3225. };
  3226. }
  3227. // CONCATENATED MODULE: ./src/js/components/layout/index.js
  3228. /**
  3229. * The component for handing slide layouts and their sizes.
  3230. *
  3231. * @author Naotoshi Fujita
  3232. * @copyright Naotoshi Fujita. All rights reserved.
  3233. */
  3234. /**
  3235. * The component for handing slide layouts and their sizes.
  3236. *
  3237. * @param {Splide} Splide - A Splide instance.
  3238. * @param {Object} Components - An object containing components.
  3239. *
  3240. * @return {Object} - The component object.
  3241. */
  3242. /* harmony default export */ var layout = (function (Splide, Components) {
  3243. /**
  3244. * Keep the Elements component.
  3245. *
  3246. * @type {string}
  3247. */
  3248. var Elements = Components.Elements;
  3249. /**
  3250. * Layout component object.
  3251. *
  3252. * @type {Object}
  3253. */
  3254. var Layout = object_assign({
  3255. /**
  3256. * Called when the component is mounted.
  3257. */
  3258. mount: function mount() {
  3259. bind();
  3260. init();
  3261. },
  3262. /**
  3263. * Destroy.
  3264. */
  3265. destroy: function destroy() {
  3266. removeAttribute([Elements.list, Elements.track], 'style');
  3267. }
  3268. }, Splide.options.direction === TTB ? directions_vertical(Splide, Components) : directions_horizontal(Splide, Components));
  3269. /**
  3270. * Init slider styles according to options.
  3271. */
  3272. function init() {
  3273. Layout.init();
  3274. applyStyle(Splide.root, {
  3275. maxWidth: unit(Splide.options.width)
  3276. });
  3277. Elements.each(function (Slide) {
  3278. Slide.slide.style[Layout.margin] = unit(Layout.gap);
  3279. });
  3280. resize();
  3281. }
  3282. /**
  3283. * Listen the resize native event with throttle.
  3284. * Initialize when the component is mounted or options are updated.
  3285. */
  3286. function bind() {
  3287. Splide.on('resize load', throttle(function () {
  3288. Splide.emit('resize');
  3289. }, Splide.options.throttle), window).on('resize', resize).on('updated refresh', init);
  3290. }
  3291. /**
  3292. * Resize the list and slides including clones.
  3293. */
  3294. function resize() {
  3295. applyStyle(Elements.list, {
  3296. width: unit(Layout.listWidth),
  3297. height: unit(Layout.listHeight)
  3298. });
  3299. applyStyle(Elements.track, {
  3300. height: unit(Layout.height)
  3301. });
  3302. var slideHeight = unit(Layout.slideHeight());
  3303. var width = Layout.width;
  3304. Elements.each(function (Slide) {
  3305. applyStyle(Slide.container, {
  3306. height: slideHeight
  3307. });
  3308. applyStyle(Slide.slide, {
  3309. width: Splide.options.autoWidth ? null : unit(Layout.slideWidth(Slide.index)),
  3310. height: Slide.container ? null : slideHeight
  3311. });
  3312. }); // When the scrollbar is made hidden, the track width is changed but the resize event is not fired.
  3313. if (width !== Layout.width) {
  3314. resize();
  3315. }
  3316. }
  3317. return Layout;
  3318. });
  3319. // CONCATENATED MODULE: ./src/js/components/drag/index.js
  3320. /**
  3321. * The component for supporting mouse drag and swipe.
  3322. *
  3323. * @author Naotoshi Fujita
  3324. * @copyright Naotoshi Fujita. All rights reserved.
  3325. */
  3326. var abs = Math.abs;
  3327. /**
  3328. * Adjust how much the track can be pulled on the first or last page.
  3329. * The larger number this is, the farther the track moves.
  3330. * This should be around 5 - 9.
  3331. *
  3332. * @type {number}
  3333. */
  3334. var FRICTION_REDUCER = 7;
  3335. /**
  3336. * The component supporting mouse drag and swipe.
  3337. *
  3338. * @param {Splide} Splide - A Splide instance.
  3339. * @param {Object} Components - An object containing components.
  3340. *
  3341. * @return {Object} - The component object.
  3342. */
  3343. /* harmony default export */ var drag = (function (Splide, Components) {
  3344. /**
  3345. * Store the Move component.
  3346. *
  3347. * @type {Object}
  3348. */
  3349. var Track = Components.Track;
  3350. /**
  3351. * Store the Controller component.
  3352. *
  3353. * @type {Object}
  3354. */
  3355. var Controller = Components.Controller;
  3356. /**
  3357. * Coordinate of the track on starting drag.
  3358. *
  3359. * @type {Object}
  3360. */
  3361. var startCoord;
  3362. /**
  3363. * Analyzed info on starting drag.
  3364. *
  3365. * @type {Object|null}
  3366. */
  3367. var startInfo;
  3368. /**
  3369. * Analyzed info being updated while dragging/swiping.
  3370. *
  3371. * @type {Object}
  3372. */
  3373. var currentInfo;
  3374. /**
  3375. * Determine whether slides are being dragged or not.
  3376. *
  3377. * @type {boolean}
  3378. */
  3379. var isDragging;
  3380. /**
  3381. * Whether the slider direction is vertical or not.
  3382. *
  3383. * @type {boolean}
  3384. */
  3385. var isVertical = Splide.options.direction === TTB;
  3386. /**
  3387. * Axis for the direction.
  3388. *
  3389. * @type {string}
  3390. */
  3391. var axis = isVertical ? 'y' : 'x';
  3392. /**
  3393. * Drag component object.
  3394. *
  3395. * @type {Object}
  3396. */
  3397. var Drag = {
  3398. /**
  3399. * Whether dragging is disabled or not.
  3400. *
  3401. * @type {boolean}
  3402. */
  3403. disabled: !Splide.options.drag,
  3404. /**
  3405. * Called when the component is mounted.
  3406. */
  3407. mount: function mount() {
  3408. var _this = this;
  3409. var list = Components.Elements.list;
  3410. Splide.on('touchstart mousedown', start, list).on('touchmove mousemove', move, list, {
  3411. passive: false
  3412. }).on('touchend touchcancel mouseleave mouseup dragend', end, list).on('mounted refresh', function () {
  3413. // Prevent dragging an image or anchor itself.
  3414. each(list.querySelectorAll('img, a'), function (elm) {
  3415. Splide.off('dragstart', elm).on('dragstart', function (e) {
  3416. e.preventDefault();
  3417. }, elm, {
  3418. passive: false
  3419. });
  3420. });
  3421. }).on('mounted updated', function () {
  3422. _this.disabled = !Splide.options.drag;
  3423. });
  3424. }
  3425. };
  3426. /**
  3427. * Called when the track starts to be dragged.
  3428. *
  3429. * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
  3430. */
  3431. function start(e) {
  3432. if (!Drag.disabled && !isDragging && Splide.State.is(IDLE)) {
  3433. startCoord = Track.toCoord(Track.position);
  3434. startInfo = analyze(e, {});
  3435. currentInfo = startInfo;
  3436. }
  3437. }
  3438. /**
  3439. * Called while the track being dragged.
  3440. *
  3441. * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
  3442. */
  3443. function move(e) {
  3444. if (startInfo) {
  3445. currentInfo = analyze(e, startInfo);
  3446. if (isDragging) {
  3447. if (e.cancelable) {
  3448. e.preventDefault();
  3449. }
  3450. var position = startCoord[axis] + currentInfo.offset[axis];
  3451. Track.translate(resist(position));
  3452. } else {
  3453. if (shouldMove(currentInfo)) {
  3454. Splide.emit('drag', startInfo);
  3455. isDragging = true;
  3456. }
  3457. }
  3458. }
  3459. }
  3460. /**
  3461. * Determine whether to start moving the track or not by drag angle.
  3462. *
  3463. * @param {Object} info - An information object.
  3464. *
  3465. * @return {boolean} - True if the track should be moved or false if not.
  3466. */
  3467. function shouldMove(_ref) {
  3468. var offset = _ref.offset;
  3469. if (Splide.State.is(IDLE)) {
  3470. var angle = Math.atan(abs(offset.y) / abs(offset.x)) * 180 / Math.PI;
  3471. if (isVertical) {
  3472. angle = 90 - angle;
  3473. }
  3474. return angle < Splide.options.dragAngleThreshold;
  3475. }
  3476. return false;
  3477. }
  3478. /**
  3479. * Resist dragging the track on the first/last page because there is no more.
  3480. *
  3481. * @param {number} position - A position being applied to the track.
  3482. *
  3483. * @return {Object} - Adjusted position.
  3484. */
  3485. function resist(position) {
  3486. if (!Splide.is(LOOP)) {
  3487. var sign = Track.sign;
  3488. var _start = sign * Track.trim(Track.toPosition(0));
  3489. var _end = sign * Track.trim(Track.toPosition(Controller.edgeIndex));
  3490. position *= sign;
  3491. if (position < _start) {
  3492. position = _start - FRICTION_REDUCER * Math.log(_start - position);
  3493. } else if (position > _end) {
  3494. position = _end + FRICTION_REDUCER * Math.log(position - _end);
  3495. }
  3496. position *= sign;
  3497. }
  3498. return position;
  3499. }
  3500. /**
  3501. * Called when dragging ends.
  3502. */
  3503. function end() {
  3504. startInfo = null;
  3505. if (isDragging) {
  3506. Splide.emit('dragged', currentInfo);
  3507. go(currentInfo);
  3508. isDragging = false;
  3509. }
  3510. }
  3511. /**
  3512. * Go to the slide determined by the analyzed data.
  3513. *
  3514. * @param {Object} info - An info object.
  3515. */
  3516. function go(info) {
  3517. var velocity = info.velocity[axis];
  3518. var absV = abs(velocity);
  3519. if (absV > 0) {
  3520. var Layout = Components.Layout;
  3521. var options = Splide.options;
  3522. var sign = velocity < 0 ? -1 : 1;
  3523. var destination = Track.position;
  3524. if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
  3525. destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
  3526. }
  3527. var index = Track.toIndex(destination); // Do not allow the track to go to a previous position.
  3528. if (index === Splide.index) {
  3529. index += sign * Track.sign;
  3530. }
  3531. if (!Splide.is(LOOP)) {
  3532. index = between(index, 0, Controller.edgeIndex);
  3533. }
  3534. Controller.go(index, options.isNavigation);
  3535. }
  3536. }
  3537. /**
  3538. * Analyze the given event object and return important information for handling swipe behavior.
  3539. *
  3540. * @param {Event} e - Touch or Mouse event object.
  3541. * @param {Object} startInfo - Information analyzed on start for calculating difference from the current one.
  3542. *
  3543. * @return {Object} - An object containing analyzed information, such as offset, velocity, etc.
  3544. */
  3545. function analyze(e, startInfo) {
  3546. var timeStamp = e.timeStamp,
  3547. touches = e.touches;
  3548. var _ref2 = touches ? touches[0] : e,
  3549. clientX = _ref2.clientX,
  3550. clientY = _ref2.clientY;
  3551. var _ref3 = startInfo.to || {},
  3552. _ref3$x = _ref3.x,
  3553. fromX = _ref3$x === void 0 ? clientX : _ref3$x,
  3554. _ref3$y = _ref3.y,
  3555. fromY = _ref3$y === void 0 ? clientY : _ref3$y;
  3556. var startTime = startInfo.time || 0;
  3557. var offset = {
  3558. x: clientX - fromX,
  3559. y: clientY - fromY
  3560. };
  3561. var duration = timeStamp - startTime;
  3562. var velocity = {
  3563. x: offset.x / duration,
  3564. y: offset.y / duration
  3565. };
  3566. return {
  3567. to: {
  3568. x: clientX,
  3569. y: clientY
  3570. },
  3571. offset: offset,
  3572. time: timeStamp,
  3573. velocity: velocity
  3574. };
  3575. }
  3576. return Drag;
  3577. });
  3578. // CONCATENATED MODULE: ./src/js/components/click/index.js
  3579. /**
  3580. * The component for handling a click event.
  3581. *
  3582. * @author Naotoshi Fujita
  3583. * @copyright Naotoshi Fujita. All rights reserved.
  3584. */
  3585. /**
  3586. * The component for handling a click event.
  3587. * Click should be disabled during drag/swipe.
  3588. *
  3589. * @param {Splide} Splide - A Splide instance.
  3590. * @param {Object} Components - An object containing components.
  3591. *
  3592. * @return {Object} - The component object.
  3593. */
  3594. /* harmony default export */ var click = (function (Splide, Components) {
  3595. /**
  3596. * Whether click is disabled or not.
  3597. *
  3598. * @type {boolean}
  3599. */
  3600. var disabled = false;
  3601. /**
  3602. * Click component object.
  3603. *
  3604. * @type {Object}
  3605. */
  3606. var Click = {
  3607. /**
  3608. * Mount only when the drag is activated and the slide type is not "fade".
  3609. *
  3610. * @type {boolean}
  3611. */
  3612. required: Splide.options.drag && !Splide.is(FADE),
  3613. /**
  3614. * Called when the component is mounted.
  3615. */
  3616. mount: function mount() {
  3617. Splide.on('click', onClick, Components.Elements.track, {
  3618. capture: true
  3619. }).on('drag', function () {
  3620. disabled = true;
  3621. }).on('moved', function () {
  3622. disabled = false;
  3623. });
  3624. }
  3625. };
  3626. /**
  3627. * Called when a track element is clicked.
  3628. *
  3629. * @param {Event} e - A click event.
  3630. */
  3631. function onClick(e) {
  3632. if (disabled) {
  3633. e.preventDefault();
  3634. e.stopPropagation();
  3635. e.stopImmediatePropagation();
  3636. }
  3637. }
  3638. return Click;
  3639. });
  3640. // CONCATENATED MODULE: ./src/js/components/autoplay/index.js
  3641. /**
  3642. * The component for playing slides automatically.
  3643. *
  3644. * @author Naotoshi Fujita
  3645. * @copyright Naotoshi Fujita. All rights reserved.
  3646. */
  3647. /**
  3648. * Set of pause flags.
  3649. */
  3650. var PAUSE_FLAGS = {
  3651. HOVER: 1,
  3652. FOCUS: 2,
  3653. MANUAL: 3
  3654. };
  3655. /**
  3656. * The component for playing slides automatically.
  3657. *
  3658. * @param {Splide} Splide - A Splide instance.
  3659. * @param {Object} Components - An object containing components.
  3660. * @param {string} name - A component name as a lowercase string.
  3661. *
  3662. * @return {Object} - The component object.
  3663. */
  3664. /* harmony default export */ var components_autoplay = (function (Splide, Components, name) {
  3665. /**
  3666. * Store pause flags.
  3667. *
  3668. * @type {Array}
  3669. */
  3670. var flags = [];
  3671. /**
  3672. * Store an interval object.
  3673. *
  3674. * @type {Object};
  3675. */
  3676. var interval;
  3677. /**
  3678. * Keep the Elements component.
  3679. *
  3680. * @type {string}
  3681. */
  3682. var Elements = Components.Elements;
  3683. /**
  3684. * Autoplay component object.
  3685. *
  3686. * @type {Object}
  3687. */
  3688. var Autoplay = {
  3689. /**
  3690. * Required only when the autoplay option is true.
  3691. *
  3692. * @type {boolean}
  3693. */
  3694. required: Splide.options.autoplay,
  3695. /**
  3696. * Called when the component is mounted.
  3697. * Note that autoplay starts only if there are slides over perPage number.
  3698. */
  3699. mount: function mount() {
  3700. var options = Splide.options;
  3701. if (Elements.slides.length > options.perPage) {
  3702. interval = createInterval(function () {
  3703. Splide.go('>');
  3704. }, options.interval, function (rate) {
  3705. Splide.emit(name + ":playing", rate);
  3706. if (Elements.bar) {
  3707. applyStyle(Elements.bar, {
  3708. width: rate * 100 + "%"
  3709. });
  3710. }
  3711. });
  3712. bind();
  3713. this.play();
  3714. }
  3715. },
  3716. /**
  3717. * Start autoplay.
  3718. *
  3719. * @param {number} flag - A pause flag to be removed.
  3720. */
  3721. play: function play(flag) {
  3722. if (flag === void 0) {
  3723. flag = 0;
  3724. }
  3725. flags = flags.filter(function (f) {
  3726. return f !== flag;
  3727. });
  3728. if (!flags.length) {
  3729. Splide.emit(name + ":play");
  3730. interval.play(Splide.options.resetProgress);
  3731. }
  3732. },
  3733. /**
  3734. * Pause autoplay.
  3735. * Note that Array.includes is not supported by IE.
  3736. *
  3737. * @param {number} flag - A pause flag to be added.
  3738. */
  3739. pause: function pause(flag) {
  3740. if (flag === void 0) {
  3741. flag = 0;
  3742. }
  3743. interval.pause();
  3744. if (flags.indexOf(flag) === -1) {
  3745. flags.push(flag);
  3746. }
  3747. if (flags.length === 1) {
  3748. Splide.emit(name + ":pause");
  3749. }
  3750. }
  3751. };
  3752. /**
  3753. * Listen some events.
  3754. */
  3755. function bind() {
  3756. var options = Splide.options;
  3757. var sibling = Splide.sibling;
  3758. var elms = [Splide.root, sibling ? sibling.root : null];
  3759. if (options.pauseOnHover) {
  3760. switchOn(elms, 'mouseleave', PAUSE_FLAGS.HOVER, true);
  3761. switchOn(elms, 'mouseenter', PAUSE_FLAGS.HOVER, false);
  3762. }
  3763. if (options.pauseOnFocus) {
  3764. switchOn(elms, 'focusout', PAUSE_FLAGS.FOCUS, true);
  3765. switchOn(elms, 'focusin', PAUSE_FLAGS.FOCUS, false);
  3766. }
  3767. Splide.on('click', function () {
  3768. // Need to be removed a focus flag at first.
  3769. Autoplay.play(PAUSE_FLAGS.FOCUS);
  3770. Autoplay.play(PAUSE_FLAGS.MANUAL);
  3771. }, Elements.play).on('move refresh', function () {
  3772. Autoplay.play();
  3773. }) // Rewind the timer.
  3774. .on('destroy', function () {
  3775. Autoplay.pause();
  3776. });
  3777. switchOn([Elements.pause], 'click', PAUSE_FLAGS.MANUAL, false);
  3778. }
  3779. /**
  3780. * Play or pause on the given event.
  3781. *
  3782. * @param {Element[]} elms - Elements.
  3783. * @param {string} event - An event name or names.
  3784. * @param {number} flag - A pause flag defined on the top.
  3785. * @param {boolean} play - Determine whether to play or pause.
  3786. */
  3787. function switchOn(elms, event, flag, play) {
  3788. elms.forEach(function (elm) {
  3789. Splide.on(event, function () {
  3790. Autoplay[play ? 'play' : 'pause'](flag);
  3791. }, elm);
  3792. });
  3793. }
  3794. return Autoplay;
  3795. });
  3796. // CONCATENATED MODULE: ./src/js/components/cover/index.js
  3797. /**
  3798. * The component for change an img element to background image of its wrapper.
  3799. *
  3800. * @author Naotoshi Fujita
  3801. * @copyright Naotoshi Fujita. All rights reserved.
  3802. */
  3803. /**
  3804. * The component for change an img element to background image of its wrapper.
  3805. *
  3806. * @param {Splide} Splide - A Splide instance.
  3807. * @param {Object} Components - An object containing components.
  3808. *
  3809. * @return {Object} - The component object.
  3810. */
  3811. /* harmony default export */ var components_cover = (function (Splide, Components) {
  3812. /**
  3813. * Hold options.
  3814. *
  3815. * @type {Object}
  3816. */
  3817. var options = Splide.options;
  3818. /**
  3819. * Cover component object.
  3820. *
  3821. * @type {Object}
  3822. */
  3823. var Cover = {
  3824. /**
  3825. * Required only when "cover" option is true.
  3826. *
  3827. * @type {boolean}
  3828. */
  3829. required: options.cover,
  3830. /**
  3831. * Called when the component is mounted.
  3832. */
  3833. mount: function mount() {
  3834. Splide.on('lazyload:loaded', function (img) {
  3835. cover(img, false);
  3836. });
  3837. Splide.on('mounted updated refresh', function () {
  3838. return apply(false);
  3839. });
  3840. },
  3841. /**
  3842. * Destroy.
  3843. */
  3844. destroy: function destroy() {
  3845. apply(true);
  3846. }
  3847. };
  3848. /**
  3849. * Apply "cover" to all slides.
  3850. *
  3851. * @param {boolean} uncover - If true, "cover" will be clear.
  3852. */
  3853. function apply(uncover) {
  3854. Components.Elements.each(function (Slide) {
  3855. var img = child(Slide.slide, 'img') || child(Slide.container, 'img');
  3856. if (img && img.src) {
  3857. cover(img, uncover);
  3858. }
  3859. });
  3860. }
  3861. /**
  3862. * Set background image of the parent element, using source of the given image element.
  3863. *
  3864. * @param {Element} img - An image element.
  3865. * @param {boolean} uncover - Reset "cover".
  3866. */
  3867. function cover(img, uncover) {
  3868. applyStyle(img.parentElement, {
  3869. background: uncover ? '' : "center/cover no-repeat url(\"" + img.src + "\")"
  3870. });
  3871. applyStyle(img, {
  3872. display: uncover ? '' : 'none'
  3873. });
  3874. }
  3875. return Cover;
  3876. });
  3877. // CONCATENATED MODULE: ./src/js/components/arrows/path.js
  3878. /**
  3879. * Export vector path for an arrow.
  3880. *
  3881. * @author Naotoshi Fujita
  3882. * @copyright Naotoshi Fujita. All rights reserved.
  3883. */
  3884. /**
  3885. * Namespace definition for SVG element.
  3886. *
  3887. * @type {string}
  3888. */
  3889. var XML_NAME_SPACE = 'http://www.w3.org/2000/svg';
  3890. /**
  3891. * The arrow vector path.
  3892. *
  3893. * @type {number}
  3894. */
  3895. var PATH = 'm15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z';
  3896. /**
  3897. * SVG width and height.
  3898. *
  3899. * @type {number}
  3900. */
  3901. var SIZE = 40;
  3902. // CONCATENATED MODULE: ./src/js/components/arrows/index.js
  3903. /**
  3904. * The component for appending prev/next arrows.
  3905. *
  3906. * @author Naotoshi Fujita
  3907. * @copyright Naotoshi Fujita. All rights reserved.
  3908. */
  3909. /**
  3910. * The component for appending prev/next arrows.
  3911. *
  3912. * @param {Splide} Splide - A Splide instance.
  3913. * @param {Object} Components - An object containing components.
  3914. * @param {string} name - A component name as a lowercase string.
  3915. *
  3916. * @return {Object} - The component object.
  3917. */
  3918. /* harmony default export */ var components_arrows = (function (Splide, Components, name) {
  3919. /**
  3920. * Previous arrow element.
  3921. *
  3922. * @type {Element|undefined}
  3923. */
  3924. var prev;
  3925. /**
  3926. * Next arrow element.
  3927. *
  3928. * @type {Element|undefined}
  3929. */
  3930. var next;
  3931. /**
  3932. * Store the class list.
  3933. *
  3934. * @type {Object}
  3935. */
  3936. var classes = Splide.classes;
  3937. /**
  3938. * Hold the root element.
  3939. *
  3940. * @type {Element}
  3941. */
  3942. var root = Splide.root;
  3943. /**
  3944. * Whether arrows are created programmatically or not.
  3945. *
  3946. * @type {boolean}
  3947. */
  3948. var created;
  3949. /**
  3950. * Hold the Elements component.
  3951. *
  3952. * @type {Object}
  3953. */
  3954. var Elements = Components.Elements;
  3955. /**
  3956. * Arrows component object.
  3957. *
  3958. * @type {Object}
  3959. */
  3960. var Arrows = {
  3961. /**
  3962. * Required when the arrows option is true.
  3963. *
  3964. * @type {boolean}
  3965. */
  3966. required: Splide.options.arrows,
  3967. /**
  3968. * Called when the component is mounted.
  3969. */
  3970. mount: function mount() {
  3971. // Attempt to get arrows from HTML source.
  3972. prev = Elements.arrows.prev;
  3973. next = Elements.arrows.next; // If arrows were not found in HTML, let's generate them.
  3974. if ((!prev || !next) && Splide.options.arrows) {
  3975. prev = createArrow(true);
  3976. next = createArrow(false);
  3977. created = true;
  3978. appendArrows();
  3979. }
  3980. if (prev && next) {
  3981. bind();
  3982. }
  3983. this.arrows = {
  3984. prev: prev,
  3985. next: next
  3986. };
  3987. },
  3988. /**
  3989. * Called after all components are mounted.
  3990. */
  3991. mounted: function mounted() {
  3992. Splide.emit(name + ":mounted", prev, next);
  3993. },
  3994. /**
  3995. * Destroy.
  3996. */
  3997. destroy: function destroy() {
  3998. removeAttribute([prev, next], 'disabled');
  3999. if (created) {
  4000. dom_remove(prev.parentElement);
  4001. }
  4002. }
  4003. };
  4004. /**
  4005. * Listen to native and custom events.
  4006. */
  4007. function bind() {
  4008. Splide.on('click', function () {
  4009. Splide.go('<');
  4010. }, prev).on('click', function () {
  4011. Splide.go('>');
  4012. }, next).on('mounted move updated refresh', updateDisabled);
  4013. }
  4014. /**
  4015. * Update a disabled attribute.
  4016. */
  4017. function updateDisabled() {
  4018. var _Components$Controlle = Components.Controller,
  4019. prevIndex = _Components$Controlle.prevIndex,
  4020. nextIndex = _Components$Controlle.nextIndex;
  4021. var isEnough = Splide.length > Splide.options.perPage || Splide.is(LOOP);
  4022. prev.disabled = prevIndex < 0 || !isEnough;
  4023. next.disabled = nextIndex < 0 || !isEnough;
  4024. Splide.emit(name + ":updated", prev, next, prevIndex, nextIndex);
  4025. }
  4026. /**
  4027. * Create a wrapper element and append arrows.
  4028. */
  4029. function appendArrows() {
  4030. var wrapper = create('div', {
  4031. "class": classes.arrows
  4032. });
  4033. append(wrapper, prev);
  4034. append(wrapper, next);
  4035. var slider = Elements.slider;
  4036. var parent = Splide.options.arrows === 'slider' && slider ? slider : root;
  4037. before(wrapper, parent.firstElementChild);
  4038. }
  4039. /**
  4040. * Create an arrow element.
  4041. *
  4042. * @param {boolean} prev - Determine to create a prev arrow or next arrow.
  4043. *
  4044. * @return {Element} - A created arrow element.
  4045. */
  4046. function createArrow(prev) {
  4047. var arrow = "<button class=\"" + classes.arrow + " " + (prev ? classes.prev : classes.next) + "\" type=\"button\">" + ("<svg xmlns=\"" + XML_NAME_SPACE + "\"\tviewBox=\"0 0 " + SIZE + " " + SIZE + "\"\twidth=\"" + SIZE + "\"\theight=\"" + SIZE + "\">") + ("<path d=\"" + (Splide.options.arrowPath || PATH) + "\" />");
  4048. return domify(arrow);
  4049. }
  4050. return Arrows;
  4051. });
  4052. // CONCATENATED MODULE: ./src/js/components/pagination/index.js
  4053. /**
  4054. * The component for handling pagination
  4055. *
  4056. * @author Naotoshi Fujita
  4057. * @copyright Naotoshi Fujita. All rights reserved.
  4058. */
  4059. /**
  4060. * The event name for updating some attributes of pagination nodes.
  4061. *
  4062. * @type {string}
  4063. */
  4064. var ATTRIBUTES_UPDATE_EVENT = 'move.page';
  4065. /**
  4066. * The event name for recreating pagination.
  4067. *
  4068. * @type {string}
  4069. */
  4070. var UPDATE_EVENT = 'updated.page refresh.page';
  4071. /**
  4072. * The component for handling pagination
  4073. *
  4074. * @param {Splide} Splide - A Splide instance.
  4075. * @param {Object} Components - An object containing components.
  4076. * @param {string} name - A component name as a lowercase string.
  4077. *
  4078. * @return {Object} - The component object.
  4079. */
  4080. /* harmony default export */ var components_pagination = (function (Splide, Components, name) {
  4081. /**
  4082. * Store all data for pagination.
  4083. * - list: A list element.
  4084. * - items: An array that contains objects(li, button, index, page).
  4085. *
  4086. * @type {Object}
  4087. */
  4088. var data = {};
  4089. /**
  4090. * Hold the Elements component.
  4091. *
  4092. * @type {Object}
  4093. */
  4094. var Elements = Components.Elements;
  4095. /**
  4096. * Pagination component object.
  4097. *
  4098. * @type {Object}
  4099. */
  4100. var Pagination = {
  4101. /**
  4102. * Called when the component is mounted.
  4103. */
  4104. mount: function mount() {
  4105. var pagination = Splide.options.pagination;
  4106. if (pagination) {
  4107. data = createPagination();
  4108. var slider = Elements.slider;
  4109. var parent = pagination === 'slider' && slider ? slider : Splide.root;
  4110. append(parent, data.list);
  4111. Splide.on(ATTRIBUTES_UPDATE_EVENT, updateAttributes);
  4112. }
  4113. Splide.off(UPDATE_EVENT).on(UPDATE_EVENT, function () {
  4114. Pagination.destroy();
  4115. if (Splide.options.pagination) {
  4116. Pagination.mount();
  4117. Pagination.mounted();
  4118. }
  4119. });
  4120. },
  4121. /**
  4122. * Called after all components are mounted.
  4123. */
  4124. mounted: function mounted() {
  4125. if (Splide.options.pagination) {
  4126. var index = Splide.index;
  4127. Splide.emit(name + ":mounted", data, this.getItem(index));
  4128. updateAttributes(index, -1);
  4129. }
  4130. },
  4131. /**
  4132. * Destroy the pagination.
  4133. * Be aware that node.remove() is not supported by IE.
  4134. */
  4135. destroy: function destroy() {
  4136. dom_remove(data.list);
  4137. if (data.items) {
  4138. data.items.forEach(function (item) {
  4139. Splide.off('click', item.button);
  4140. });
  4141. } // Do not remove UPDATE_EVENT to recreate pagination if needed.
  4142. Splide.off(ATTRIBUTES_UPDATE_EVENT);
  4143. data = {};
  4144. },
  4145. /**
  4146. * Return an item by index.
  4147. *
  4148. * @param {number} index - A slide index.
  4149. *
  4150. * @return {Object|undefined} - An item object on success or undefined on failure.
  4151. */
  4152. getItem: function getItem(index) {
  4153. return data.items[Components.Controller.toPage(index)];
  4154. },
  4155. /**
  4156. * Return object containing pagination data.
  4157. *
  4158. * @return {Object} - Pagination data including list and items.
  4159. */
  4160. get data() {
  4161. return data;
  4162. }
  4163. };
  4164. /**
  4165. * Update attributes.
  4166. *
  4167. * @param {number} index - Active index.
  4168. * @param {number} prevIndex - Prev index.
  4169. */
  4170. function updateAttributes(index, prevIndex) {
  4171. var prev = Pagination.getItem(prevIndex);
  4172. var curr = Pagination.getItem(index);
  4173. var active = STATUS_CLASSES.active;
  4174. if (prev) {
  4175. removeClass(prev.button, active);
  4176. }
  4177. if (curr) {
  4178. addClass(curr.button, active);
  4179. }
  4180. Splide.emit(name + ":updated", data, prev, curr);
  4181. }
  4182. /**
  4183. * Create a wrapper and button elements.
  4184. *
  4185. * @return {Object} - An object contains all data.
  4186. */
  4187. function createPagination() {
  4188. var options = Splide.options;
  4189. var classes = Splide.classes;
  4190. var list = create('ul', {
  4191. "class": classes.pagination
  4192. });
  4193. var items = Elements.getSlides(false).filter(function (Slide) {
  4194. return options.focus !== false || Slide.index % options.perPage === 0;
  4195. }).map(function (Slide, page) {
  4196. var li = create('li', {});
  4197. var button = create('button', {
  4198. "class": classes.page,
  4199. type: 'button'
  4200. });
  4201. append(li, button);
  4202. append(list, li);
  4203. Splide.on('click', function () {
  4204. Splide.go(">" + page);
  4205. }, button);
  4206. return {
  4207. li: li,
  4208. button: button,
  4209. page: page,
  4210. Slides: Elements.getSlidesByPage(page)
  4211. };
  4212. });
  4213. return {
  4214. list: list,
  4215. items: items
  4216. };
  4217. }
  4218. return Pagination;
  4219. });
  4220. // CONCATENATED MODULE: ./src/js/components/lazyload/index.js
  4221. /**
  4222. * The component for loading slider images lazily.
  4223. *
  4224. * @author Naotoshi Fujita
  4225. * @copyright Naotoshi Fujita. All rights reserved.
  4226. */
  4227. /**
  4228. * The name for a data attribute.
  4229. *
  4230. * @type {string}
  4231. */
  4232. var SRC_DATA_NAME = 'data-splide-lazy';
  4233. /**
  4234. * The component for loading slider images lazily.
  4235. *
  4236. * @param {Splide} Splide - A Splide instance.
  4237. * @param {Object} Components - An object containing components.
  4238. * @param {string} name - A component name as a lowercase string.
  4239. *
  4240. * @return {Object} - The component object.
  4241. */
  4242. /* harmony default export */ var lazyload = (function (Splide, Components, name) {
  4243. /**
  4244. * Next index for sequential loading.
  4245. *
  4246. * @type {number}
  4247. */
  4248. var nextIndex;
  4249. /**
  4250. * Store objects containing an img element and a Slide object.
  4251. *
  4252. * @type {Object[]}
  4253. */
  4254. var images;
  4255. /**
  4256. * Store the options.
  4257. *
  4258. * @type {Object}
  4259. */
  4260. var options = Splide.options;
  4261. /**
  4262. * Whether to load images sequentially or not.
  4263. *
  4264. * @type {boolean}
  4265. */
  4266. var isSequential = options.lazyLoad === 'sequential';
  4267. /**
  4268. * Lazyload component object.
  4269. *
  4270. * @type {Object}
  4271. */
  4272. var Lazyload = {
  4273. /**
  4274. * Mount only when the lazyload option is provided.
  4275. *
  4276. * @type {boolean}
  4277. */
  4278. required: options.lazyLoad,
  4279. /**
  4280. * Called when the component is mounted.
  4281. */
  4282. mount: function mount() {
  4283. Splide.on('mounted refresh', function () {
  4284. init();
  4285. Components.Elements.each(function (Slide) {
  4286. each(Slide.slide.querySelectorAll("[" + SRC_DATA_NAME + "]"), function (img) {
  4287. if (!img.src) {
  4288. images.push({
  4289. img: img,
  4290. Slide: Slide
  4291. });
  4292. applyStyle(img, {
  4293. display: 'none'
  4294. });
  4295. }
  4296. });
  4297. });
  4298. if (isSequential) {
  4299. loadNext();
  4300. }
  4301. });
  4302. if (!isSequential) {
  4303. Splide.on("mounted refresh moved." + name, check);
  4304. }
  4305. },
  4306. /**
  4307. * Destroy.
  4308. */
  4309. destroy: init
  4310. };
  4311. /**
  4312. * Initialize parameters.
  4313. */
  4314. function init() {
  4315. images = [];
  4316. nextIndex = 0;
  4317. }
  4318. /**
  4319. * Check how close each image is from the active slide and
  4320. * determine whether to start loading or not, according to the distance.
  4321. *
  4322. * @param {number} index - Current index.
  4323. */
  4324. function check(index) {
  4325. index = isNaN(index) ? Splide.index : index;
  4326. images = images.filter(function (image) {
  4327. if (image.Slide.isWithin(index, options.perPage * (options.preloadPages + 1))) {
  4328. load(image.img, image.Slide);
  4329. return false;
  4330. }
  4331. return true;
  4332. }); // Unbind if all images are loaded.
  4333. if (!images[0]) {
  4334. Splide.off("moved." + name);
  4335. }
  4336. }
  4337. /**
  4338. * Start loading an image.
  4339. * Creating a clone of the image element since setting src attribute directly to it
  4340. * often occurs 'hitch', blocking some other processes of a browser.
  4341. *
  4342. * @param {Element} img - An image element.
  4343. * @param {Object} Slide - A Slide object.
  4344. */
  4345. function load(img, Slide) {
  4346. addClass(Slide.slide, STATUS_CLASSES.loading);
  4347. var spinner = create('span', {
  4348. "class": Splide.classes.spinner
  4349. });
  4350. append(img.parentElement, spinner);
  4351. img.onload = function () {
  4352. loaded(img, spinner, Slide, false);
  4353. };
  4354. img.onerror = function () {
  4355. loaded(img, spinner, Slide, true);
  4356. };
  4357. setAttribute(img, 'src', getAttribute(img, SRC_DATA_NAME));
  4358. }
  4359. /**
  4360. * Start loading a next image in images array.
  4361. */
  4362. function loadNext() {
  4363. if (nextIndex < images.length) {
  4364. var image = images[nextIndex];
  4365. load(image.img, image.Slide);
  4366. }
  4367. nextIndex++;
  4368. }
  4369. /**
  4370. * Called just after the image was loaded or loading was aborted by some error.
  4371. *
  4372. * @param {Element} img - An image element.
  4373. * @param {Element} spinner - A spinner element.
  4374. * @param {Object} Slide - A Slide object.
  4375. * @param {boolean} error - True if the image was loaded successfully or false on error.
  4376. */
  4377. function loaded(img, spinner, Slide, error) {
  4378. removeClass(Slide.slide, STATUS_CLASSES.loading);
  4379. if (!error) {
  4380. dom_remove(spinner);
  4381. applyStyle(img, {
  4382. display: ''
  4383. });
  4384. Splide.emit(name + ":loaded", img).emit('resize');
  4385. }
  4386. if (isSequential) {
  4387. loadNext();
  4388. }
  4389. }
  4390. return Lazyload;
  4391. });
  4392. // CONCATENATED MODULE: ./src/js/components/keyboard/index.js
  4393. /**
  4394. * The component for controlling slides via keyboard.
  4395. *
  4396. * @author Naotoshi Fujita
  4397. * @copyright Naotoshi Fujita. All rights reserved.
  4398. */
  4399. /**
  4400. * Map a key to a slide control.
  4401. *
  4402. * @type {Object}
  4403. */
  4404. var KEY_MAP = {
  4405. ltr: {
  4406. ArrowLeft: '<',
  4407. ArrowRight: '>',
  4408. // For IE.
  4409. Left: '<',
  4410. Right: '>'
  4411. },
  4412. rtl: {
  4413. ArrowLeft: '>',
  4414. ArrowRight: '<',
  4415. // For IE.
  4416. Left: '>',
  4417. Right: '<'
  4418. },
  4419. ttb: {
  4420. ArrowUp: '<',
  4421. ArrowDown: '>',
  4422. // For IE.
  4423. Up: '<',
  4424. Down: '>'
  4425. }
  4426. };
  4427. /**
  4428. * The component for controlling slides via keyboard.
  4429. *
  4430. * @param {Splide} Splide - A Splide instance.
  4431. *
  4432. * @return {Object} - The component object.
  4433. */
  4434. /* harmony default export */ var keyboard = (function (Splide) {
  4435. /**
  4436. * Hold the root element.
  4437. *
  4438. * @type {Element}
  4439. */
  4440. var root = Splide.root;
  4441. return {
  4442. /**
  4443. * Called when the component is mounted.
  4444. */
  4445. mount: function mount() {
  4446. var map = KEY_MAP[Splide.options.direction];
  4447. Splide.on('mounted updated', function () {
  4448. Splide.off('keydown', root);
  4449. if (Splide.options.keyboard) {
  4450. Splide.on('keydown', function (e) {
  4451. if (map[e.key]) {
  4452. Splide.go(map[e.key]);
  4453. }
  4454. }, root);
  4455. }
  4456. });
  4457. }
  4458. };
  4459. });
  4460. // CONCATENATED MODULE: ./src/js/constants/a11y.js
  4461. /**
  4462. * Export aria attribute names.
  4463. *
  4464. * @author Naotoshi Fujita
  4465. * @copyright Naotoshi Fujita. All rights reserved.
  4466. */
  4467. /**
  4468. * Attribute name for aria-current.
  4469. *
  4470. * @type {string}
  4471. */
  4472. var ARIA_CURRENRT = 'aria-current';
  4473. /**
  4474. * Attribute name for aria-control.
  4475. *
  4476. * @type {string}
  4477. */
  4478. var ARIA_CONTROLS = 'aria-controls';
  4479. /**
  4480. * Attribute name for aria-control.
  4481. *
  4482. * @type {string}
  4483. */
  4484. var ARIA_LABEL = 'aria-label';
  4485. /**
  4486. * Attribute name for aria-labelledby.
  4487. *
  4488. * @type {string}
  4489. */
  4490. var ARIA_LABELLEDBY = 'aria-labelledby';
  4491. /**
  4492. * Attribute name for aria-hidden.
  4493. *
  4494. * @type {string}
  4495. */
  4496. var ARIA_HIDDEN = 'aria-hidden';
  4497. /**
  4498. * Attribute name for tab-index.
  4499. *
  4500. * @type {string}
  4501. */
  4502. var TAB_INDEX = 'tabindex';
  4503. // CONCATENATED MODULE: ./src/js/components/a11y/index.js
  4504. /**
  4505. * The component for enhancing accessibility.
  4506. *
  4507. * @author Naotoshi Fujita
  4508. * @copyright Naotoshi Fujita. All rights reserved.
  4509. */
  4510. /**
  4511. * The component for enhancing accessibility.
  4512. *
  4513. * @param {Splide} Splide - A Splide instance.
  4514. * @param {Object} Components - An object containing components.
  4515. *
  4516. * @return {Object} - The component object.
  4517. */
  4518. /* harmony default export */ var a11y = (function (Splide, Components) {
  4519. /**
  4520. * Hold a i18n object.
  4521. *
  4522. * @type {Object}
  4523. */
  4524. var i18n = Splide.i18n;
  4525. /**
  4526. * Hold the Elements component.
  4527. *
  4528. * @type {Object}
  4529. */
  4530. var Elements = Components.Elements;
  4531. /**
  4532. * A11y component object.
  4533. *
  4534. * @type {Object}
  4535. */
  4536. var A11y = {
  4537. /**
  4538. * Required only when the accessibility option is true.
  4539. *
  4540. * @type {boolean}
  4541. */
  4542. required: Splide.options.accessibility,
  4543. /**
  4544. * Called when the component is mounted.
  4545. */
  4546. mount: function mount() {
  4547. Splide.on('visible', function (Slide) {
  4548. updateSlide(Slide.slide, true);
  4549. }).on('hidden', function (Slide) {
  4550. updateSlide(Slide.slide, false);
  4551. }).on('arrows:mounted', initArrows).on('arrows:updated', updateArrows).on('pagination:mounted', initPagination).on('pagination:updated', updatePagination);
  4552. if (Splide.options.isNavigation) {
  4553. Splide.on('navigation:mounted', initNavigation).on('active', function (Slide) {
  4554. updateNavigation(Slide, true);
  4555. }).on('inactive', function (Slide) {
  4556. updateNavigation(Slide, false);
  4557. });
  4558. }
  4559. initAutoplay();
  4560. },
  4561. /**
  4562. * Destroy.
  4563. */
  4564. destroy: function destroy() {
  4565. var arrows = Components.Arrows ? Components.Arrows.arrows : {};
  4566. removeAttribute(Elements.slides.concat([arrows.prev, arrows.next, Elements.play, Elements.pause]), [ARIA_HIDDEN, TAB_INDEX, ARIA_CONTROLS, ARIA_LABEL, ARIA_CURRENRT, 'role']);
  4567. }
  4568. };
  4569. /**
  4570. * Update slide attributes when it gets visible or hidden.
  4571. *
  4572. * @param {Element} slide - A slide element.
  4573. * @param {Boolean} visible - True when the slide gets visible, or false when hidden.
  4574. */
  4575. function updateSlide(slide, visible) {
  4576. setAttribute(slide, ARIA_HIDDEN, !visible);
  4577. setAttribute(slide, TAB_INDEX, visible ? 0 : -1);
  4578. }
  4579. /**
  4580. * Initialize arrows if they are available.
  4581. * Append screen reader elements and add aria-controls attribute.
  4582. *
  4583. * @param {Element} prev - Previous arrow element.
  4584. * @param {Element} next - Next arrow element.
  4585. */
  4586. function initArrows(prev, next) {
  4587. var controls = Elements.track.id;
  4588. setAttribute(prev, ARIA_CONTROLS, controls);
  4589. setAttribute(next, ARIA_CONTROLS, controls);
  4590. }
  4591. /**
  4592. * Update arrow attributes.
  4593. *
  4594. * @param {Element} prev - Previous arrow element.
  4595. * @param {Element} next - Next arrow element.
  4596. * @param {number} prevIndex - Previous slide index or -1 when there is no precede slide.
  4597. * @param {number} nextIndex - Next slide index or -1 when there is no next slide.
  4598. */
  4599. function updateArrows(prev, next, prevIndex, nextIndex) {
  4600. var index = Splide.index;
  4601. var prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
  4602. var nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
  4603. setAttribute(prev, ARIA_LABEL, prevLabel);
  4604. setAttribute(next, ARIA_LABEL, nextLabel);
  4605. }
  4606. /**
  4607. * Initialize pagination if it's available.
  4608. * Append a screen reader element and add aria-controls/label attribute to each item.
  4609. *
  4610. * @param {Object} data - Data object containing all items.
  4611. * @param {Object} activeItem - An initial active item.
  4612. */
  4613. function initPagination(data, activeItem) {
  4614. if (activeItem) {
  4615. setAttribute(activeItem.button, ARIA_CURRENRT, true);
  4616. }
  4617. data.items.forEach(function (item) {
  4618. var options = Splide.options;
  4619. var text = options.focus === false && options.perPage > 1 ? i18n.pageX : i18n.slideX;
  4620. var label = sprintf(text, item.page + 1);
  4621. var button = item.button;
  4622. var controls = item.Slides.map(function (Slide) {
  4623. return Slide.slide.id;
  4624. });
  4625. setAttribute(button, ARIA_CONTROLS, controls.join(' '));
  4626. setAttribute(button, ARIA_LABEL, label);
  4627. });
  4628. }
  4629. /**
  4630. * Update pagination attributes.
  4631. *
  4632. * @param {Object} data - Data object containing all items.
  4633. * @param {Element} prev - A previous active element.
  4634. * @param {Element} curr - A current active element.
  4635. */
  4636. function updatePagination(data, prev, curr) {
  4637. if (prev) {
  4638. removeAttribute(prev.button, ARIA_CURRENRT);
  4639. }
  4640. if (curr) {
  4641. setAttribute(curr.button, ARIA_CURRENRT, true);
  4642. }
  4643. }
  4644. /**
  4645. * Initialize autoplay buttons.
  4646. */
  4647. function initAutoplay() {
  4648. ['play', 'pause'].forEach(function (name) {
  4649. var elm = Elements[name];
  4650. if (elm) {
  4651. if (!isButton(elm)) {
  4652. setAttribute(elm, 'role', 'button');
  4653. }
  4654. setAttribute(elm, ARIA_CONTROLS, Elements.track.id);
  4655. setAttribute(elm, ARIA_LABEL, i18n[name]);
  4656. }
  4657. });
  4658. }
  4659. /**
  4660. * Initialize navigation slider.
  4661. * Add button role, aria-label, aria-controls to slide elements and append screen reader text to them.
  4662. *
  4663. * @param {Splide} main - A main Splide instance.
  4664. */
  4665. function initNavigation(main) {
  4666. Elements.each(function (_ref) {
  4667. var slide = _ref.slide,
  4668. realIndex = _ref.realIndex,
  4669. index = _ref.index;
  4670. if (!isButton(slide)) {
  4671. setAttribute(slide, 'role', 'button');
  4672. }
  4673. var slideIndex = realIndex > -1 ? realIndex : index;
  4674. var label = sprintf(i18n.slideX, slideIndex + 1);
  4675. var mainSlide = main.Components.Elements.getSlide(slideIndex);
  4676. setAttribute(slide, ARIA_LABEL, label);
  4677. if (mainSlide) {
  4678. setAttribute(slide, ARIA_CONTROLS, mainSlide.slide.id);
  4679. }
  4680. });
  4681. }
  4682. /**
  4683. * Update navigation attributes.
  4684. *
  4685. * @param {Object} Slide - A target Slide object.
  4686. * @param {boolean} active - True if the slide is active or false if inactive.
  4687. */
  4688. function updateNavigation(_ref2, active) {
  4689. var slide = _ref2.slide;
  4690. if (active) {
  4691. setAttribute(slide, ARIA_CURRENRT, true);
  4692. } else {
  4693. removeAttribute(slide, ARIA_CURRENRT);
  4694. }
  4695. }
  4696. /**
  4697. * Check if the given element is button or not.
  4698. *
  4699. * @param {Element} elm - An element to be checked.
  4700. *
  4701. * @return {boolean} - True if the given element is button.
  4702. */
  4703. function isButton(elm) {
  4704. return elm.tagName.toLowerCase() === 'button';
  4705. }
  4706. return A11y;
  4707. });
  4708. // CONCATENATED MODULE: ./src/js/components/sync/index.js
  4709. /**
  4710. * The component for synchronizing a slider with another.
  4711. *
  4712. * @author Naotoshi Fujita
  4713. * @copyright Naotoshi Fujita. All rights reserved.
  4714. */
  4715. /**
  4716. * The event name for sync.
  4717. *
  4718. * @type {string}
  4719. */
  4720. var SYNC_EVENT = 'move.sync';
  4721. /**
  4722. * The keys for triggering the navigation button.
  4723. *
  4724. * @type {String[]}
  4725. */
  4726. var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
  4727. /**
  4728. * The component for synchronizing a slider with another.
  4729. *
  4730. * @param {Splide} Splide - A Splide instance.
  4731. *
  4732. * @return {Object} - The component object.
  4733. */
  4734. /* harmony default export */ var sync = (function (Splide) {
  4735. /**
  4736. * Keep the sibling Splide instance.
  4737. *
  4738. * @type {Splide}
  4739. */
  4740. var sibling = Splide.sibling;
  4741. /**
  4742. * Whether the sibling slider is navigation or not.
  4743. *
  4744. * @type {Splide|boolean}
  4745. */
  4746. var isNavigation = sibling && sibling.options.isNavigation;
  4747. /**
  4748. * Layout component object.
  4749. *
  4750. * @type {Object}
  4751. */
  4752. var Sync = {
  4753. /**
  4754. * Required only when the sub slider is available.
  4755. *
  4756. * @type {boolean}
  4757. */
  4758. required: !!sibling,
  4759. /**
  4760. * Called when the component is mounted.
  4761. */
  4762. mount: function mount() {
  4763. syncMain();
  4764. syncSibling();
  4765. if (isNavigation) {
  4766. bind();
  4767. }
  4768. },
  4769. /**
  4770. * Called after all components are mounted.
  4771. */
  4772. mounted: function mounted() {
  4773. if (isNavigation) {
  4774. sibling.emit('navigation:mounted', Splide);
  4775. }
  4776. }
  4777. };
  4778. /**
  4779. * Listen the primary slider event to move secondary one.
  4780. * Must unbind a handler at first to avoid infinite loop.
  4781. */
  4782. function syncMain() {
  4783. Splide.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
  4784. sibling.off(SYNC_EVENT).go(sibling.is(LOOP) ? destIndex : newIndex, false);
  4785. syncSibling();
  4786. });
  4787. }
  4788. /**
  4789. * Listen the secondary slider event to move primary one.
  4790. * Must unbind a handler at first to avoid infinite loop.
  4791. */
  4792. function syncSibling() {
  4793. sibling.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
  4794. Splide.off(SYNC_EVENT).go(Splide.is(LOOP) ? destIndex : newIndex, false);
  4795. syncMain();
  4796. });
  4797. }
  4798. /**
  4799. * Listen some events on each slide.
  4800. */
  4801. function bind() {
  4802. sibling.Components.Elements.each(function (_ref) {
  4803. var slide = _ref.slide,
  4804. index = _ref.index;
  4805. /*
  4806. * Listen mouseup and touchend events to handle click.
  4807. */
  4808. Splide.on('mouseup touchend', function (e) {
  4809. // Ignore a middle or right click.
  4810. if (!e.button || e.button === 0) {
  4811. moveSibling(index);
  4812. }
  4813. }, slide);
  4814. /*
  4815. * Subscribe keyup to handle Enter and Space key.
  4816. * Note that Array.includes is not supported by IE.
  4817. */
  4818. Splide.on('keyup', function (e) {
  4819. if (TRIGGER_KEYS.indexOf(e.key) > -1) {
  4820. e.preventDefault();
  4821. moveSibling(index);
  4822. }
  4823. }, slide, {
  4824. passive: false
  4825. });
  4826. });
  4827. }
  4828. /**
  4829. * Move the sibling to the given index.
  4830. * Need to check "IDLE" status because slides can be moving by Drag component.
  4831. *
  4832. * @param {number} index - Target index.
  4833. */
  4834. function moveSibling(index) {
  4835. if (Splide.State.is(IDLE)) {
  4836. sibling.go(index);
  4837. }
  4838. }
  4839. return Sync;
  4840. });
  4841. // CONCATENATED MODULE: ./src/js/components/breakpoints/index.js
  4842. /**
  4843. * The component for updating options according to a current window width.
  4844. *
  4845. * @author Naotoshi Fujita
  4846. * @copyright Naotoshi Fujita. All rights reserved.
  4847. */
  4848. /**
  4849. * Interval time for throttle.
  4850. *
  4851. * @type {number}
  4852. */
  4853. var THROTTLE = 50;
  4854. /**
  4855. * The component for updating options according to a current window width.
  4856. *
  4857. * @param {Splide} Splide - A Splide instance.
  4858. *
  4859. * @return {Object} - The component object.
  4860. */
  4861. /* harmony default export */ var components_breakpoints = (function (Splide) {
  4862. /**
  4863. * Store breakpoints.
  4864. *
  4865. * @type {Object|boolean}
  4866. */
  4867. var breakpoints = Splide.options.breakpoints;
  4868. /**
  4869. * The check function whose frequency of call is reduced.
  4870. *
  4871. * @type {Function}
  4872. */
  4873. var throttledCheck = throttle(check, THROTTLE);
  4874. /**
  4875. * Keep initial options.
  4876. *
  4877. * @type {Object}
  4878. */
  4879. var initialOptions;
  4880. /**
  4881. * An array containing objects of point and MediaQueryList.
  4882. *
  4883. * @type {Object[]}
  4884. */
  4885. var map = [];
  4886. /**
  4887. * Hold the previous breakpoint.
  4888. *
  4889. * @type {number|undefined}
  4890. */
  4891. var prevPoint;
  4892. /**
  4893. * Breakpoints component object.
  4894. *
  4895. * @type {Object}
  4896. */
  4897. var Breakpoints = {
  4898. /**
  4899. * Required only when the breakpoints definition is provided and browser supports matchMedia.
  4900. *
  4901. * @type {boolean}
  4902. */
  4903. required: breakpoints && matchMedia,
  4904. /**
  4905. * Called when the component is mounted.
  4906. */
  4907. mount: function mount() {
  4908. map = Object.keys(breakpoints).sort(function (n, m) {
  4909. return parseInt(n) - parseInt(m);
  4910. }).map(function (point) {
  4911. return {
  4912. point: point,
  4913. mql: matchMedia("(max-width:" + point + "px)")
  4914. };
  4915. });
  4916. /*
  4917. * To keep monitoring resize event after destruction without "completely",
  4918. * use native addEventListener instead of Splide.on.
  4919. */
  4920. this.destroy(true);
  4921. addEventListener('resize', throttledCheck); // Keep initial options to apply them when no breakpoint matches.
  4922. initialOptions = Splide.options;
  4923. check();
  4924. },
  4925. /**
  4926. * Destroy.
  4927. *
  4928. * @param {boolean} completely - Whether to destroy Splide completely.
  4929. */
  4930. destroy: function destroy(completely) {
  4931. if (completely) {
  4932. removeEventListener('resize', throttledCheck);
  4933. }
  4934. }
  4935. };
  4936. /**
  4937. * Check the breakpoint.
  4938. */
  4939. function check() {
  4940. var point = getPoint();
  4941. if (point !== prevPoint) {
  4942. prevPoint = point;
  4943. var State = Splide.State;
  4944. var options = breakpoints[point] || initialOptions;
  4945. var destroy = options.destroy;
  4946. if (destroy) {
  4947. Splide.options = initialOptions;
  4948. Splide.destroy(destroy === 'completely');
  4949. } else {
  4950. if (State.is(DESTROYED)) {
  4951. State.set(CREATED);
  4952. Splide.mount();
  4953. }
  4954. Splide.options = options;
  4955. }
  4956. }
  4957. }
  4958. /**
  4959. * Return the breakpoint matching current window width.
  4960. * Note that Array.prototype.find is not supported by IE.
  4961. *
  4962. * @return {number|string} - A breakpoint as number or string. -1 if no point matches.
  4963. */
  4964. function getPoint() {
  4965. var item = map.filter(function (item) {
  4966. return item.mql.matches;
  4967. })[0];
  4968. return item ? item.point : -1;
  4969. }
  4970. return Breakpoints;
  4971. });
  4972. // CONCATENATED MODULE: ./src/js/components/index.js
  4973. /**
  4974. * Export components.
  4975. *
  4976. * @author Naotoshi Fujita
  4977. * @copyright Naotoshi Fujita. All rights reserved.
  4978. */
  4979. var COMPLETE = {
  4980. Options: components_options,
  4981. Breakpoints: components_breakpoints,
  4982. Controller: controller,
  4983. Elements: components_elements,
  4984. Track: components_track,
  4985. Clones: components_clones,
  4986. Layout: layout,
  4987. Drag: drag,
  4988. Click: click,
  4989. Autoplay: components_autoplay,
  4990. Cover: components_cover,
  4991. Arrows: components_arrows,
  4992. Pagination: components_pagination,
  4993. LazyLoad: lazyload,
  4994. Keyboard: keyboard,
  4995. Sync: sync,
  4996. A11y: a11y
  4997. };
  4998. var LIGHT = {
  4999. Options: components_options,
  5000. Elements: components_elements,
  5001. Controller: controller,
  5002. Track: components_track,
  5003. Clones: components_clones,
  5004. Layout: layout,
  5005. Drag: drag,
  5006. Arrows: components_arrows,
  5007. Pagination: components_pagination,
  5008. A11y: a11y
  5009. };
  5010. // CONCATENATED MODULE: ./build/module/module.js
  5011. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  5012. /**
  5013. * Export Splide class for import.
  5014. *
  5015. * @author Naotoshi Fujita
  5016. * @copyright Naotoshi Fujita. All rights reserved.
  5017. */
  5018. /**
  5019. * Export Splide class for import from other projects.
  5020. */
  5021. var module_Splide = /*#__PURE__*/function (_Core) {
  5022. _inheritsLoose(Splide, _Core);
  5023. function Splide(root, options) {
  5024. return _Core.call(this, root, options, COMPLETE) || this;
  5025. }
  5026. return Splide;
  5027. }(splide_Splide);
  5028. /***/ })
  5029. /******/ ]);
  5030. });