Magazine Tabbed Carousel with autoscroll #604

[santi-homps]

Fix #604

Test URLs:

• Before: https://develop--vg-macktrucks-com--hlxsites.hlx.page/drafts/shomps/v2-magazine-tabbed-carousel
• After: https://604-mgz-tabbed-carousel--vg-macktrucks-com--hlxsites.hlx.page/drafts/shomps/v2-magazine-tabbed-carousel

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

• [ ] Re-run PSI checks
• [ ] Re-sync branch

Commits

* [c13f875](https://github.com/hlxsites/vg-macktrucks-com/commit/c13f875cc7765356077970b5de50c76a6c93c5d1) :white_check_mark: (latest) * [5011de8](https://github.com/hlxsites/vg-macktrucks-com/commit/5011de8c0965b89b572a48f652239c8c299fee44) :white_check_mark: * [2b1d880](https://github.com/hlxsites/vg-macktrucks-com/commit/2b1d880c591f151870a205ee39b60782f958ff27) :white_check_mark: * [3ee5e38](https://github.com/hlxsites/vg-macktrucks-com/commit/3ee5e38ae221359113386225d6dc1e686b9ef4b3) :white_check_mark: * [c5a94b1](https://github.com/hlxsites/vg-macktrucks-com/commit/c5a94b180c53df849aa19e02776a54058e3d8960) :white_check_mark: * [6c9f713](https://github.com/hlxsites/vg-macktrucks-com/commit/6c9f713d1350ab31b242f58bf9cffd262e81a20b) :white_check_mark: * [083bada](https://github.com/hlxsites/vg-macktrucks-com/commit/083badac82ddaded491924d744f5d263a661e9b6) :white_check_mark: * [6a70351](https://github.com/hlxsites/vg-macktrucks-com/commit/6a7035199a151d99f486d8a601711da1282b6c77) :white_check_mark: * [3e0583c](https://github.com/hlxsites/vg-macktrucks-com/commit/3e0583cf17d8f2306b7216621da073aeda4ef46b) :white_check_mark: * [5d3af84](https://github.com/hlxsites/vg-macktrucks-com/commit/5d3af8476064c1e4be5412cfa992739f542f1c58) :white_check_mark: * [0430fb4](https://github.com/hlxsites/vg-macktrucks-com/commit/0430fb47393af05cf86519b73e6f0734cba16c98) :white_check_mark: * [543bad4](https://github.com/hlxsites/vg-macktrucks-com/commit/543bad4ff465709bbcc13ea6e40244704a379822) :white_check_mark: * [d47e1a1](https://github.com/hlxsites/vg-macktrucks-com/commit/d47e1a134ca174f0e57a01982fc6852edf1b2d53) :white_check_mark: * [5533819](https://github.com/hlxsites/vg-macktrucks-com/commit/553381980e0e78aed897077bdc2d8aae3b8bc80c) :white_check_mark: * [1cc80b5](https://github.com/hlxsites/vg-macktrucks-com/commit/1cc80b524eeb6deb2f93c3f7812d355095e21a38) :white_check_mark: * [e9d062e](https://github.com/hlxsites/vg-macktrucks-com/commit/e9d062eab13fc9e7a87f41f94c0002a6114b165b) :white_check_mark: * [8ac0406](https://github.com/hlxsites/vg-macktrucks-com/commit/8ac0406086319064dbc5589b87aba48085258500) :white_check_mark: * [0d9fbf6](https://github.com/hlxsites/vg-macktrucks-com/commit/0d9fbf69c2ec1f92ee53065ab170160d442fe2d2) :white_check_mark:

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/shomps/v2-magazine-tabbed-carousel

[jonatan-lledo-netcentric]

In the demo page, if there are less than 4 tabs, the scroll animation breaks. Also, if there is more than 1 block, the scrolling effect doesn't work always for all the blocks there

[amglebihan]

• When the auto scrolling mode is on and you click on an item, it seems that it switches too fast (or even instantly) to the next tab.
• Also, the styling of the active item changes in a weird manner sometimes.
• Should we handle other background colors? I guess that we could make use of CSS variables in more places if it should be the case.