Added Vertical Slide Transition to Carousel

[jarihant701]

New vertical slide transition is added by adding new carousel-vertical class and added transition to translate it in Y direction

Preview: https://deploy-preview-32988--twbs-bootstrap.netlify.app/docs/5.0/components/carousel/#vertical-slide

TODO:

• Move indicators a bit to the left?
• Fix swipe

[XhmikosR]

Hey, thanks for the contribution. Please try to add a docs example too.

[jarihant701]

Hey, thanks for the contribution. Please try to add a docs example too.

I am new to contributing to Open Source and this is my first pull request so can you please elaborate this. If you are saying that I should include the working example that if this code is working or not so I am including a codepen link with its execution hope this helps.
https://codepen.io/jarihant701/full/wvoGaqY

[XhmikosR]

We need a working example on https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/carousel.md otherwise no one will know about this :)

Check the other examples on that page regarding how to add a new one.

[jarihant701]

We need a working example on https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/carousel.md otherwise no one will know about this :)

Check the other examples on that page regarding how to add a new one.

I have made the necessary changes. I suppose now this is good. Thank You.

[XhmikosR]

I marked the PR as draft because it's not ready. Please clone locally and set up the tooling before marking it as ready.

[jarihant701]

I marked the PR as draft because it's not ready. Please clone locally and set up the tooling before marking it as ready.

Sorry for such inconvenience caused but I am new to contributing to open source. But now I have watched some tutorials to see where I go wrong and fixed all the issues. If you think the latest commit is ready for review you can mark this open for review. Or if this had any more problem please let me know. Thank you for your guidance. :)

[XhmikosR]

Now it's good, thanks!

@twbs/css-review seems to work good enough, not sure if we should mention this in the migration notes.

[jarihant701]

Now it's good, thanks!

@twbs/css-review seems to work good enough, not sure if we should mention this in the migration notes.

Can you please tell me what are migration notes and if they need my contribution. Thank you for your commit😁

[mdo]

Would we reorient the carousel captions and controls for this? Clicking on left/right arrows that trigger something up/down doesn't feel right.

[XhmikosR]

Agreed, it sort of feels unnatural

[jarihant701]

Would we reorient the carousel captions and controls for this? Clicking on left/right arrows that trigger something up/down doesn't feel right.

I made some changes regarding this hope this looks good.
Preview for this : https://deploy-preview-32988--twbs-bootstrap.netlify.app/docs/5.0/components/carousel/#vertical-slide

[XhmikosR]

@jarihant701 please do this assuming you have an upstream remote

git fetch upstream
git checkout vertical-carousel-transition
git rebase -i upstream/master # and drop any unrelated patches
git push -f

[XhmikosR]

Any reason why you don't use our border-radius mixin?

[jarihant701]

What is mixin? Never heard of it.
First I wrote border-radius: 50% but when I run npm run test it give me error that border-radius is not allowed so I saw in the spinner.md that they have included this CSS comment above the line and I did the same amd it worked so I keep it this way.

[XhmikosR]

Yeah, it's not allowed for a reason :) We have internal mixins we use, see the scss/mixins folder.

[jarihant701]

I have now updated the file to use scss mixin. Hope this is what you wanted to do. Thank You.

[XhmikosR]

I don't think it's right, though. It should be 50%, now it's 50rem. Maybe it's a limitation of the mixin. If so, you might need to revert to your previous solution.

[jarihant701]

But I don't think that is gonna pose any problem because if we provide a radius of 50rem so it will eventually made that indicator in a circle which is our ultimate goal so reverting to previous version don't make difference.

[XhmikosR]

What you have right now doesn't work

[jarihant701]

Can you tell me the git command to revert to the previous commit i.e. commit 6f2d5c5 to undo these mixin changes. Thank you
Edit: Nevermind made new commits and reverted to previous one.

[GeoSot]

Guys, just a note. Carousel has js code that listens swipes too (for now only left/right)

[mdo]

Looking at this, we'd need to figure out the touch controls. Right now the staging PR has the horizontal swiping reversed—so that's also a bug that needs fixing. Going to close this one out as stale for now, but happy to re-open or see a new PR if @jarihant701 is into it.