Live Demo

[clibu]

tiny-carousel sounds great however I can't find any online demo I can play with. Something like https://dimanech.github.io/scroll-snap-carousel/ would be great. Further I can't see any examples I could run myself.

A couple of questions:
Can carousel items vary in width?
Do all carousel items have to be children of a given element?

FYI my use case is in an app to slide between UI panels.

[FRSgit]

Hey, thanks for reaching out!

Currently all of the examples live in the usage section of our documentation. Scroll through the page and you'll find bunch of codepen widgets every one with a different use case covered.

I'll try to add an example using items with a different item width. Do you think that any other important examples are still missing?

I think that current implementation sets a requirement for slides to be children of a carousel element. Can you elaborate a bit more on what do you want to achieve?

[clibu]

Hi Jakub, thanks for the prompt reply.

I had seen the live examples which are good. I guess I'm more used non-live examples where you can see the code in full without having to scroll and the running code in a larger area. So on a tablet or phone the live examples aren't ideal to get a quick idea of the code and see it run. That said the live examples are good as I said, but maybe at https://www.frsource.org/tiny-carousel/ you could have some static html/js/css and the demo running. Right now you have to dig into the doc's to see this. Having an example on your home page would be nice IMO.

I've reworked my html so all carousel elements are now children, so all is well. I'll be adding tiny-carousel today and let you know how this goes.

[clibu]

Ok, so after changing the css to work as needed for my app I have tiny-carousel mostly working. However when I scroll horizontally with the arrow keys it does a small scroll, then on the next arrow press it scrolls to the next item. I've been trying to work out why the small h-scroll is happening, however I'm stuck as I'm unable to access the source in Chrome Dev Tools to debug it.

I'm using Parcel.js V1 and I suspect it is getting confused by the various index.ts files that are being bundled. ie. Yours and others. To be specific when I step into:

new TinyCarousel(
  document.querySelector('ul')
)  .init();

I see an index.ts which isn't tiny-carousel. I'm not expecting you to help with Parcel issues, but this inability to work through the code may prevent me from using it. I can see events.ts and limiters.ts but that's all so far.

[FRSgit]

I'd guess that "small h-scroll" is happening because of the overflow on some of the parent elements. Are you sure that the carousel element doesn't exceeds width of its parent?

I don't fully understand the problem with multiple indexes - you mean in the console's "source" panel?
Sorry, I wasn't working with Parcel V1 for quite a some time, so I need more description.
I'm more like an early adapter of V2 (btw. great that they finally have released the stable version 2 recently 🎉 ).

[clibu]

The small h-scroll was caused by a margin-left: 6px on the first child of carousel. I've moved that into a descendant of that child and all is well. It was only happening on this first child.

Yes I suspect that Dev Tools | Sources has multiple index.ts and index.js files fighting to be included in its src folder and it can only show one of each. So the index.ts it has included isn't the tiny-carousel one. Then when I step into TinyCarousel Dev Tools uses this incorrect index.ts. I'm hoping that this is a Parcel V1 issue, but maybe not.

It is time for me to try and migrate to Parcel V2. Hopefully it won't be too panful. BTW I did try Vite a while back, however on HMR, Chrome Dev Tools would loose all breakpoints because Vite changes the filename to force it to reload. This made it a non-starter for me.

FYI I'm in Australia hence the time lag in my replies.😀