glider-js

<!DOCTYPE HTML> <html> <head>  <title>Glider.js - A fast, lightweight carousel alternative</title> <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> <link rel="canonical" href="https://nickpiscitelli.github.io/Glider.js/" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <link rel="stylesheet" href="assets/css/prism.css" /> <link rel="stylesheet" href="assets/css/main.css" /> <link rel="canonical" href="https://nickpiscitelli.github.io/Glider.js" /> <noscript> <link rel="stylesheet" href="assets/css/noscript.css" /> </noscript> <script src="assets/js/glider-compat.min.js"></script> <script src="assets/js/glider.min.js"></script> </head> <body class="is-preload">  <div id="wrapper">  <header id="header" class="alt"> <span class="logo"><img src="images/logo.svg" alt="" /></span> <h1>Glider.js</h1> <p> A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling list with paging controls! </p> <p> <a href="https://github.com/NickPiscitelli/Glider.js" class="button github"> <img class="octo" src="images/octo.png" > <span class="mobileHide">View</span> Github </a>   <a onclick="ga('send','event','Download Button');" href="https://github.com/NickPiscitelli/Glider.js/archive/master.zip" class="button"> Download <span class="mobileHide">Now</span> <i class="zip fas fa-download dl-icon"></i> </a> </p> </header>  <nav id="nav"> <ul> <li><a href="#intro" class="active">Introduction</a></li> <li><a href="#demos">Demos</a></li> <li><a href="#usage">Usage</a></li> <li><a href="#settings">Settings</a></li> <li><a href="#events">Events</a></li> <li><a href="#methods">Methods</a></li> <li><a href="#faq">FAQ</a></li> </ul> </nav>  <div id="main">  <section id="intro" class="main"> <div class="spotlight"> <div class="content"> <header class="major"> <h2>What is Glider.js?</h2> </header> <p> Glider.js was born out of a frustration for carousels, especially on mobile devices. Inspired by the well-known Slick.js, Glider.js aims to be a fast, lightweight, responsive, unopinionated, dependency-free carousel alternative. Glider.js is not truly a carousel; it lacks the defining carousel feature, infinite looping. Without support for looping, Glider.js retains the ability to use native scrolling creating a natural feel on any touch enabled devices, while still providing the basic carousel aesthetic and functionality (great for desktop!) </p> <p> <a href="#demos" class="smooth-scroll">Check out the demos below!</a> </p> <header class="major"> <h2>Features</h2> </header> <ul class="script-features"> <li><i class="fas fa-check"></i>Insanely Small (< 2.8kb gzipped!)</li> <li><i class="fas fa-check"></i>Ridiculously Fast (as low as 25ms initilization!)</li> <li><i class="fas fa-check"></i>Vanilla JS - No Dependencies (look Mom, no jQuery!)</li> <li><i class="fas fa-check"></i>Native Browser Scroll (momentum scrolling!)</li> <li><i class="fas fa-check"></i>Fully Responsive (breakpoint based settings)</li> <li><i class="fas fa-check"></i>Customizable Arrow and Dot Navigation</li> <li><i class="fas fa-check"></i>Full Keyboard Accessibility + ARIA Labeling</li> <li><i class="fas fa-check"></i>Mouse Dragging Support!</li> <li><i class="fas fa-check"></i>Flexbox Support (enabled by default)</li> <li><i class="fas fa-check"></i>Easily Extendable</li> <li><i class="fas fa-check"></i>Custom Events</li> <li><i class="fas fa-check"></i>and much more!</li> </ul> </div> </div> </section>  <section id="demos" class="main special"> <header class="major"> <h2>Demos</h2> </header> <div class="demo first"> <h2>Single Item</h2> <div data-name="Single Item" class="glider-contain"> <div class="gradient-border-bottom"> <div class="gradient-border"> <div class="glider" id="glider-single"> <div><h1>1</h1></div> <div><h1>2</h1></div> <div><h1>3</h1></div> <div><h1>4</h1></div> <div><h1>5</h1></div> <div><h1>6</h1></div> <div><h1>7</h1></div> <div><h1>8</h1></div> <div><h1>9</h1></div> <div><h1>10</h1></div> </div> </div> </div> <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev"><i class="fa fa-chevron-left"></i></i></button> <button role="button" aria-label="Next" class="glider-next" id="glider-next"><i class="fa fa-chevron-right"></i></i></button> <div id="dots"></div> </div> <script> window.addEventListener('load', function(){ new Glider(document.getElementById('glider-single'), { slidesToShow: 1, dots: '#dots', draggable: true, arrows: { prev: '#glider-prev', next: '#glider-next' }, easing: function (x, t, b, c, d) { return c*(t/=d)*t + b; } }); }); </script> <pre class="line-numbers language-javascript"> <code class="line-numbers language-javascript"> new Glider(document.querySelector('.glider'), { slidesToShow: 1, dots: '#dots', draggable: true, arrows: { prev: '.glider-prev', next: '.glider-next' } }); </code> </pre> </div> <div class="demo"> <h2>Multiple Item</h2> <div data-name="Multiple Item" class="glider-contain multiple"> <div class="gradient-border-bottom"> <div class="gradient-border"> <div class="glider" id="glider-double"> <div><h1>1</h1></div> <div><h1>2</h1></div> <div><h1>3</h1></div> <div><h1>4</h1></div> <div><h1>5</h1></div> <div><h1>6</h1></div> <div><h1>7</h1></div> <div><h1>8</h1></div> <div><h1>9</h1></div> <div><h1>10</h1></div> <div><h1>11</h1></div> <div><h1>12</h1></div> <div><h1>13</h1></div> <div><h1>14</h1></div> <div><h1>15</h1></div> <div><h1>16</h1></div> <div><h1>17</h1></div> <div><h1>18</h1></div> </div> </div> </div> <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-2"><i class="fa fa-chevron-left"></i></i></button> <button role="button" aria-label="Next" class="glider-next" id="glider-next-2"><i class="fa fa-chevron-right"></i></i></button> <div id="dots2"></div> </div> <script> window.addEventListener('load', function () { window.glides = new Glider(document.getElementById('glider-double'), { slidesToShow: 5, slidesToScroll: 5, draggable: true, dots: '#dots2', arrows: { prev: '#glider-prev-2', next: '#glider-next-2' } }) }); </script> <pre class="line-numbers language-javascript"> <code class="line-numbers language-javascript"> new Glider(document.querySelector('.glider'), { slidesToShow: 5, slidesToScroll: 5, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' } }); </code> </pre> </div> <div class="demo persp"> <h2>Perspective View<span class="aside">(themeable CSS)</span></h2> <div data-name="Perspective View" class="glider-contain multiple"> <div class="glider glider-persp" id="glider-persp"> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>1</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>2</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>3</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>4</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>5</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>6</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>7</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>8</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>9</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>10</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>11</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>12</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>13</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>14</h1></div></div></div> <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>15</h1></div></div></div> </div> <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-per"><i class="fa fa-chevron-left"></i></i></button> <button role="button" aria-label="Next" class="glider-next" id="glider-next-per"><i class="fa fa-chevron-right"></i></i></button> <div id="dots-per"></div> </div> <script> window.addEventListener('load', function () { window.glides = new Glider(document.getElementById('glider-persp'), { slidesToShow: 5, slidesToScroll: 1, draggable: true, dots: '#dots-per', arrows: { prev: '#glider-prev-per', next: '#glider-next-per' } }) }); </script> <pre class="line-numbers language-javascript"> <code class="line-numbers language-javascript"> new Glider(document.querySelector('.glider'), { slidesToShow: 5, slidesToScroll: 1, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' } }); </code> </pre> <span class="aside">* Custom CSS Required</span> </div> <div class="demo"> <h2>Responsive Settings / Scroll Lock Support</h2> <div data-name="Responsive Settings" class="glider-contain multiple"> <div class="gradient-border-bottom"> <div class="gradient-border"> <div class="glider" id="glider-resp"> <div><h1>1</h1></div> <div><h1>2</h1></div> <div><h1>3</h1></div> <div><h1>4</h1></div> <div><h1>5</h1></div> <div><h1>6</h1></div> <div><h1>7</h1></div> <div><h1>8</h1></div> <div><h1>9</h1></div> <div><h1>10</h1></div> </div> </div> </div> <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-resp"><i class="fa fa-chevron-left"></i></i></button> <button role="button" aria-label="Next" class="glider-next" id="glider-next-resp"><i class="fa fa-chevron-right"></i></i></button> <div id="resp-dots"></div> </div> <script> window.addEventListener('load',function(){ new Glider(document.querySelector('#glider-resp'), { // Mobile-first defaults slidesToShow: 1, slidesToScroll: 1, scrollLock: true, dots: '#resp-dots', arrows: { prev: '#glider-prev-resp', next: '#glider-next-resp' }, responsive: [ { breakpoint: 775, settings: { slidesToShow: 'auto', slidesToScroll: 'auto', itemWidth: 150, duration: 0.25 } },{ breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1, itemWidth: 150, duration: 0.25 } } ] }) }); </script> <pre class="line-numbers language-javascript"> <code class="line-numbers language-javascript"> new Glider(document.querySelector('.glider'), { // Mobile-first defaults slidesToShow: 1, slidesToScroll: 1, scrollLock: true, dots: '#resp-dots', arrows: { prev: '.glider-prev', next: '.glider-next' }, responsive: [ { // screens greater than >= 775px breakpoint: 775, settings: { // Set to `auto` and provide item width to adjust to viewport slidesToShow: 'auto', slidesToScroll: 'auto', itemWidth: 150, duration: 0.25 } },{ // screens greater than >= 1024px breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1, itemWidth: 150, duration: 0.25 } } ] }); </code> </pre> </div> <div class="demo"> <h2>Fractional Slides</h2> <div data-name="Fractional Slides" class="glider-contain multiple"> <div class="gradient-border-bottom"> <div class="gradient-border"> <div class="glider" id="glider-cut"> <div><h1>1</h1></div> <div><h1>2</h1></div> <div><h1>3</h1></div> <div><h1>4</h1></div> <div><h1>5</h1></div> <div><h1>6</h1></div> <div><h1>7</h1></div> <div><h1>8</h1></div> <div><h1>9</h1></div> <div><h1>10</h1></div> <div><h1>11</h1></div> <div><h1>12</h1></div> <div><h1>13</h1></div> <div><h1>14</h1></div> <div><h1>15</h1></div> <div><h1>16</h1></div> <div><h1>17</h1></div> <div><h1>18</h1></div> <div><h1>19</h1></div> <div><h1>20</h1></div> <div><h1>21</h1></div> <div><h1>22</h1></div> <div><h1>23</h1></div> <div><h1>24</h1></div> </div> </div> </div> <button role="button" aria-label="Previous" class="glider-prev" id="cut-prev"><i class="fa fa-chevron-left"></i></i></button> <button role="button" aria-label="Next" class="glider-next" id="cut-next"><i class="fa fa-chevron-right"></i></i></button> <div role="tablist" id="frac-dots"></div> </div> <script> window.addEventListener('load',function(){ var glider = new Glider(document.getElementById('glider-cut'), { slidesToScroll: 1, slidesToShow: 5.5, draggable: true, dots: '#frac-dots', arrows: { prev: '#cut-prev', next: '#cut-next' } }); }) </script> <pre class="line-numbers language-javascript"> <code class="line-numbers language-javascript"> new Glider(document.querySelector('.glider'), { slidesToScroll: 1, slidesToShow: 5.5, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' } }); </code> </pre> </div> <div class="demo"> <div id="add"><h1></h1></div> <h2>Add/Remove Items</h2> <div data-name="Add/Remove Items" class="glider-contain multiple"> <div class="gradient-border-bottom"> <div class="gradient-border"> <div class="glider" id="glider-add"> <div><h1>1</h1></div> <div><h1>2</h1></div> <div><h1>3</h1></div> <div><h1>4</h1></div> <div><h1>5</h1></div> <div><h1>6</h1></div> <div><h1>7</h1></div> <div><h1>8</h1></div> <div><h1>9</h1></div> </div> </div> </div> <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-add"><i class="fa fa-chevron-left"></i></i></button> <button role="button" aria-label="Next" class="glider-next" id="glider-next-add"><i class="fa fa-chevron-right"></i></i></button> <div id="add-dots"></div> </div> <p class="buttons"> <a class="button" id="addSlide">Add</a> <a class="button" id="removeSlide">Remove</a> </p> <script> window.addEventListener('load',function(){ var glider = new Glider(document.getElementById('glider-add'), { slidesToShow: 3, duration: .6, dots: '#add-dots', arrows: { prev: '#glider-prev-add', next: '#glider-next-add' } }); document.getElementById('addSlide').addEventListener('click',function(){ var ele = document.getElementById('add').cloneNode(true); ele.id = ''; ele.querySelector('h1').textContent = glider.slides.length + 1; glider.addItem(ele); try{ ga('send','event','Add/Remove Item', 'Add') } catch(ex){} }); document.getElementById('removeSlide').addEventListener('click',function(){ glider.removeItem(glider.slides.length - 1); try{ ga('send','event','Add/Remove Item', 'Remove') } catch(ex){} }); }) </script> <pre class="line-numbers language-javascript"> <code class="line-numbers language-javascript"> new Glider(document.querySelector('.glider'), { slidesToShow: 3, dots: '#dots', arrows: { prev: '.glider-prev', next: '.glider-next' } }); </code> </pre> </div>   <section id="usage" class="main code special"> <header class="major"> <h2>Getting Started</h2> </header> <p> The following minimal HTML structure is required: </p> <pre class="line-numbers language-html"> <code class="line-numbers language-html"> <div class="any-class"> <div></div> <div></div> <div></div> <div></div> </div> </code> </pre> <p> A more comprehensive example with all paging controls would look something like this: </p> <pre class="line-numbers language-html"> <code class="line-numbers language-html"> <div class="glider-contain"> <div class="glider"> <div>your content here</div> <div>your content here</div> <div>your content here</div> <div>your content here</div> </div> <button role="button" aria-label="Previous" class="glider-prev">«</button> <button role="button" aria-label="Next" class="glider-next">»</button> <div role="tablist" class="dots"></div> </div> </code> </pre> <p> Include Glider.js in your document before the </body> tag: </p> <pre class="line-numbers language-html"> <code class="line-numbers language-html"> <script src="glider.js"></script> </code> </pre> <p> Include the required CSS in your <head> tag </p> <pre class="line-numbers language-html"> <code class="line-numbers language-html"> <link rel="stylesheet" type="text/css" href="glider.css"> </code> </pre> <p> Initialize Glider.js inline or via your script files </p> <pre class="line-numbers language-javascript"> <code class="line-numbers language-javascript"> window.addEventListener('load', function(){ new Glider(document.querySelector('.glider'), { setting-name: setting-value }) }) </code> </pre> <p> That's it! You're done! </p> </section>  <section id="settings" class="main special"> <header class="major"> <h2>Settings</h2> </header> <ul class="settings"> <li> <span class="setting-name">slidesToShow</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a><br> <span class="type default">Default:</span> 1<br> The number of slides to show in container<br> If this value is set to <code class="slim slimmer">auto</code>, it will be automatially calcuated based upon the number of items able to fit within the container viewport. This requires setting the <code class="slim slimmer">itemWidth</code> option. </li> <li> <span class="setting-name">slidesToScroll</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a><br> <span class="type default">Default:</span> 1<br> The number of slides to scroll when <b>arrow</b> navigation is used<br> If this value is set to <code class="slim slimmer">auto</code>, it will match the value of <code class="slim slimmer">slidesToScroll</code>. </li> <li> <span class="setting-name">arrows</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a><br> <span class="type default">Default:</span> undefined<br> An object containing the prev/next arrow settings<br> <span class="indent"> <span class="type">Keys:</span> prev | next<br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> (HTML Selector)<br> </span> </li> <li> <span class="setting-name">dots</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> (HTML Selector)<br> <span class="type default">Default:</span> undefined<br> An HTML element or selector containing the dot container<br> </li> <li> <span class="setting-name">itemWidth</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br> <span class="type default">Default:</span> undefined<br> This value is ignored unless <code class="slim slimmer">slidesToShow</code> is set to <code class="slim slimmer">auto</code>, in which it is then required. </li> <li> <span class="setting-name">exactWidth</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> undefined<br> This prevents resizing items to fit when <code class="slim slimmer">slidesToShow</code> is set to auto. <span class="aside">NOTE: This will yield fractional slides if your container is not sized appropriately</span> </li> <li> <span class="setting-name">scrollLock</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> false<br> If true, Glider.js will scroll to the nearest slide after any scroll interactions </li> <li> <span class="setting-name">scrollLockDelay</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br> <span class="type default">Default:</span> 250<br> When <code class="slim slimmer">scrollLock</code> is set, this is the delay in milliseconds to wait before the scroll happens </li> <li> <span class="setting-name">resizeLock</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> true<br> If true, Glider.js will lock to the nearest slide on resizing of the window </li> <li> <span class="setting-name">responsive</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a> of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Objects</a> [{}]<br> <span class="type default">Default:</span> undefined<br> An object containing custom settings per provided breakpoint. See demo for details. <span class="aside">NOTE: All responsive calculation are provided "mobile-first".</span> </li> <li> <span class="setting-name">rewind</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> false<br> If true, Glider.js will scroll to the beginning/end when it's respective endpoint is reached </li> <li> <span class="setting-name">scrollPropagate</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> false<br> Whether or not to release the scroll events from the container </li> <li> <span class="setting-name">draggable</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> false<br> If true, the list can be scrolled by click and dragging with the mouse </li> <li> <span class="setting-name">dragVelocity</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br> <span class="type default">Default:</span> 3.3<br> How much to aggravate the velocity of the mouse dragging </li> <li> <span class="setting-name">duration</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br> <span class="type default">Default:</span> 0.5<br> An aggravator used to control animation speed. <br>Higher is slower!<br> </li> <li> <span class="setting-name">scrollPropagate</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> false<br> Whether or not to release the scroll events from the container </li> <li> <span class="setting-name">propagateEvent</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> true<br> Whether or not Glider.js events should bubble (useful for binding events to all carousels) </li> <li> <span class="setting-name">skipTrack</span><br> <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br> <span class="type default">Default:</span> false<br> Whether or not Glider.js should skip wrapping it's children with a 'glider-track' <div>. <span class="aside">NOTE: If true, Glider.js will assume that the 'glider-track' element has been added manually. All slides must be children of the track element.</span> </li> </ul> </section> <section id="events" class="main special"> <header class="major"> <h2>Events</h2> <p> A lit of custom events provided by Glider.js. Due to the unobtrusive nature of Glider.js, all standard events (scroll, click, etc) can be bound to their elements as normal. </p> </header> <ul class="settings"> <li> <span class="setting-name">glider-loaded</span><br> Called after Glider.js is first initialized<br> </li> <li> <span class="setting-name">glider-refresh</span><br> Called whenever Glider.js refreshes it's elements or settings<br> </li> <li> <span class="setting-name">glider-animated</span><br> Called whenever a Glider.js paging animation is complete </li> <li> <span class="setting-name">glider-add</span><br> Called whenever an item is added to Glider.js </li> <li> <span class="setting-name">glider-remove</span><br> Called whenever a Glider.js animation is complete </li> <li> <span class="setting-name">glider-destroy</span><br> Called whenever a Glider.js is destroyed </li> <li> <span class="setting-name">glider-slide-visible</span><br> Called whenever a slide a shown. Passed an object containing the slide index </li> <li> <span class="setting-name">glider-slide-hidden</span><br> Called whenever a slide a hidden. Passed an object containing the slide index </li> </ul> <p class="little-margin"><b>Event Example - Lazy Loading Images</b></p> <p> A reference to the Glider.js object can be retrieved by re-calling Glider.js with the glider elements as it's sole argument: <code class="slim">var glider = Glider(document.querySelector('.glider'));</code>. Any custom event data is passed via the event, located at <code class="slim">event.detail</code> </p> <pre class="wide language-javascript"> <code class="language-javascript"> // example event hook implementing basic lazy loading images // appropriate image CSS (opacity/transform) must be set to work document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){ var imgs_to_anticipate = 3; var glider = Glider(this); for (var i = 0; i <= imgs_to_anticipate; ++i){ var index = Math.min(event.detail.slide + i, glider.slides.length - 1), glider = glider; loadImages.call(glider.slides[index],function(){ glider.refresh(true); }) } }); function loadImages(callback){ [].forEach.call(this.querySelectorAll('img'),function(img){ var _img = new Image, _src = img.getAttribute('data-src'); _img.onload = function(){ img.src = _src; img.classList.add('loaded'); callback && callback(img); } if(img.src !== _src) _img.src = _src; }); } </code> </pre> <p> <a data-collapse="css-collapse" class="collapse-control" href="#">Click to show lazy loading CSS</a> </p> <div id="css-collapse" class="collapse"> <pre class="langugae-css"> <code class="language-css"> // example css .glider-slide img { opacity: 0; transform: opacity .1s ease; } .glider-slide img.loaded { opacity: 1; } </code> </pre> </div> </section> <section id="methods" class="main special"> <header class="major"> <h2>Methods</h2> <p>Methods are called directly on the Glider object returned from initilization.</p> <p class="little-margin"><b>Examples:</b></p> <pre class="language-javascript"> <code class="language-javascript"> var glider = new Glider(document.getElementById('glider'), { slidesToShow: 1, dots: '#dots', }); glider.setOption({ arrows: { prev: '#glider-prev', next: '#glider-next' } }); // a refresh may need to be called depending // upon the options passed to setOptions glider.refresh(true); // adding or removing items automatically calls refresh() glider.removeItem(4); // death to smoochy! glider.destroy(); </code> </pre> </header> <ul class="settings"> <li> <span class="setting-name">addItem(<span class="arguments">element</span>)</span><br> <span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a><br> Add an item to the list<br> </li> <li> <span class="setting-name">removeItem(<span class="arguments">itemIndex</span>)</span><br> <span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br> Remove an item from the list<br> <span class="aside">NOTE: Slide position starts at 0, not 1!</span> </li> <li> <span class="setting-name">setOption(<span class="arguments">arguments, global</span>)</span><br> <span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> <br> Overrides options set during initialization. If called when a breakpoint is active, the settings for the active breakpoint are updated.<br> If second argument is true, the global settings are updated regardl