Responsive Slider Plugin with CSS3 Transitions - Glide.js
File Size: | 200 KB |
---|---|
Views Total: | 35506 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Glide.js is a lightweight, flexible jQuery slider/carousel plugin (ES6 JavaScript slider/carousel library) that helps you create responsive and touch-enabled sliders with fast and performant CSS3 transitions.
See also:
Features:
- Lightweight and easy-to-use
- Modular and extendable.
- Supports of swipe event on touch devices
- Arrows, bullets, and Keyboard navigation
- Auto play
- Pause on hover
- CSS3 transitions with fallback to older browsers
- Supports almost all the html elements
- Cross browser, supports all the modern web / mobile browsers
How to use it:
1. Install & download the library with NPM.
# NPM $ npm install @glidejs/glide --save
2. Import the Glide.js into your project.
// Core Stylesheet @import "node_modules/@glidejs/glide/src/assets/sass/glide.core"; // Theme Stylesheet @import "node_modules/@glidejs/glide/src/assets/sass/glide.theme"; import Glide from '@glidejs/glide'
3. Or directly load the JavaScript and CSS files in the document.
<!-- Local --> <link rel="stylesheet" href="dist/css/glide.core.min.css"> <link rel="stylesheet" href="dist/css/glide.theme.min.css"> <script src="dist/glide.min.js"></script> <!-- CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide@latest/dist/css/glide.core.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide@latest/dist/css/glide.theme.min.css"> <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide@latest/dist/glide.min.js"></script>
4. Create the html for the slides, pagination bullets and navigation arrows.
<div class="glide"> <!-- Slides here --> <div class="glide__track" data-glide-el="track"> <ul class="glide__slides"> <li class="glide__slide">Slide 1</li> <li class="glide__slide">Slide 2</li> <li class="glide__slide">Slide 3</li> </ul> </div> <!-- Navigation --> <div class="glide__arrows" data-glide-el="controls"> <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button> <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button> </div> <!-- Pagination --> <div class="glide__bullets" data-glide-el="controls[nav]"> <button class="glide__bullet" data-glide-dir="=0"></button> <button class="glide__bullet" data-glide-dir="=1"></button> <button class="glide__bullet" data-glide-dir="=2"></button> </div> </div>
5. Create custom controls for the slider (OPTIONAL).
<div data-glide-el="controls"> <button data-glide-dir="<">Previous</button> <button data-glide-dir=">">Next</button> <button data-glide-dir="<<">First</button> <button data-glide-dir=">>">Last</button> <button data-glide-dir="=1">Goto The Slide 2</button> </div>
6. Initialize the Glide.js with default settings. That's it.
new Glide('.glide').mount();
7. Possible options to customize the slider.
new Glide('.glide', { // Auto change slides after specifed interval. autoplay: 4000, // Slider type. // carousel, slider or slideshow. type: 'carousel', // Start slider at specifed slide number. startAt: 1, // Pause autoplay on mouseover the slider. hoverpause: true, // Change slide on left/right keyboard arrow press. keyboard: true, // The number of slides to show per screen perView: 1, // 'center' or 1,2,3... focusAt: 0, // Space between slides gap: 10, // Stop running perView number of slides from the end bound: false, // Minimal touch-swipe distance to need to change slide. // False for turning off touch. swipeThreshold: 80, // Maximum number of slides moved per single swipe or drag perTouch: false, // Alternate moving distance ratio of swiping and dragging touchRatio: .5, // Angle required to activate slides moving touchAngle: 45, // Minimal drag distance to need to change slide. // False for turning off drag. dragThreshold: 120, // Animation duration in ms. animationDuration: 400, // Animation easing CSS function. animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // Call the resize events at most once per every wait in milliseconds. throttle: 16, // Enable infinite loop on slider type rewind: true, // Duration of the rewinding animation rewindDuration: 800, // 'ltr' or 'rtl' direction: // The value of the future viewports which have to be visible in the current view // e.g. 100 or { before: 100, after: 50 } peek: 0, // Options applied at specified media breakpoints breakpoints: {}, // Default CSS classes classes: { direction: { ltr: 'glide--ltr', rtl: 'glide--rtl' }, slider: 'glide--slider', carousel: 'glide--carousel', swipeable: 'glide--swipeable', dragging: 'glide--dragging', cloneSlide: 'glide__slide--clone', activeNav: 'glide__bullet--active', activeSlide: 'glide__slide--active', disabledArrow: 'glide__arrow--disabled' } })
8. Properties & API methods.
// the current slide index glide.index // get the option value glide.settings.OptName // get the slider type glide.type // get the slider status glide.disabled // enable the slider glide.mount(); // update the option glide.update({ options here }); // play the slider glide.play(); // pause the slider glide.pause(); // enable the slider glide.enable(); // disable the slider glide.disable(); // destroy the slider glide.destroy(); // go to the next slide // see more in the controls section glide.go('>'); // check the slider type glide.isType('slider'); glide.isType('carousel');
9. Event handlers.
glide.on('mount.before', function() { // befoure mount }) glide.on('mount.after', function() { // after mount }) glide.on('update', function() { // after the settings changed }) glide.on('play', function() { // when playing }) glide.on('pause', function() { // when paused }) glide.on('build.before', function() { // before setting up a slider to its initial state }) glide.on('build.bafter', function() { // after setting up a slider to its initial state }) glide.on('run.before', function(move) { // before running }) glide.on('run', function(move) { // when running }) glide.on('run.after', function(move) { // after running }) glide.on('run.offset', function(move) { // after calculating new index and making a transition }) glide.on('run.start', function(move) { // after calculating the new index, but before making a transition }) glide.on('run.end', function(move) { // after calculating the new index, but before making a transition }) glide.on('move', function(movement) { // on move }) glide.on('move.after', function(movement) { // after moving }) glide.on('resize', function() { // on window resize }) glide.on('swipe.start', function() { // swipe.start }) glide.on('swipe.move', function() { // swipe.move }) glide.on('swipe.end', function() { // swipe.end }) glide.on('translate.jump', function(movement) { // before a translate applies })
Changelog:
v3.6.1 (2023-09-18)
- refactor: move to const variables and simplify conditionals
- bugfix
v3.6.0 (2022-09-27)
- feat: add toArray function to convert NodeList to Array
- remove deprecated event.keyCode and replace with event.code
- Add package.json "type" field
v3.5.2 (2021-11-29)
- build: Don't ignore dist/ folder on NPM, so it is available after installing a package
v3.5.1 (2021-11-23)
- Bugfix
v3.5.0 (2021-11-22)
- new cloningRation option
v3.4.0 (2019-09-20)
- new cloningRation option
v3.3.0 (2019-08-21)
- Update
2017-01-22
- Fixes problems with default events from anchors and images
2016-08-07
- Stop sliding when only having 1 image
2016-06-05
- [hotfix] Resize still fires after calling destroy
2016-03-17
- v2.0.7
2016-02-05
- Block multiple scrolling direction on mobile
2015-12-21
- Fix z-index on bullets
2015-11-08
- Fixed Slides not swiping on mobiles
2015-11-06
- v2.0.5
2015-08-22
- Bullets live event binding
2015-08-12
- Add missing namespace to resize.
2015-07-29
- Paddings option handle %, px, number values
- Fixing touch freezing; Performance fixes
2015-07-22
- v2.0.3
2015-07-13
- Swipe option callbacks
- Triggers can handle multiple targets
- Paddings option origin
2015-07-07
- fixed for destroy method.
2015-06-13
- Touch module various fixes
2015-06-06
- Prevent anchor clicks while dragging
2015-06-03
- Touch module fixes
2015-05-24
- fixes triggers binded multiple times
2015-05-15
- Added autoheight option
2015-05-04
- Fix some bugs and improve type "slider"
2015-04-30
- Touch module fixes and optimizations
2015-04-23
- v2.0.0
2014-11-25
- Single slide bug fix
- Added Bower support
2014-07-12
- Update to v1.0.65
2014-02-26
- Fix for older browser fallback
2014-02-21
- Fix for multiple sliders & events handlers refined
2014-02-20
- Fix for play/pause on hover event
2014-02-11
- fixed afterTransition callback.
2014-02-02
- Code refactoring. More readable, modular, scalar.
- Added circular slides changing
- Rename navigation options, make sure to update.
- Refined animation options. Now setted via plugin options. There is no longer need to set transition inside css file.
- New api method .reinit(). Rebuild and recalculate dimensions of slider elements.
2013-12-11
- Extend options & bug fixes
2013-12-06
- Little fixes: syntax, cleaning
v1.0.4 (2013-11-04)
- Refined swipe event
- Opera 12 supported.
This awesome jQuery plugin is developed by glidejs. For more Advanced Usages, please check the demo page or visit the official website.