Missing Carousel

Question

Missing Carousel

bestguy opened this issue 5 years ago · comments

Carousel is not implemented:
https://getbootstrap.com/docs/4.3/components/carousel/

luciano ratamero · Answer 1 · Mon Nov 04 2019 07:51:02 GMT+0800 (China Standard Time)

hey, @bestguy , good evening!

I spent some time trying to figure the best approach on how to implement this (I'm still new to svelte), and I stumbled into this project here: https://github.com/thednp/bootstrap.native/

they seem to reimplement bootstrap plugins without jquery.
it could save us some time if we could make use of that to implement the Carousel, since the components would only need to render slots and the Carousel component could call their script.
I'm starting a little PoC here to see if things behave as intended.

in your opinion, should I keep trying to use it, or do you want to keep things native to svelte?

Gary Thomas · Answer 2 · Mon Nov 04 2019 13:13:14 GMT+0800 (China Standard Time)

Hi @lucianoratamero, thank you for the help.
Yes I have looked at that in the past, however there were some philosophic differences with the library's author in that he felt is was okay to deviate from Bootstrap's behavior, and generally closing all issues rapidly. Made me a little nervous to depend on it directly, but if you have a start that would be great!

It's under MIT license so we could also use/fork parts that are helpful for some components, but in any case please let me know what you find!

Gary Thomas · Answer 3 · Mon Nov 04 2019 13:17:30 GMT+0800 (China Standard Time)

Also if it helps, Reactstrap is a React version of Bootstrap components, and their implementation might be good inspiration/guidance: https://github.com/reactstrap/reactstrap/blob/master/src/Carousel.js

Dayton Lowell · Answer 4 · Wed Jan 01 2020 05:40:12 GMT+0800 (China Standard Time)

I'm playing around with implementing this. As far as the API is concerned, how much do we want to match what the BS jQuery JS does? Do we need to support data- attributes like data-slide="prev"?

Gary Thomas · Answer 5 · Wed Jan 01 2020 06:04:00 GMT+0800 (China Standard Time)

Thanks @daytonlowell , was thinking the component-based approach like Reactstrap Carousel uses: https://reactstrap.github.io/components/carousel/

would be a good approach for this.

Dayton Lowell · Answer 6 · Wed Jan 01 2020 12:05:50 GMT+0800 (China Standard Time)

I made a commit to my fork to add support for Carousel. Not ready to make a PR quite yet, but feel free to take a look and comment.

daytonlowell@88eedd8

Here's the state of things:

I'm not exactly sure how to handle transitions. I played around with wrapping the template code for CarouselItem in a {#if} block and played with some of the Svelte transitions. It was ok, but not great.

Dayton Lowell · Answer 7 · Wed Jan 01 2020 13:02:36 GMT+0800 (China Standard Time)

Keyboard support added in daytonlowell@0967235

We'll probably need to do something smarter so that the keyboard presses don't effect all carousels on the page?

Gary Thomas · Answer 8 · Thu Jan 02 2020 03:33:55 GMT+0800 (China Standard Time)

This is great @daytonlowell thank you! Let me pull and check it out later today, I appreciate the help.

Dayton Lowell · Answer 9 · Thu Jan 02 2020 11:50:48 GMT+0800 (China Standard Time)

Added initial support for ride, interval, and pause.

daytonlowell@bdd8662

Gary Thomas · Answer 10 · Sat Jan 04 2020 05:23:07 GMT+0800 (China Standard Time)

Looking great @daytonlowell !, what further changes are needed before PRing/merging?

Dayton Lowell · Answer 11 · Sat Jan 04 2020 05:40:35 GMT+0800 (China Standard Time)

Do we care about touch support right now? That's going to be harder. I don't really have any experience with the touch events. I assume we don't want to depend on hammer.js.

We still need to figure out how to support transition animations between items in a way that looks like the default BS animation(they support fade and slide).

Finally, I'd like it if we could better handle the behavior when moving between slides via keyboard when ride is enabled and via the controls when ride is enabled and pause isn't. It gets kinda wonky.

Maybe we need to temporarily disable ride for some amount of time when they perform a manual interaction. ride is already temporarily disabled when they're moused over the carousel if pause is enabled.

Touch support
Transition animation support
Improve ride behavior when manually interacting with the slides.

Gary Thomas · Answer 12 · Sat Jan 04 2020 09:07:54 GMT+0800 (China Standard Time)

Great update thanks. We can leave this pending and open for the near term, and see if we can add those. If not we can always release whatever is stable and leave the other points as issues for future releases

Stefan Uddenberg · Answer 13 · Thu Feb 11 2021 09:03:23 GMT+0800 (China Standard Time)

Is there any progress on adding support for transitions?

Dayton Lowell · Answer 14 · Thu Feb 11 2021 09:05:15 GMT+0800 (China Standard Time)

Not yet. Always looking for contributors though!

bwesth · Answer 15 · Mon Mar 15 2021 16:53:48 GMT+0800 (China Standard Time)

Simply copy-pasting the carousel component from sveltestrap yields this TS error

Type '{ items: string[]; activeIndex: number; }' is not assignable to type 'IntrinsicAttributes & ICarouselProps & LocalSvelteProps'.
Type '{ items: string[]; activeIndex: number; }' is missing the following properties from type 'ICarouselProps': next, previous
ts(2322)

Removing the ts dependency removes the errors, but I'm thinking this is not a desirable solution.
Are the examples updated?

Gary Thomas · Answer 16 · Fri Mar 19 2021 06:46:23 GMT+0800 (China Standard Time)

Hi @bwesth ,

This seems to work fine for me in TypeScript:

https://svelte.dev/repl/c7f5e86874c549809f4cfcc2829f0714?version=3.35.0

Can you confirm your build/imports?

Gary Thomas · Answer 17 · Fri Mar 19 2021 06:51:03 GMT+0800 (China Standard Time)

Oh it looks like we mark next and previous as required in TS: https://github.com/bestguy/sveltestrap/blob/master/src/Carousel.d.ts#L8

That may not be correct, but let me confirm soon. If not, we can release a new build with the correct types.

Gary Thomas · Answer 18 · Sat Mar 20 2021 23:18:52 GMT+0800 (China Standard Time)

Hi @bwesth ,

I think this should be corrected by: https://github.com/bestguy/sveltestrap/pull/241/files

Will release a new version this weekend, thanks for the heads up.

Muhammad Tayyab Sheikh · Answer 19 · Thu Aug 05 2021 06:26:57 GMT+0800 (China Standard Time)

Anyone working on fluid option for carousel? It sets class "container" of parent wrapper of Carousel but if we can provide option for container-fluid that would be great. If anyone isn't working on this I would be happy to implement this.

cc: @daytonlowell @bestguy