materialdesignweb VS Flickity

I wanted something that didn't require recompilation and allows me to extend built components. Like an Chip extends a Button. I needed something that allows modification of its HTML template and layering of CSS styles on top of an extended element's styles. Frameworks are pretty rigid in this regard and I wanted to write less code to make a smaller final deployment, instead of copy pasting or having to write complicated mixins and abstractions.

My phone is basically grayscale expect for really minor blue hue. I'm not sure why, and I know how the Material You theming works (built a framework around it).

For the curious: Test page - Source Code

Source: https://github.com/clshortfuse/materialdesignweb/tree/archive-md2/components

If you're tired of it, I've been maintaining my MD framework for more than 4 and a half years since 2018. And before that I was working with Google on the AngularJS implementation in 2015. So I've been looking at and working on the same styles for over 7 years.

Here is the JS for one of the components. Only Chrome natively understands it right now. The alternative is to use a element referencing the CSS, but will call FOUC on the first fetch.

Code

There is also a hacked fade version as discussed here: https://github.com/metafizzy/flickity/issues/26

Search for "class OptionsSelection extends HTMLElement". That should get you to the correct area of the JS file. Retina uses Flickity for the main image carousel and thumbnail carousels so should get familiar with that. https://flickity.metafizzy.co/

As always with development, it depends. Some carousels need a lot of features to meet requirements. If you need something really simple, use a css one. If you need a complex one e.g flickity then use that as making your own version of that would be unfeasable.

I'm working on a SvelteKit project, and I'm trying to import Flickity through CDN. I need to include the following element: ``, into my project, but SvelteKit doesn't allow multiple instances of a script element inside a single component.

Ah I see, thanks for the insight! From what I can see, Flickity supports lazy loading and is vanilla JS https://github.com/metafizzy/flickity

I am trying to make some responsive carousel cards and I found Flickity (https://flickity.metafizzy.co/)