I created the FASTEST slider library – Blaze Slider

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Manan Tank

Blaze slider is a high-performance JavaScript UI library for creating sliders.

Website: blaze-slider.dev

The Problem

Existing slider libraries are not designed with performance in mind. They block the main thread for a long time when initializing a slider which results in poor UX and poor FID metric for your website.

They also create layout shifts that negatively impact the UX and CLS metric of your website. These libraries don't provide any idiomatic way to reduce the layout shifts.

The Solution

Blaze slider is built to fix these issues. It can initialize the slider incredibly fast. It initializes the slider 30x faster than the Slick slider, and 15x faster than the Swiper slider.

Blaze Slider allows you to specify the layout configuration via CSS variables which enable slider initialization with zero layout shifts! - so that your slider will look exactly the same before and after javascript runs.

Benchmark

Benchmark measures the time taken to create a slider with 10 slides by each slider. Benchmark is measured on Apple M1 Pro CPU with 6X slowdown on Google Chrome 103

See Benchmark Repo to see how these libraries are tested

Highlights

• Fastest Slider Library
• Packed with Features
• Zero Layout Shifts
• Full TypeScript support
• CSS Media-Query-based Responsive configuration
• No slide cloning
• Extremely small bundle size (2kB)

Documentation

You can check out the documentation on the website blaze-slider.dev

The documentation is divided into several sections:

• Getting Start
• Installation
• Tutorial
• API Reference

Framework Integrations

Blaze Slider is framework agnostic - it can work with all frameworks, all it requires is the DOM element on which you want to initialize the slider and configuration object. Learn More

Here are some prebuilt integrations:

• React - react-blaze-slider

License

Blaze-slider is MIT licensed.

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Manan Tank

Print Share Comment Cite Upload Translate Updates

APA

Manan Tank | Sciencx (2022-10-22T15:07:05+00:00) I created the FASTEST slider library – Blaze Slider. Retrieved from https://www.scien.cx/2022/10/22/i-created-the-fastest-slider-library-blaze-slider/

MLA

" » I created the FASTEST slider library – Blaze Slider." Manan Tank | Sciencx - Saturday October 22, 2022, https://www.scien.cx/2022/10/22/i-created-the-fastest-slider-library-blaze-slider/

HARVARD

Manan Tank | Sciencx Saturday October 22, 2022 » I created the FASTEST slider library – Blaze Slider., viewed ,<https://www.scien.cx/2022/10/22/i-created-the-fastest-slider-library-blaze-slider/>

VANCOUVER

Manan Tank | Sciencx - » I created the FASTEST slider library – Blaze Slider. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/22/i-created-the-fastest-slider-library-blaze-slider/

CHICAGO

" » I created the FASTEST slider library – Blaze Slider." Manan Tank | Sciencx - Accessed . https://www.scien.cx/2022/10/22/i-created-the-fastest-slider-library-blaze-slider/

IEEE

" » I created the FASTEST slider library – Blaze Slider." Manan Tank | Sciencx [Online]. Available: https://www.scien.cx/2022/10/22/i-created-the-fastest-slider-library-blaze-slider/. [Accessed: ]

rf:citation

» I created the FASTEST slider library – Blaze Slider | Manan Tank | Sciencx | https://www.scien.cx/2022/10/22/i-created-the-fastest-slider-library-blaze-slider/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.