{"_id":"@ampproject/amp-base-carousel","_rev":"110-fffd450b018c70050250b52faa7a7868","time":{"1.2105191214.2":"2021-05-19T16:35:41.972Z","created":"2021-05-26T22:35:53.929Z","1.2105242203.0":"2021-05-26T22:35:54.511Z","modified":"2022-04-04T13:52:32.503Z","1.2105270452.0":"2021-05-27T11:47:25.715Z","1.2105271708.0":"2021-05-27T19:13:39.104Z","1.2105280035.0":"2021-05-28T11:32:09.274Z","1.2105281634.0":"2021-05-29T11:24:47.985Z","1.2106012301.0":"2021-06-02T11:40:13.548Z","1.2106030132.0":"2021-06-03T11:22:32.504Z","1.2105210438.3":"2021-06-03T19:00:39.452Z","1.2106040012.0":"2021-06-04T11:18:51.484Z","1.2106060839.0":"2021-06-07T15:37:51.655Z","1.2106072053.0":"2021-06-08T17:23:57.528Z","1.2106090052.0":"2021-06-09T11:24:39.772Z","1.2106092357.0":"2021-06-10T11:26:14.969Z","1.2106102303.0":"2021-06-11T11:27:42.641Z","1.2106120107.0":"2021-06-12T11:26:00.769Z","1.2106141722.0":"2021-06-15T11:26:39.454Z","1.2106160500.0":"2021-06-16T11:23:04.026Z","1.2106162301.0":"2021-06-17T11:23:26.421Z","1.2106172254.0":"2021-06-18T11:24:41.677Z","1.2106182132.0":"2021-06-19T11:33:46.192Z","1.2106212012.0":"2021-06-22T11:29:57.683Z","1.2106222237.0":"2021-06-23T11:36:02.149Z","1.2106240350.0":"2021-06-24T11:30:15.695Z","1.2106260436.0":"2021-06-26T11:23:40.746Z","1.2106290147.0":"2021-06-29T11:34:22.763Z","1.2106292357.0":"2021-06-30T11:28:17.589Z","1.2106302324.0":"2021-07-01T11:39:09.071Z","1.2107012021.0":"2021-07-02T17:38:17.798Z","1.2107030008.0":"2021-07-03T11:34:44.259Z","1.2107072148.0":"2021-07-08T11:22:17.227Z","1.2107082341.0":"2021-07-09T11:19:51.031Z","1.2107092322.0":"2021-07-10T11:28:38.568Z","1.2107130206.0":"2021-07-13T11:45:16.735Z","1.2107030008.1":"2021-07-13T19:46:56.260Z","1.2107140004.0":"2021-07-14T11:25:36.761Z","1.2107150011.0":"2021-07-15T11:29:59.733Z","1.2107152117.0":"2021-07-16T11:20:57.921Z","1.2107170150.0":"2021-07-17T11:36:17.773Z","1.2107200040.0":"2021-07-20T11:19:28.993Z","1.2107202252.0":"2021-07-21T11:26:12.043Z","1.2107212010.0":"2021-07-22T16:48:59.745Z","1.2107230121.0":"2021-07-23T11:34:50.112Z","1.2107240354.0":"2021-07-24T11:23:54.831Z","1.2107280004.0":"2021-07-28T18:54:13.405Z","1.2107282214.0":"2021-07-29T11:43:36.033Z","1.2107300532.0":"2021-07-30T11:39:43.177Z","1.2107302322.0":"2021-07-31T11:28:22.352Z","1.2108030112.0":"2021-08-03T11:41:40.407Z","1.2108040347.0":"2021-08-04T11:28:21.352Z","1.2108050645.0":"2021-08-05T11:19:31.809Z","1.2108052321.0":"2021-08-06T11:28:10.612Z","1.2108100143.0":"2021-08-10T11:34:52.610Z","1.2108101942.0":"2021-08-11T11:51:00.346Z","1.2108112212.0":"2021-08-12T21:29:07.837Z","1.2107302322.1":"2021-08-12T22:45:06.217Z","1.2108130315.0":"2021-08-13T11:36:02.528Z","1.2108132216.0":"2021-08-14T11:50:46.143Z","1.2108170213.0":"2021-08-17T11:23:51.370Z","1.2108052321.1":"2021-08-17T21:01:20.944Z","1.2108190446.0":"2021-08-19T11:31:00.132Z","1.2108192119.0":"2021-08-20T11:20:26.709Z","1.2108221555.0":"2021-08-23T16:10:38.193Z","1.2108232044.0":"2021-08-24T11:31:11.541Z","1.2108242314.0":"2021-08-25T11:20:41.413Z","1.2108270538.0":"2021-08-27T11:34:17.188Z","1.2108280007.0":"2021-08-28T11:23:23.207Z","1.2108302037.0":"2021-08-31T11:23:24.972Z","1.2109010455.0":"2021-09-01T11:19:03.982Z","1.2109012253.0":"2021-09-02T12:02:26.542Z","1.2109022317.0":"2021-09-03T11:21:13.162Z","1.2109032350.0":"2021-09-04T11:22:06.401Z","1.2108280007.1":"2021-09-07T23:23:42.038Z","1.2109072113.0":"2021-09-08T11:19:39.772Z","1.2109082106.0":"2021-09-09T11:19:43.097Z","1.2109100544.0":"2021-09-10T11:50:19.334Z","1.2109102127.0":"2021-09-11T11:21:03.503Z","1.2109142054.0":"2021-09-15T11:34:42.786Z","1.2109180035.0":"2021-09-18T11:19:32.395Z","1.2109201529.0":"2021-09-21T11:18:27.236Z","1.2109212005.0":"2021-09-22T11:46:17.492Z","1.2109222204.0":"2021-09-23T11:42:16.022Z","1.2110112305.0":"2021-10-12T11:40:56.286Z","1.2110121825.0":"2021-10-13T11:26:31.946Z","1.2110011758.0":"2021-10-14T14:21:39.172Z","1.2110142235.0":"2021-10-15T11:37:46.392Z","1.2110152252.0":"2021-10-16T11:38:58.036Z","1.2110181554.0":"2021-10-19T11:53:43.253Z","1.2110082201.1":"2021-10-19T17:21:48.803Z","1.2110192227.0":"2021-10-20T11:39:24.858Z","1.2110082201.2":"2021-10-20T22:14:52.017Z","1.2110202310.0":"2021-10-21T11:24:19.664Z","1.2110212130.0":"2021-10-22T11:30:57.788Z","1.2110252343.0":"2021-10-26T11:19:47.116Z"},"name":"@ampproject/amp-base-carousel","dist-tags":{"nightly":"1.2110252343.0","latest":"1.2110011758.0","test":"1.2105271708.0"},"versions":{"1.2105242203.0":{"name":"@ampproject/amp-base-carousel","version":"1.2105242203.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"dist/component.js","module":"dist/component.mjs","exports":{".":"./preact","./preact":{"import":"dist/component-preact.mjs","require":"dist/component-preact.js"},"./react":{"import":"dist/component-react.mjs","require":"dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2105242203.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-jkiSVxnuOgRIuK3AnatGCGumsmCEAX/ovHy+aOy6BGhes08p/RUve5udGtjr8E/U4vnvHZsKRhxcAdHJVlfT+g==","shasum":"90aaa6fcd671145869d77fc1810196872b9aad4b","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2105242203.0.tgz","fileCount":9,"unpackedSize":607848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrs1KCRA9TVsSAnZWagAASy0P/1x6F5uiWTIGdcidVYgr\n13mxfvylM6iUJqLcwi1QcHkknQtw33udnnW6TuEif5G8Q3SeAPfJYzPxzKa7\nNRPksMvtypv69cTJPZ1ddU9b0ZwalOc8cxfr6cTz0DqnhtvhiRFOeY8d0pi1\n7wrmqm3SrU1xQ4zL2LHo61COd+LjibVmU7gi6LytJzrUMN/jeJjm4lyFSArO\nAkq40ww/1FkYRA7V1/8s2k+4n83o9Ad2e1bV2VWyf6jXv4E5dvUVk5YZ8O8t\nK/6WcHTZkP3NLpLJ6+xbTksEcbIdIZHt0y6rI8W3GIW7PXfDVdTA3TNDjxzH\n0jXyT3EOTr+FNfwzf7bIhmFuNEDYLJ58moZInN86RDfPjuMBDCTjd4vGaAas\nzIKz2SwJacj6BLTMkzHZMRifWXTQDzVImt2m/Vg/CVtwnctJap8imTsGvwT2\nfQIjaIdfD2vgKQvEa9zY+TZBouDfqh5nnKoLAfIG0mFi6t7lK0y72v3rzsnv\nvipkQmdk8l/rGXBtPhBb+JQfRbg/m0pQ0KmXpwnRX+atPMX484z/9dyW/OxF\na/WHy1st7TOZmWWVJN7VDgBKdME4CnJfYf7MiRno7AMj/WeWZph6DpTvcXDS\niWzI8kduvCwKdOFiljy/VZCLrbl9BI+ZcskTtm9PrJZiYJgcQbgZ+cd3ugar\nd2Hd\r\n=NJoz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWphHkZCS4i+SK7skSX7yoF6DHKDdk/xtCZ/h2hKljUwIhAM18n04wGT+1pFo2xw6zMarW2HKjeUzjC5wcW+q+S3Oy"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2105242203.0_1622068554323_0.9353214580384224"},"_hasShrinkwrap":false},"1.2105270452.0":{"name":"@ampproject/amp-base-carousel","version":"1.2105270452.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"dist/component.js","module":"dist/component.mjs","exports":{".":"./preact","./preact":{"import":"dist/component-preact.mjs","require":"dist/component-preact.js"},"./react":{"import":"dist/component-react.mjs","require":"dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2105270452.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-cXqhmHyA3mTeYTDJxi7OHsWaz9XUzXJw0yAF5KMz9y/HSYN10HllqcqtDkB0ijdKICAsTzyvMABWojfufCXBLA==","shasum":"cb979d46a390f2ade45040697e7eaa0d43173631","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2105270452.0.tgz","fileCount":9,"unpackedSize":607848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr4bNCRA9TVsSAnZWagAASTYQAILYLoDAjbHOIt+fjIx2\nxuPfZckaFVNjxhDuxu31+NvSYxKDbB04Y8oNJ5eBFdi3XrJBXKKzNKr3G7yE\nYW862tAMkgJpfa2K28HTygDXslxIQG6dQxf7RuYxB8f6hqtRjx0zV5pqM0RQ\n6TYXBstFQYC0ccj+dfO1lQ+01SYglmuFIyQZojkmrdkQ1CAl4Eq6FX1UIzh7\nmo8jTlclXvHLYxWP3RzD1aBQMVYOV+u9HrMeqXJxk+mKaE5u5cBtMUFzBRrd\nExL5rpx7fQjiUOl/EPD5r9U9yzWq0ZIOChJC3X4YFaS5jIhZcCxbK0zJaw8S\np/8/hUaXe+KPv5M58AovQZCtrsYayhaLSPECde9foEUCRhTFrayHnEdkcwDH\n+TF0x+H7pEvlC6k+Rdhm7bloK4PHxD6dBaKBs8J2wxV30xgfQ1FF1hlgWPeN\n9n67A6adVOX7y5PgEW5nanHaOJvnU+MzAid7m7I+mRIgkBWr47klnKnYNieC\neS+ylvCmayTIAaFat28WcPNHCskTXOVOY6Xe5II2nxJpJf8sekrYLsVH1p4j\n0h1gTznyJJFvid+uaU19c1ZOf9FbHBoW6Ka9LfKBwSO7u2G23Gwp9V+auQ7H\nUuKXCi0dMr/HhsxWjlykCAvOE9zBj8/5ohr6UK9RachMe6ix7Iw26QhxWZZ9\nKa9T\r\n=xE0h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn3dJGKxGaYKR8c8r8QtQW4Y+AggaflRke5sDaOamggAIhAItYoMF1o/GgT4qWLb59yP6IY8GW8OXla4FCzMkv5Gxv"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2105270452.0_1622116045526_0.03116480342750294"},"_hasShrinkwrap":false},"1.2105271708.0":{"name":"@ampproject/amp-base-carousel","version":"1.2105271708.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2105271708.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-CDH1LLNg7jCCb0S6coUrrIC7CN+NPJym7w5NwrtMN+BFF/UWTgLud5RfEN1XIRzRhkzCP7McQqPvitFfx08/7g==","shasum":"c27c5722663133e0a6fc6b0d9b29c9f900ff45e6","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2105271708.0.tgz","fileCount":10,"unpackedSize":607952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+9jCRA9TVsSAnZWagAA3HQP/2XMPDFuL6E/2M5igNAH\njLEIS8RYraWL1lGiM4763hqdAuPT8muuYy48mB+z4+F8DW+0ZL1JNTykSQZq\nmMpU/dd4KRnliL8rHdQT6ZEYVN88WwJFn+vNf9dJd+lvEJeQ2lcygteZCNsM\nGrpym8WMPHu8WkbJcLfmdQ3lXsqmaTvYxLNKYhZg0E5EQF/olCbdE6ti9XpA\nc0ld2IfWVrIWl9yCSbmOkE9qaT9Cq8Gj0WiYlqzaPacQ8Fm/ukA+HvLw1uUW\nSEWZS8twmDeGfAeDQ+j3qnuXVDFquD3GnS3L5FJx8XafhvIfta7igFB39y0T\n+sOGDWFLnT6He3XaHLrJmMgbFUAMsHNIaAgCC4IOOa/tKK1JZGwaLaMG9vLX\nvLZ4E+gtW+7DXixaR/7R76MiwMcpGfBCPi/aezdf1U1lvhaV7nO9wg4QVc4u\nPAWR/jz7DEKSt9rF+Ao0chJYL8XCsHr1w8hz4zP/J/GPduhqXsrUzumBO0II\nusfzQbvX8t63f8Xx+0tchhIDL7QYKe52M4fOdYn0MTJPuOkSv6ZxG5i+gDMW\nX/XdLbvKbHcpTDmHsxDtrAhQI9MemDLCSNps2HogyB7pExE4FccayKDHLXBF\nRBmheetXzOO3Y0ptDu1NNCyabqUIix1fZNQ1fF5PrLSmlRWrHepmgWXHX5Jr\n59L5\r\n=na8x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBT9/7F6tmQJW/x67jDkMsOuEFlHeGy4X+nBSogRDx9gAiBDcAPeZocFCX3ewrIuyGnf7FMGMl+Moj+QCdQ8i3Pfaw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2105271708.0_1622142818936_0.21322988412933586"},"_hasShrinkwrap":false,"deprecated":"this package has been deprecated"},"1.2105280035.0":{"name":"@ampproject/amp-base-carousel","version":"1.2105280035.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2105280035.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-aZlrPMp4AmbJAU7hW06yhk4cNXrN3j2/XVR7WP/uSvwgd0q1TpQ4sybG0+ks65fh1w9q43yZVrB0hBCHBRP4gw==","shasum":"943ebf7ed2812b5a30c9a4f91e062a2ced21e9e3","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2105280035.0.tgz","fileCount":10,"unpackedSize":607952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsNS5CRA9TVsSAnZWagAAoWkP/1V4yn9Q/RTBpKHLYzjI\n87uxwmKiDikerbnOpjLpz0ge+0kvbdDeK+yk3NoAOQaktucWOh7VrmmJuZaF\nOCcooBG20clQPRVXxOWkA/J9z61NL0fmMueyJUzRP7V6aNS6OJyqSRbtFHCK\nIDrCC02K6KJg+Sem2F/FCuj/nLkgjltip9CzmMFRSPjPEksMGPeEX+7cplXG\nrrvFdzvRFt+hTPWZyHB5eXkbdbJg6zNdj6DedAFQRvBkkLCwfqCCW+8QnIm5\nYajKy/v1ERm8yxFBnD+Vsu/mciLlRZMux/H7JFOYOWm/pluxigPLYY+k7+P6\n0RbaMH3wPQZQdcBYBqdahiCJblc56akJwS19Ri7yHYwuDSOkjIMheAo0IT+o\nTFgofwTXs8oKtS93m5taAa9pLMTpDNS1W8yEKYlS+9vlLp+CUU426GHgaRFl\nip12266Pj/1nxDiIFOMwMc/kLYnBAtQyMsr1SnndeUAknagIV3RVyLk+RbKY\n+5TeGbeGOTMZfPuR2chZTmrcxeeLNTE09YvIueo53XHF50tPhSMrX/alDc38\nQ4PxePHJN8wxTPrkoxbQTA1C4SogFORMyv5L9VcI0JTo+bcXWrO46PtlWK04\nQB2pzFTa+fBw+a0K4e7claD3xtQT3hxv0yOdGgzqjpPPuOEWg6SyNvi9fAdv\nigRb\r\n=4vtL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhlf6pRR/uuqKhLVhB/R27+EEj1IqfDQD0DG0sllC9mAiEAuw1d7abp9mV2Hy2phDM2zjJkldwYgEDNMBriDAGXSu8="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2105280035.0_1622201529063_0.43996721893791846"},"_hasShrinkwrap":false},"1.2105281634.0":{"name":"@ampproject/amp-base-carousel","version":"1.2105281634.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2105281634.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-BV9n7ibVPkzmdr8g2as0oW1EMMz0ZYfcBehK8YoqnFJTNIl2xMsZJjSLDSemW8E4SDPmSaq0wkYoCeBEFNiRdg==","shasum":"2f1aa68271ccab9230f9f6c07e8b4cb244ca6c0d","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2105281634.0.tgz","fileCount":10,"unpackedSize":607952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsiSACRA9TVsSAnZWagAAOZ0QAItrtDLrypCqlWA7eMSr\nw/pY/IkAzos6ysBiz5zmQlFF21Y2zuysGmEdvox3U86Y+tnDVf1VWTW0Q8JD\nwgEY3QA78IUoiUPc7hf6XDujIu9/8BBJSz+gj7Ak7JG4o4CpILqeC8Hn6Vxk\nCunHu0ZQKElYhMn+8nkvFcM28bAABEdTXB+92eWfYY6Ew2icplzYMLmUNuLs\nZ/mevTlcw6ZT6rsM4De0bDExuYHB/4+xm/7T467RZ8TXqC1UPJGE3NRgjgAv\nnkIUTTUuLVKn1fEA0Qb5D7g9xGnrAVz/VqMHiwZamOhkd0mQdMphiqzfSEH/\n+2oG3wpl5hyEbrmPao+rYqEiEfBQO0UVuxxGHLP44u1lVGYbfiXyxxJ2rGV5\nZ7e1N7UzcPftHpONSGr9yt6oEeyrDpkv3Ca1e3M6mRK1WYsgIwC3s6GwJR+Y\nmU8UE2bMo2BEpi9QaKFqAOoHzYaEwqzpOkQ577GURCeo+6544xbws+fBaxHz\nmKgoQzlyvaa8WTiL71tFr8vdfJvB5f/Q/9dt66u8mpFya9nChDSDngxIGA1w\nAAz4A3Kt1GOBXjlHweIcKru/092ug4tig6nFUhu5sNtz0BhvqfForRmowe2z\n/LTXFl02vCb1nh9Fi7vELpyA1DPoqlrWogCpia63C6QnVIv6grFMyo11nWdK\nZCPO\r\n=IPHa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIBT8314m5rUK/YV4ujcBnH524o7xPw/eDe3W1vQO2wkrAh81Ap64Asx4ONoZd/dI9wwQ0aUvGa1D++krKKLxiwo6"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2105281634.0_1622287487685_0.2591762089973484"},"_hasShrinkwrap":false},"1.2106012301.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106012301.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106012301.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-XIulaNIEyfWewJASIuRHVpKOzbfMIb4/yTaFPQ0NfDZvu4y0n46jP6PNTkR57Oh5lc8z1sNXZybBProp7VZb8g==","shasum":"458ddb286744dbaa33a4ab6c08c8dcdcd67f26d0","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106012301.0.tgz","fileCount":10,"unpackedSize":585742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt24dCRA9TVsSAnZWagAAEjkP/0KCk0TH8fnCKht2chrO\nKVUsptTdpyVmpXxcSbqyyFGvU2pheIdVi4n5mn0Wzu60hWbAdusQ/3yGpzL1\nYlre/XtCtmfK1z2382wr26gOR9N4XD5pVL8c4KHKhno71oBeACqQgA2MdPKW\ncJD10/1b3Z4C2r8LCXc4fEdV1yFkRwz0IXJHavjV+9ZJJgHjhI1f80kcpmS1\nui8h1MC++dueXNN73/ylzPb0nPWGivGcsYpRbg5M8L5N/uY2AFtQ1ifxYHSM\n3d5mr6edHhEzAfwtn1hGNeC0c7J0Z54BNrTDXzAmrNjguhEyv1XYGUQyFeEo\nxk23u1ZbVZu0O15n5fJiAyM/GGAJKXhlz64j57Q25b2s2c28zPBF9sKThfEh\njLGC8mTTeWR7r5bXhQf4t6IFqVYaVIwEI1ZlNhKNpeC9uq3JnMdFvTRRsQqV\n5wMpVWiBWIbEbsq4uTC77CV61Q2F5zzAV2eaGFDRbyYVUBk2vKPI4BtkpiG/\nB1I5dB7ZZ5FlVZbCuRp6T8uu4A3zwP6Ij3VRuPVRc6GDXedj12OORQiggIlq\nlPHq4dcOTKvOdefqDXF6IxpE+GL9dhxHoJj711V66AooarOkLHdNlKn5FwbR\nSlpzT5suKUACQ7aoqzwLVeCedfmlbaQYhD9TGPHM3iFnunwU1XImAj+ZgMo9\noSOb\r\n=az0Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjYt0gMgqO29I9QAaVT5fyHQYFhNRe+mDc/ntM6ZjFqAiBceElhihzIsOicjHaft4IitkF1e+Szeiac+Ljds0VHHA=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106012301.0_1622634013358_0.26587517791238513"},"_hasShrinkwrap":false},"1.2106030132.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106030132.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106030132.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-6RryYOd0ptGChrl+MfT8IXeCSSblBGD0+VDG1nNSDWXVzQQctWShw6Y+Y8pYWTY2/4iaWjQzUqa6ZcbRi45I7w==","shasum":"03d91a30cceb62ef08594eaecba5cbca82207d19","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106030132.0.tgz","fileCount":10,"unpackedSize":585850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguLt4CRA9TVsSAnZWagAAgagP/jb6WZNkquObOagCUlRk\npARHb1zArksWcvZX6s6qBS8zcbWF3Y37PPycnONpIG2kmMeXvgN1E6ANtFE7\nUrYWRCfq/J3Z8cTnYfogpFAdA/6CIB2VccSo12TpqdFnUD8lgFSSov9i8qwB\nMfsfLA+2BPPTYuaLcYi5g+9USZRImbc/lGDDyPpk8u233k5M9jkvLo8uL48P\nVmErYTRb5Xj0kLBHVe+fQH8gNnt9XQclPy4yxhAQd1xQvjFG8RjSxiXtvoFh\nOTNmoJZ6RiBu9eTjXEAwyD5srGIaXRCh+ESZEt3B40hpmxs2yX9BHDHht/yT\njJl/WNDVO+QKvwaLiuwtS3sP4F0kLOeuNICbYTK4RkH5mp6FGrynBo7kTpqK\np94wnwJiHrdSJ7EjgKdl0yQiHB4pkHcDL551OxIvd7V+6XNvlc7U2Yt58YCL\nGN1XtarwZ+cWuuOx2+hUAUKVFUWzuJBDkyt0w9nMyaCA5wSIp8Zcu/m1QJvd\nJZvHejTc8Pm4OD4amfKhoPfilAYWv+m3k8KgEyMuvNrnAmjIzNdPeW6zOem6\nuTYC5TIEfUAyS0ScNhupt7UNK5uQrriFdwn0dv41iN5G5IsK2FgOod7zunPR\nWWK5kgUrAHcidDlaCil478pxGyXXP2ZD/F8HGpQSamGmo81tEUVsaISXI6zD\nhtI0\r\n=GgIT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHQD0zscjvAHSQ+mN4ZGfbdR2+IkBJk2dd1ey/3HQ17AiEAwX6/2nBs0Don48/ETxf1POkD/gRn21TTmygAlaTyvhU="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106030132.0_1622719352303_0.7697678859180133"},"_hasShrinkwrap":false},"1.2106040012.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106040012.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2106040012.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-Zy24hI/YEC12eRBG6wFgcPqFHhsrPaXQYCl0aCa59Qk7qxL1ryMD7+1vjwN7iMsvjh1GoZ/hhcSqPvKxqOro/Q==","shasum":"c6f1d0b604a4602418892f63e2f905d8ef1061a8","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106040012.0.tgz","fileCount":18,"unpackedSize":1118229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgugwbCRA9TVsSAnZWagAAx3sP/2VapmPv2g9LtGtP9AXA\npydb0Hz2PICJKfIsorCI6MRjCaY59hpyBH7ZSpDIH7OOkhD5ltY6CLzggeFA\nRUakjF4F22f6bpun79YyoCgNVZ6JSI25y6u+YQCnN5BVFlfBOcuOPhFI+FZz\nlWDtyrhVyS2vHDuqaQrkx47/cM79q0VQybkucbWfiHIG01PGvy6VOHcgeYEV\nF7u8bfmn5tX8e2GJNaJSiiigKdEkY+pQhbEK7rwXmdCKqkCN/7+d6FBaIxky\nXeOJ13SF2m8SnAjQsT4O8WX6jBNPaeQMqL3Vi0LIJrzGicXYD7NKiuUVBAAF\nAM2M21l52BvSbrTidhnF/dOnhNDcz+eEjYy5AVtCU8d/0r6PpyVqH05aaMrh\n+ISusqE4zYCd+hAhOJ8GfECE6ujemAe2xNavWEdcTT943VGCQQTKfQ44vwSF\nNdvSQF55tOvhI/WZodKZtZ0Dg+dzilqbSSFVfYMyRj/LLuVmS5Ie0w5MbbVC\nP8wF12NUxH16sie2Il7M2UkzyVB5scDi8rEFOSvSiPufl8AYzKcttxw9+JVG\nBhZCV0jgaQyqfo3ME5diuQ5dZl8khKzQzD3ozEpotcboqt4ip3yJdWyOTuds\nsZiM7irmm2IfdGjW8KeQR+C/7ivUFhrZ/s+y+cuXNHQdm5xsKN9h9WgWFKwr\np940\r\n=2bW1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD37TvL0gI/rwWBbdehcRt6m/48W/yVjJXNRSKcw8zpNwIgE1KHF3eU3UI7C8/qI3h8m8IEZW5NhBHLMs2BZyC7WpQ="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106040012.0_1622805531299_0.5800821874207409"},"_hasShrinkwrap":false},"1.2106060839.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106060839.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106060839.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-usC9IYh3DQzL/fijUCUmvQWG6+E6vg1sO+yqgqgkql0k6QyJXeJxM4ltVaaEKibHA9wQGidug2AcTCy2s9OpTw==","shasum":"cb467cdb92bbf1fc3904a98779fca3ec5fa0dbd4","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106060839.0.tgz","fileCount":18,"unpackedSize":1118229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvj1PCRA9TVsSAnZWagAA3pUP/jk1bEz1czXyphK6C/A1\n2FaOm8aLi/dN2F8Ozavt1CJomXRr3gGTJO/SDrJyFvN/TgqaQ6rN6pIXGV5F\nrAdrfpIcZGtyIPBCVIOsKD7dOdJYfUJ6tWbZqKrPiaR0s4A7bXQRJS6KLqoW\nk/KYe8r8JbUxy0WhonnXwBH12ViIUdEFe3LPDHwIa1/Kx2TjW/pMbpwvjEMK\np26+jeuqbsdIjkfgMZRvL6X55bs/uy7xxhg72gayANqhkgJNRFNUXLZtkKA2\nr6MJg3y3Pw5a4HwDfOTcCoXUM4b1LafAs+1dl0XQ4eRquXt2vTvE/mM7A5u6\nJCp7xWrNoYZou8ew2SaVqp/aQAsJkcQL2mVtsqxeGGbS3/S+5sRQr+rl3ioN\nfnVPXhGmG+5Fh3jgqi117VF9bs7rIvggVL1+jpowjzVOxuPZEiMLMenZit8Y\nO4Jo0mAy4RJcV/NoglVW/B29hghVXKa2brw9oM7MTTKPd5c023+RWdd8K8fH\n7vKLUKTrS1I24vlcYdEhptkpD4t2FPTkK0/7By/XeYq2HooUIJ52Faz82YBL\n5jiWcF3HYNBqPNUznKPVyEFA/fWnGQ7CDkg8BnJPXbSJm5tvbpB1zNxZYVYL\nmKWJulRA3kLcqMUU29jBIcdVFpJ+CmjGsGanLIr3Wk+Fi/49/coITcZGRr9C\n0gZm\r\n=S3Pg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgFCizuMghmg25jfa+irobaCQ/CqfSalWEXvJp16cW3gIgc8dSf6t5OWO2drQLJvgHwONsmiu7tCC8T/A7oSgUWn8="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106060839.0_1623080271393_0.6881678464154366"},"_hasShrinkwrap":false},"1.2106072053.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106072053.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106072053.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-lbzCGD4veOpVO68S/+8cIsmOjPZdZoxIF9YhenaO42muuORP5bwqcaga54fqVhaYjhwo7DxeipnnDC0ceAeNHw==","shasum":"91bd8a5990b7f9b79fa4b5e75484a351f3438b2d","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106072053.0.tgz","fileCount":18,"unpackedSize":1118229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6etCRA9TVsSAnZWagAAM40P/3epwdogpZi3wPEeJvi7\nXcudV2+1mGPhT33jiXyEr4wV7UTs0u9QREKXxnyATxii9Ps0OK6lrc6tv48b\nBbbIoERJpG/iFiGYTVTXVtamokpjF7mFsDS2ebuANUvb0Qyg/9yYrEDWCA6P\n3w1MTaf7TGdTo+u+aiULe4o2LYxmaEesTsyWObv+ouqWXyu+fVHlHBc+VLET\n1NEOoj5OJsQSaP99rmVDNv28a70YqsCkB4cwyb3P/Qt2OM+XIOdTOFqTBgpl\n9VxQUByZs1b9g8YYjoNsHh0ncgNy8Pr/NsyjcAgo1MfhmHv1Yg5f+SWhiPio\nxroK5og28qVSo2mScwPHNXlHRqaqCdBejtYJj0DPOMPrlRNCZxnV4nQLVRw+\n1iSyOUdlXkaX+LsWIP1bwdBTAYNdriJqN1g4gimpgWmRDXf6uIowoqN5kJlD\n4+HY/Pze1qkruoMNZ8onGbejc/uAvtKLPJiHBgKAgnqbQUhSOAmZhbqAqrnx\nX/mxbM0LBtFKcZEKiJYMlJP8zyPCXf2lY5s1+NFJ3fz42emZwAKDa2YOBbTy\nT8zhXTrmQWdjJCkJVnt2W9wfyiGf9GW09Lu/QqgE5AMqtcCw/B+jxn9c/xPo\nEKq+OEULffmRprRA5km0Pt6ws60E1dp9pSc5Omo4jl7K1TVkb2CO+OmU0LmP\nGn2s\r\n=nKzs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXz3U4Y2XbEPdm1kdU09xFcaGAJRR26kIs3CYr1LveTQIhAO47IJI9qEvTih7CLQytRYaNcl+H+uijXL1BV+5xP66/"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106072053.0_1623173037298_0.9507472720938952"},"_hasShrinkwrap":false},"1.2106090052.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106090052.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106090052.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-SJb4938BJNIlWk5uLihwCszx46QQ8VDKEMgD6KFm8H/Ld+NrU6SAzaRqrTrEOy6t5gwXYWEgDbUlu6/A9ezlSQ==","shasum":"b0156c7361db2ad547fec7612790fd9aebd3e2ef","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106090052.0.tgz","fileCount":18,"unpackedSize":1118229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwKT3CRA9TVsSAnZWagAANIEP/3BRsFV1PkLfg1Dyh08Q\nh/59fzXoDaNeB0nskMG5EIIeC6hZMHyRDOM6jQUiW4A51FPRKp1tlgPMUlce\neXv+w2HQDZcktBEhQvi/Y6QcXTFjOE42QLOrxU2g8zWp4Vr4562mVgoexvCs\n/mSkP8nCNU+OEoif9cZduBCKgTr9aMZxLGP4bbOGGC8+w4SIToovJHq83ZNA\nOi0NWZlmodHkAWtyjg7kCPjme5vYXS14mAGRsp6lU98Djh33c6HmlzE56z4l\nrDNDGbns3+lqFTZTipMJaoxRR2vIIKjhKJroN1bBCFpfbTp22kX5NsVJZZ//\nQoO4HYCnYofxIxy4QAgcx3rmArP7nF2PV014g4M4s2rW+j8bwPUYjn+LyRaw\nhsEl9TBSJWOtcRW5ooD5pMXWPcm7gbydaPTIOZTc6Nc4N8FFRZyTfOyMDYlK\nDy9pHvKg5Add3VompB6XyaSwxinsTK7yGnmPRyI1pa3vqzlS7KnQlpbZQuxs\nLneuMQtz4B8j82hOWYJsxN5ugg/OI+0AZH1JRYIA0AZIcdoicSYPOoyLkusr\n/suPTZwkn41WkXNWwrYo+2bMr/A2l43HQFHIDV2pyEjhh880hWbXELMgW6Zh\ndG+Cj4GBkcUd1+qjYFmjEvD6pTkhGYmFC2IDALyevN3KbSUu92fheQueYyOO\n21Xi\r\n=e0SE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPGIL7ESa+CakD6iMFhBt457RWz8vfT6Kf2fyd8EhEiQIhAIDJDfGDg0Sh0h1Q2jRG7P1yokQ9Bf7uFWTIIPDv+zq5"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106090052.0_1623237879549_0.5735465845134013"},"_hasShrinkwrap":false},"1.2106092357.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106092357.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106092357.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-y0dIImu9fwTyRYVVc565QKsLQwe38EWUewhi8ePhJcWAX0CgDmqE9rSUTsub8xrvCOsD7YRDT5zSsNB+gxIOJg==","shasum":"a7c373283d28060edcf16930f5de5e44d23a4b54","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106092357.0.tgz","fileCount":18,"unpackedSize":972593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwfbWCRA9TVsSAnZWagAAqtoP/ic19WJa7ZbD0dkzWVYx\naBF4WpVitRTM4hg+4p/cXmgCRu5RE4O4aZOFLpPHW2a7PfEAdU1ZQJe4/DXl\nncg/PM5FV//sqDqwgZHBgQbLHtGvtGIX38BYPMXHahDD4hn98Dx2Ef09hh++\n1znk1YWVLhWBtyUCg+yKX1pzFoTixrWSEWJyfGCG8cBYnhQK7bzkOxNoysqZ\n8eedhtDAAc/qw5JEHuLOkCoLrF1MTSAW+EOXEgHR7V6YZsIugYI2U3x85lhJ\nP1N+WtptvWjkkv3l5kq3kWxBOZja7hECJieX5reTL9F6oN05ChjnUarj9n+j\nL1qR/KXHy2qax9FCl1+l9AqmHBpXhSGNiU8QNp9pwhzNOdZrrSABTZ+xs1TT\nIB4+B4lsmqsJ0vtHz7/BShpJxTbdMPyWdr9NC6q4WSIQGBnsMN2AB3rHzLQs\nKxAbwuZpNesU4pL4ao+/n3fbhUMDIIZKISrMrjxUwiZs4C3XqTzYPAdlPJp9\nIQ1ovGyQgZ/4B6InI1dkINYGaqTrExpM+jzGdayK/BXK+gn7TMUTWI77lD+1\nWNQ4UCxVfcfbESmiH1anRJvZj+3x8pcusM/kdygbOkq9+zJ/vi90xvpor6Ro\nghjEmBkEEYjLVIL8TBModqvaYUaVBWrtTMcG/IwPCPBGE+vntKfVTb7g7esw\nzxgD\r\n=YZmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn5NcfX4AsCqoqrD6wvq0+oL/VefiAuv4cbrsmf4ho+wIgYjHKmDA7ejRky6EO00WwkjSABtf6C4UjuIOjSF0AImE="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106092357.0_1623324374644_0.7783093239043395"},"_hasShrinkwrap":false},"1.2106102303.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106102303.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106102303.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-/d1o/NYqQ+NNNsmVcBnv0TBh0IIbkWFBjvkgqjVlTvmF2w45iOQoB3/rMPIRoLkdZGvPwHCryEoGmsziUV0oaw==","shasum":"7fd7fb54799c18232237fc9ef65690c63a931de8","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106102303.0.tgz","fileCount":18,"unpackedSize":972593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw0iuCRA9TVsSAnZWagAA6u0P/0sAN/nV8y1hHkrpPeIc\nGoiSz1cNS3R2YQ3x2ZXuGyVbPETrWKRaEj4m5TrKDUD5mIG4R7LDexg4lL8a\nGbPAwcrh1DaGp1+W7qfDs3wpIGf+ZCV2AiwLjBJTDEfb/XDRC0Syy9wcQulO\nueBFJN1AAP+rM+pflvjK5CI4fhvBnqvc4SKPKnK+9gOcY5fkjkfLqGn/Vhxs\nqgfc7EN475LVfyGZ0yGt0RXziBeOTjq15QNyTmwOrdIkOmshWMz1Orql90Wr\nMjHYQTLMO8hskzf47SEFjCu5hFZLk2orblOLa5wyYs9biAaUKjbEibtCj/5Z\nx38qTruApSfAhW/9QhE+Nz6GSJurVrEVf/C67nKWs+5pErJBgczcuhE36eH8\ngMN2PM96Eeh1Ouv/5Loo3H2rGESoIXkbCwoqAy2pKEzNPzl78A01bw1YS9cQ\n4icm/oTTsyEo+DDAtnhJGTwZvcEWeB6K9Bn6+eg4aOXAaA8Ag64kpVIsAj1P\ntMdY4iZIHy4U/2kEIJJvbONgWPAD4MJIxVxv7tqU5N9VBcrROk5VN9N57dex\nM/RK7EwOZWPLJBUTTTWZS2eZ8ByYE42fSthQ/i/24Sbi0MRh0jM3FbxZZXGx\nnSnLcnYqI93u2Cfutcs+HLwFSfuqainSoFSV+7DIWx+DwRqJFcTgtz/cqRJ1\nPq5G\r\n=l9iE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtVdxKDPrHnr8Qsz4gCsz+r7TkB0Fkz7EYY0ZajJhw8AiEAoI1OX+GJs1LrzlQcQ/CjYjgADP1LpmW102ueqEDMQMY="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106102303.0_1623410862328_0.24115210114924324"},"_hasShrinkwrap":false},"1.2106120107.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106120107.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106120107.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-LkMn1pgquk5t1LBvXsAW8qYgM9Z0WDaQ72cQDqPcGRa8vgwRibep+m6hg9GEVhRmSDqZXve6wR4I5vlgOGDc8g==","shasum":"461f160668dc89c2855f592d55b8e7423741a1ba","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106120107.0.tgz","fileCount":18,"unpackedSize":971209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxJnICRA9TVsSAnZWagAA4egP/0HaVxSWuzfGdTQebdaG\nGLDsA0Uwkn9NA6kpxIznw0tCvdAWw7pNyBluYxvjKU8X5/7vYlbmhaim12yB\nxO6eIcolMOdtKPeK2j5UwonSU+/F6WbWJdf9Lg7uMO9+7DErRXlnRfFo3eVO\nf8vc4H0psqEBnJa8nn8exXxDDhIlGbMSUggA76QoFb0IhRyVlhcyThbxLBgJ\n+s898E9DQ7zNCl0/4AbXOIALi1IbQPHB8w1uI9ibHBiAlixUM1QB5gmhMHJ+\nj7dt8sNGvtsB0gTgyo4YzkBnDzINOLL+5TuIK/+51f29a+k3uid0wlexwtqR\nf41lcqTb5WeCK5D0YmPcOJfY+CJeFnqW4VOJnGulK1HGt+9appY/eS0sq0Qx\nkdmVLfzHKhFtHGVKk6AyYfDyXKmrzPrt6F+DpJx9wcnH326MG0u+ZgMAxYR9\nrA1Rm5U7p359q7jhJNBcqCe/svSikBXCnxrSNvXO8mGvoxAgpADjI61YwPQy\ngbFwuXlOVgE//l5GFGdJ+b1MQQKRghJPCKWTs8DWBSa5+E7Ng0gZ9ILKTFFa\nCCMx6DY2vR/rvYdzC+PJzv4iyoSWf1sIV9EgWOsGfSgaB5PsOdhUOQJBe076\n+9+S81gcXSXm/Ngrm8KE6GLh+M8Sx1Ec+A41y0Vc98yzft/LQ6COEN1JyvnR\nBazo\r\n=Pj+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICK+3KbbWn8D+D8c2Hkk5EcrFm/1BvhJsC+PHC2yhd5yAiAgfSsQYv6DvcA2Om+x+Gagp9T3/1FXYnO4yW9m3rDxEA=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106120107.0_1623497160586_0.7316444311096502"},"_hasShrinkwrap":false},"1.2106141722.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106141722.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106141722.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-K03cVVwadp1hFGqRlzuqCIqp293eyztM9hmxFiZhBpOyGSiBnrk3OY5jHuJe3YaU7ZFs78W/I8gwcukOPHbSEw==","shasum":"fbc43e2a8059044d9241eb04ce06a4284f399a38","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106141722.0.tgz","fileCount":18,"unpackedSize":971209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyI5vCRA9TVsSAnZWagAAoBAP/AumKamAHPC2pJ7L2Fxw\nQQzp1aj0h5lXdVs6orosGeK2LIFSycAkdUfrd6QylDt8+E1n0ABsRuuWIcgP\nvHeZ4HEiDvY2k/ahV/cf+kU4qKJwnjUpmRQeShLMoRd/w2jMRI1JhXAPiroi\n4QOtUyIEP2ZECWXmK/dVjZRpSB5+fLAKbDF8ztOPBPh5Gu7NlIiZBSOIKK+I\nosAxLLtfOpyYnNqWfhvHXJbtRBtNNQgZ74BOVuR8vtZtvzBkQLzzV6GxJnJQ\nBzRpnSDJd7G/lRndXVuFhGaC1uWDDkJZJ1ABikCslV/gfoZCp5o5EChXRnoD\nRrxlfWAJo7pvsG3C7qOFb+JcyQ7OEmzxsK6cPSVJSNlecLQSluoUxr3TrhXL\n9gcgf71dJdsxlSBLcO+w7Z2mU0mNGcVE1rZf1Y/xmeNIfWusUlUqeUqsX+j4\n6P3IE1AwhjLhsWHk8SYd87ykJYtelj7Q20p71D096iUyDWviKE7Kv2zPch4m\nFd/0XcXOPMM5IWSOKEQ49cCpFatrE6D7KjVphrj7luydSigDNaML2usstae/\nWdL6tq8UU85xnbygxLzaL7mpANfiQ9o/V6Q8l4iMG3995eLgMcMrZ+nkInTL\n/KQHMVOXhCeVmsFyNzwX9veFWhUe3EXyBUkZx2QRofoRI9wgEqPzLQNMkmVh\n/mFk\r\n=43/P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD44NbJs2rEgfB6xzfYdcDZkJH5V6sFSQCtHocWI+1s1AIhAPib/7rSihiNkF07kJ4n4GZ9pkSPnV+MylZfBX77PVTa"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106141722.0_1623756399169_0.820383077853235"},"_hasShrinkwrap":false},"1.2106160500.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106160500.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106160500.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-cIsE6IYmxsq8uTmFMgr2GsEBUACmLCQd4tu2xvcpBeTvncalIHxNGkMkzhot72xesWW4vRHJxp9CVSxPH2RC5Q==","shasum":"475d12ba04733ce6ebc04a1a107241f683428495","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106160500.0.tgz","fileCount":18,"unpackedSize":971209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyd8YCRA9TVsSAnZWagAAqf0P/R/9046UIOup7RhZGPN3\nBtFbvbWpMc4Ml9uZc2G/lx7mlOIvjYEho5BBIAnU9be6uB19fPaK3ie7/Sg8\nsbXUS1VctI+MOVc/HrLziQMRyUU20QrmerQJdakqlwqsT1O1IdzRHch9ENmF\nXhWWACV+xWNndA4GXNSudo6mZv9Yi+NlOZkpuP9OjClCJscQJDo+sRYWuC2E\nTU+JOjk6gtLKNwQMwKH9f+wGOL2Hx1eMu+OLGyIigl8DeGPbv7Cajl1FmTvI\nq9i7IcRZCp2gevhd6xYzG+pqx/Va0gm2DWaz7RSz3wCtna3jBPgn63lWVWDs\n1ihQ3Lsr5bRjeew2Gas2B1L991wVCSHFsvDPv8Nq7J2HPjnwThFGpJG5rP5o\ndo2WSPH5quvvOrdXtF9R9jZNJmdpkiq5hTwZUoXkW1sTPzb9HggWeqxKZijW\nkrx1hbOoutqyPUXHlyisEkgymB8/3nLdcYUkHpFVJ5OVmkDJmyLIxyJcmile\nFQpB6xQxAfGOCbsHHL2eLi7RPyRXblk8w3AVc6OhfauX3bWgdQ5uTbIleqGU\nmTaG4FD3a2P9GaQbppWsifvvG5a7Ritr4QeJz4ZDLiprSNac5+rjYYhWXKAZ\nxIQijJ/fQa3/Ul1w5eXiXHamYsqdBXH5aR/71rmt6jx3oyUN1dpBfBqJFgKC\nMDEl\r\n=ImVp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiyQjpoPiRpM2/qJoZA47vFlQGz+wHlj8sHU51ThF/xQIgCtwwJ6KM4KTImbcHAbMiYW/8w8sWxmfeXFZpsDd4UO4="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106160500.0_1623842583635_0.23639443303933194"},"_hasShrinkwrap":false},"1.2106162301.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106162301.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106162301.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-eNFviwL38z/YqyJDDzzBrS6+SGyrkDMM8MCo2Sy5q9Lm1ZxiMW2lO4MInSAE7xs0EHz63BuhE/8AOpXlI5OubA==","shasum":"58514aec882898051f2c01bebfa8447a2b99e5ea","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106162301.0.tgz","fileCount":18,"unpackedSize":970413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyzCuCRA9TVsSAnZWagAAOroP/0edcXqvINnf718SjkeI\n8OIBM/YMQFq3bdFsR7XK+5nlW/ZY9liV19lahcvJmSbJyRJcVKobhD4HG6Lz\n8Tg4HEtBGx2kMklgWpsoihw8Jbd1POwTMb5r7BbKM2eGYmSPrzTgO4gn8zQ2\nhOClJmUvo75lsg1U2Bl2ryVUogChhXq76L6GWKGDZbxcelFkKxveMp0NbTB1\nazPjMJsFygdG+8aqmIgKI3TcVW2997pp5N3y1SHFxZjLq77oWwMDcvY6YB8l\n151iZoN/my4I5sKj9W3K4x19bDRzHGn3RNX0O+zuq7WBPWrNPz3aj59ipCtA\nqdQxPv3oWVCOMV3qoMDZ6DktiTx0r30rqDhIzkLc4EFxZWMDXkcpfzigPRvg\n7O4kOtyETFlM7WZaM0R0p5N3WInbAdhUjF+jRFpU0A8TEKPQdM54Yen+KV9C\ncin6WqZ5A5yD5AvQEAcHZuVkyWluj6pXrfNBDHgpS1Us394Qe/6+bw/rL8w5\nHQTiHkiUjx0Dr6vW0yH5GFGUAEfZezOLsMs//OcaalU9In0BTDwK9lvCYcfa\nZa807s+6p12cClmYV9qkfpjoYIFlmIo6IrQi6RYirnkL/+1cPC3l6baq1tUo\nJWn9Xvafkx31Lpj++tJnJzoD6mqCIc3VDkdlw5IaoLNUCgUiJN0uq3M4GbBU\nxwcR\r\n=EKaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDH2WkIyUyfbkAQ8vi642Fr42gVVrCHndfMgJY19olzuAiBsg086H9qvP4m3zup123/oBqt/Z9eDs9HfNaPfSwAJrQ=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106162301.0_1623929006265_0.5231060962409704"},"_hasShrinkwrap":false},"1.2106172254.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106172254.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106172254.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-TZg69vBs1kLtHSMAt8cy9FcdO1oe49mTfFGYzG1BdWH/guXVTK8fi3eGv4Pv7oX2ObwPk1muv/tKoMhjCISj3g==","shasum":"562b26852d8eec8ba501bd5cecc37cfc6a95ef90","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106172254.0.tgz","fileCount":18,"unpackedSize":970413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzIJ6CRA9TVsSAnZWagAA32oP/3VE0le6Cy82niSByLwJ\nfpYfOVg/Pj5q1MpaAapAMU6nelYIFA7eAg96KpjGpSCNuXe4hk4U7WdT4sOT\nxvaTQNLv0GlmCUE9uTl7yrp1egWjaBV4mV9kmtgHTu5bpgc+eC2V0dCc6rQz\ngGf/AeEBRgOl84CB6ctvFls2rKvM7HqmlSsLzqPc6sECih+4QdQlJPYW59f9\nPErsE5wiok7y4J84hWgRFg3dnvSISNF/ZU/MXqUqEyGrb1UK/HKgv12W0tYj\n/5VDi5O3ll3jrgZZrNbC6OzrEnYY63l0amWph0i0OLgjPDNtEMwL6Jo1VkKQ\nBZoyL9GDPu+A7DrRZQJDxG58NR2supUSDn6sz+gcykiT/RXGHmlkTlIP1Yb/\nqLdjhCtSOTjBxzdTe9nVV0lAf4/7wDxNKz+DYuLF8OVpBhJ3JJH3z9qoAbPv\n7uVqFrrMT+Xv8nz9DVWlO372HgV0Hc53FqfOz8dYgED9eV47FsSP1165PBJn\nIXa127L3IUWESpbIQaf+bAtHtYv5FDa0X3ckAbTH7EZT0XoKZs5gy+XOOqDp\niXIjTadanHN4g1Lsf43uu8SDGrwsvjPJW3us17CmdfeNTqkGZdcHuStrm2MK\nKWxwgcMFjLpzjR/M5yY0py5XrO88cEt0OPMoBuPWROXlDMXa/XoUYFvCxgpv\nNryH\r\n=Sx9/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDNiZ611U3v3D9aFx99Hxfp3V8G/PlPbCIKfwBqgLGeDAiBbJunFJ8Y11Xa22GxLm4a1/h5RKC0sbkVLMT+3TAVO0w=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106172254.0_1624015481472_0.8754692945033449"},"_hasShrinkwrap":false},"1.2106182132.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106182132.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2106182132.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-A3HCGHzrKhA+uN4jh56TKLxId6IcWJ5p2Md5sWobeH47HZ90DAUdtzo6DKLjHcKwHzleApyF9O51r999JWKEvw==","shasum":"10d710cb3f9fdd662a6bd0cfbb2eaa66ef9546d7","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106182132.0.tgz","fileCount":18,"unpackedSize":970413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzdYaCRA9TVsSAnZWagAAU8YQAItOaZ7kDGy4TGdoE1/6\n935Etlr7otMMZQNWM/2877QBFk6QiHMTSTPaBnmchYdMf9LDvS2XYw8i4rx3\n3lBe25XFxB1MLBVARlMuo3xoPD8JyJ9urccH/17jj6bVu64G14/jIuwfzX3I\nfp27guUnDWHDWslC3jHp7mLf111lduF9Fox9mieY6x/VjOM3drMcssPKlqbP\n6BFgv5FuE/inuirY/sa/SKkTtKpqSsBX8mTDmhoxBxowbEMYxDv7FgeQvvAC\nwdlzhTLXw5NoSC7fyD4AiBt9AtxWFiifr4lGz9T8otAZp0MiYmxJ4Z+qcv/4\nzD17acW2H8O25QkxM92wwyU+K+euHVOMIAEUU2XXjrHZyKGhWNiOti6F9ARC\nPYKql5BanF19fnDxCHRCci3nqP5L1FeYW7hWYQmdyJ9eVthBvWyDFCust/LV\n33b00Yk+NpUd+YtkKVApVrqBAFxXBOLMvxWBj0GS/WSblcdFK0gFWhfEYZIy\nPeYtpvV+7gBhlzmtTdM/gzaUoIXpO0HV0r3tz7MOKyQUwWbNN1SW66bl0rbP\nPEIWQJ+bJ3dTU+ghuMTdwLRTjtIg9KO6AvGIGO3ctAFMrzwsdWjDYtUjNBhx\nQXEsYx6/fZtQCDPQb/TjNp7Kby/DlSVO32L8Dwr9WBRgv6Nc5s8Z2A1l+hv3\nQs1y\r\n=aFv0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCah8oGgEk7ta4MbbXluRtLb/ekfZdrmRp3vRz9pwKTWQIgTUBBo7SxTI/cJs/2RxHqGFykrbNL0mefnQuwjziB3ic="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106182132.0_1624102425737_0.42225623954900504"},"_hasShrinkwrap":false},"1.2106212012.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106212012.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106212012.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-ZSsOZXaeFvyyuQ2ZUKXeZHiOCcCnPKpnzcG5P+/rxvQick3+FBpc5a3UhyRL+fFIN6J6A6vwTRES5Xi6ZYibXA==","shasum":"1f5de5d22bcc8f3d687ba30b51193d1d76b38035","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106212012.0.tgz","fileCount":18,"unpackedSize":970403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0cm1CRA9TVsSAnZWagAA0tcP/2vqnD1+Oxatz95XbVZt\nRJhRSnSnArUBOWz8L1gfrfeZylbLZ+YX9IT6VCysBouOhru3+CUng7V55DnO\nnxa2oWHqMalbD3EzkM/1iy6YW9w2L/iEmcDsCwyAZsyNSl3mdVXfgv7Kuqhr\nlLeT0M7g/d9GjOO/+svLC0nPeoj6DmgTIDvTKIEmCeNq84iZxDNu6/HF+/qM\nWNiwLpIJgsJsOUPOh8Vhm8A/ilZP+e86AJCEvq9qOFd9O0fXV3KtfnKp9lt1\nVMBfNTe4hydfJSBy4qEfFTGnjLHMsGOQqCM9z8SJ87Ev/r3f02H6iJ3ccj15\nrPLWKvxAxRUCbd7xM8aBfGa1pVz10ATuVh+ewSa8+cEM45HmYRa4OdaHx+my\nCYnfkJG8FWNVNVmktxD0QdiaxPIZJk0fRSeJz6XXPSpBUDNEAoLt15nyTOfG\nLvW+WclDY5Bk0pNNotQdKYop2JC5Csj9CgQVmxCy2LYPSK+idRN9+9sJYY+g\n/9Y0XOXoQsOncnuLMbtdPzfb66zWDJ8uyz+o5sv1ITxSh1xQor/frdGCl+p8\nt7uurrcmg95YpQRnmoiYIi+GID3pdDZM2j0UREIiFQC6AYT2OW7XN+Jh3TgT\n47Go+o9y+eNiRNIhIVDA9YRM5Rf/UKM0adPk8eA9T5S/UJS8kt+2We/UMz8f\nrwQM\r\n=Ud/P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCodbaMyV9i/MhE794477w5jbCI266SveQCPqIsDrHERwIhALtFopRCjm70cawUszqqk/b3sbQTieAMVT3vvYNG7F9H"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106212012.0_1624361396802_0.7888842422499132"},"_hasShrinkwrap":false},"1.2106222237.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106222237.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106222237.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-ghV/oUFzsa5VD0mRYakL8eqC+XpG/IzFcgrmjglVtDVAcazi0tubxYWB+UGtrOsRULoOy0Qb2SlEW6Wi++ofNA==","shasum":"266db2407ffa3f4bb2ef47b0aa8ce390da77b462","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106222237.0.tgz","fileCount":18,"unpackedSize":970511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0xyiCRA9TVsSAnZWagAAZhoP/3vbw1QOgoLlQ2CEn5QV\njqJuYslbdyO0HyvC1LBAVgeJwsGT1RxTEoPqhVwLt5f4+Ufh7+8S/tWqf4vT\nUrspuVX0mjGCocK2k+EkrKrYNjoXdpUpR7ps6Efd2yTi0oJSHLx2LKd+rt7H\nCAPWsSATUf/xh+XChglM/u8EeDTUlJsuPKQ9sPUtk3RUvSrbX6W5jNQ3bZOH\nc8/ggoJGGjwqUxjO27JRDi4k7cSNRUu325eNo831sh/zLVsda9Uknu/kSDhg\nqomEYzKZ8Cvz0T9svKIZfkG8TdcJwN53pF2NaorofenQE29N2SLa+csuzspg\nVf80sSq+fQXV5rIox68P5eBtZvMtAw7cLqbVKMpCY632ljZP+80P2XZorGk5\nMbybkYwb2oLFAL969V4c4VdZBBav6jEu4AQ7NHnMa8TEth8qrq/LZNWAwcev\nL2+C58NpnUn6otlojsJAUytN1kvDv/Gfcrkl/44k2GbvIZvugNh/AgyZ4XFP\nCBL0sJpIk9Hoj3ECx50v35t7as3XmORM8QxsveC5CypMfhXpk0+x76ueq2NS\nhgRzPvj0Tt8Er+lmK7LpAzaiElPfAZq3h5goHBemDKQ3KbPSHQwHj1zSCSHz\n6CZq+QXmeBoS1r2DKDijUniPxEkDtB6FsGp8vi6EcaJXjICLgBYfdYAraNch\nj5qI\r\n=aHgK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDkpljrFWd0mjbon5goXukA3+TD82EebdUGkjrC3pKdAiEAofVDSPm5SJpvOmwNkU2Q7vTPjgeYx2fYdYCC5eUAbWk="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106222237.0_1624448161993_0.12223675506508602"},"_hasShrinkwrap":false},"1.2106240350.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106240350.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106240350.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-gV1GA2a/CU5p/a+lr7IFA2e7doy5w6JPip/5dipcoqvFfNv0zVkfwnagGzCTmra3/atIQMh13QnMEQjUFJ65bQ==","shasum":"101823b9174c5138063d310fcaa7526c42e55ec0","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106240350.0.tgz","fileCount":18,"unpackedSize":1004741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1GzHCRA9TVsSAnZWagAAJ5kP/1sUPOH4yIEvzL0fXTWs\ndNhDRYR4rAROGiUqdZlqfHti09IL+r9ixHeYy51PwbkzqMgaMlKDdmHvGHSg\nX8ybO4iawbWFaES2G+AY0B8yn4HXKjMy5YXe4ed5s5YRMVxTWg11wn3KMWZS\n63kO/uWRGwqihCOmA8qtvcHCdF5ihVMRaXhWqPtFVScH92tUUS7yZpHc779h\nUL3MnkNvaa71vUSQhLSsjEKdhCFPjH+ERAhx8ypnuJrtvQuON6vTOItnwg4k\ndRPBJIhbxsO2FzfH8WAnDWvRcprWhXcjP22+ZnMmy/y9T01hqFHRQYKNMtx1\nZ2c8d1gWZaGpSFDk33bCBL6gyptB/2mg3Nd92d5wAhhwNabtQWLZd44wt7gA\nnX9s471BINz3IwI0Sd4eiCpIUfX3wZURUaX5mWsUdkYpP8s8c7u4IMZF6s3W\nCq/DI33VUGAVN8xsLTGiHZmt9ec/va0I0QFYhH5fKVwhGSP2/IoYEr62GSkw\n9jSWzbNYvmXgkTHkozqtZNgqvGSALVNkk4EkjL9jzsqQx6QTDQ9ooo55aAaa\nUbX9CKlBYziTtrNDSEK+wNziVd/aVdcQRBKoj8BwP028pywFWU0hV7kzp3Jr\nAr51RyRa0K/doPU9etkL/YtXgn/1VIs5QXHrTJunBolaUlxs0zaRdaBJgMwn\n7Wty\r\n=aPOb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAbBQ07h07reTU+ujsYshQuI9sgmxWo2dmvlYslgpa3AIgOQIHmYLVf9fBFcmt/ufr7FGerVFlrTHjkDQux9+6P7E="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106240350.0_1624534215467_0.13221375697137905"},"_hasShrinkwrap":false},"1.2106260436.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106260436.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106260436.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-aBpLA1AVeNwkywWBF7Ogck6sU5xV8WU5lrfMEKlSHsDj+WzZoauLy4Upt9MijTeSe7FB5KsBfC6yMKr1APL18g==","shasum":"5679979c1cc9d9730cd5a91a9400232fd4d4f9f0","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106260436.0.tgz","fileCount":18,"unpackedSize":1004741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1w49CRA9TVsSAnZWagAAQtMP/Ap/R6p0UFBesN4xsbXo\n6A9QOq6taVhKNYYYxiBCaG3v2hZjHHZkjWo/HaMkDmj9aAxKSEClZyBRV74e\nKH2mKiMsacf18TgaKE3ZvjeKcBR+KZiEnag3aKmF3Cy/2rRbYxiaOSGtDwRu\nH+4KDOcIPlAEp0G0eVfz5vlBdjMPpAh+a0V72rx7fJsqypokAlHMvZeJGBfI\n5P2qIaNrGbaGZVweeGY2bVVjQz096YTgVgNbc96gb+OrR1AxeXzZ3KSRjaWO\ngplocuy/ANWF3M6pFfJAPgAO1bsF9+5Zgbvw5P/f70+XTDnwBwXdmV882QtW\n5C992LrDEwK4asNmSkTo6XlPswhZkPN0Q9e5/t0woc2MU9Y9yjTREYcnvYc6\nHmQ9Ri0s8NtyefbUYwFEJByyiu+u8ZVke9RcqFb+I1VFdcxBYzmrHqrT6si7\nAgxGI4K/3QEYyXdLzgZlIAWvJDThmVJU/zA+E4Two/Xle28EUmdIjSmQk666\na6KQ0UfDISWj07LfCvMygKJpvUd+3ZQ/0RTJ7BMczOmpHVTic4RIfN2p2rKh\nw1mhf5G5B8bQ184gjENhMhIAzX2AWo5RepZMruA6tC4Mmten507nwmqLK26t\n7qJLFUXGccq2cSwDJT1PRz2dzG0YhVlNBgiXzHSpMIeR5PltffnpIHT7t8Qt\nCjes\r\n=+OZo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVorAVu2hkBP3LL/JQBtLeZ6bm27RuACqzj7ydoi7pqAiB/t0zY5srWyOUdJHS06168a2Yb4wIMYOX3sdRXY+Vopg=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106260436.0_1624706620567_0.5613778028058967"},"_hasShrinkwrap":false},"1.2106290147.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106290147.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106290147.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-Kjocb/7iAqKZSDVXTa35zxdVtBpbcFi1Y3lgVpddyQzyD956/V2AvmjmH1JKCsOElNcwdL6AHByfiDbxQLhDlg==","shasum":"ecb22392b3eb61e361f1289819bb886fd1b1f294","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106290147.0.tgz","fileCount":18,"unpackedSize":1004741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2wU/CRA9TVsSAnZWagAAbMcP/jz61SxGqUbpVM+7eOKC\nuDM/YSznPeCnp/HYDcUY4kBjLd6ii3xey1BWcwDO7u6ALrYHpm+0mWMBmr7+\n5LZuISgdsahCyTNJ01xAZ7pslS80k3/8fYoN4W7MGt3YoyeX/OBr9MBa1ehe\n5psC/OwyxQ518XmgeUA+DoHdxl2IKlgXIlR/8S6Kx0E8JyNYQX4m66qkANy9\ndhQVrwyWd+7+hJXmNqbS1xGsBc/Pbg/ntD6bFIQVlJxeSQnPNbh96/9HNVI9\nTaXM/eljyGBZPvltyFBIv86f2lLTqsEM4OqJh/NMBynv+eixja62oNgpEwA9\nlLQtBCqKmxwQSj5bnmABq8NjvuGvHS4r+lYOTjkOrzgwaem5bZwP/TNc+n3S\ntvvdIlKvP6HsmXircGeTeERCLrGQaTxk3oWN1EvVe30gLne89gX75cPNJo8T\nxEnk4e1vbutT9rOIARdP4b7IgD4WEmRYTcIEI1zXWFc0bcUQVpSTjpIu5bJJ\nSaEo284SZkmO5hSmBGV9uUsyCBU3Dh4A4C6hYt0yiz8m/n4Ya8fwcwTYswsK\nhN/S/d0ND7ASKGKIaELtpmQ/r8eHPgC1NzXYIROgjYWevAO4VU+LMqRBKn5H\nMzvwiRHfHBEbQfgpar0pkT833XNeiqJ5ybtW0cNF8GAX7rgLP6MRJmq7jUo7\nuenW\r\n=ebPW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLH4OyffDU1CSTeEIcHrCroTrnJa5NKcA2QKWr+rAYxgIgMC5oxlGD2dnJDOU+0nRUSPjbtKtN3LTWOOCKenF+3Gs="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106290147.0_1624966462483_0.820720919842175"},"_hasShrinkwrap":false},"1.2106292357.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106292357.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106292357.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-WVLms9CK/2fVO7koiRBOYv5T8CtA7otPOLY8i3vgxGVsN3F4ACF6ZU5+1DIc8XPWKVYxmrEe9/az1IG/aLe/Pg==","shasum":"ecb15f63a02693bee43d01b8623ea041704b687a","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106292357.0.tgz","fileCount":18,"unpackedSize":1123309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3FVRCRA9TVsSAnZWagAARtAP/3bLOeZQf3wrfP6gvQ7a\nFeSn1R/kJPfGSOOZkLEXMsVpE68LF2mVK6Ddn3fjGDSxVG8vtxoV4PGl1doS\nxyDyDT6NuJ/1mxm/gVLGx3dpcBZTcmYN6R8VBnpxdZrmRuHtmcOK67kMEUW2\nW6pW1pCdjvw9a18OWAzBAs1GCugA3f9sV3AmVtzDXl8b4zu6G0gHEC05C1kC\nLdh05jF9n3ZAyG5MMQjAJoxUIhnncQ3ckHlB/AC3nj8cb9IWplm9QlNv84wa\nn+p4goxxUrJL3xZd+/B7wZW083hqjbOIAHQl7gb9RU8wBj21lhrPqMt6buP/\nvgntRS0tE2gAmvD9VB8RcVDrNNFuSov4at1oi71T8DCUxO09pAhr+OE29R3w\nHr1rdSEL3ZLN7m4vwczIrjNmJAFm4NsjCNY0+uKoBaD40DL5q+NALrwB3u4b\nwO66ol5GyapU48L8JKXCLGSPSB6tGluEXQvc6/hXJKo3S2L2IibANw2DpE73\nPhXUQUtjOgYpSvgpZP4QBGhhgEaPxw7AHYa6N/KCoa8nGs3mKPJQv3xg9Qxx\n1qLUU4TBPpULK+8k1NHMgo0bzKNviHdr1DUMPRSroN2YWmIvHzgzkkyWUWt+\nwm2lkFf60h/zZcP6sLkFL4J7KraIs5loCxtL0Z1kHhCT6ZahZgfLmZ3NMcbI\ndPS8\r\n=ELP0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4GaA9skljjGolzdNBiERjKo6Gu3RYLM0iVgmLu+3PRAiBT0xXKlv1RsayegdDkksWqMFeCk60LT9RgIijPpkaqfA=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106292357.0_1625052497396_0.7873752667993039"},"_hasShrinkwrap":false},"1.2106302324.0":{"name":"@ampproject/amp-base-carousel","version":"1.2106302324.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2106302324.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-u1qLbxhQhbWDqQFwlp9r7rmYDzUhme5GfDz8bUHJcGH7T0kiTlv22JL9KS/sqWD1yo9jFvzZMX1s3YPBwORelQ==","shasum":"d75322a5e5543b34badca7aefb2264806d99e0f1","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2106302324.0.tgz","fileCount":18,"unpackedSize":1123309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3aldCRA9TVsSAnZWagAAKnEP/jJBjSSFhurBId19MyqP\na+1JJ/+IOzMSgiIVf9prJ6SISCd+BsP9XEouw75unnUFOhKXvbvQlztRUb0W\nlCHpwl/NPICGS1RPJGNvRTwZJLTslwCkNcEK3iA6cXQ+kvvB0b2Aw9qzA+Ip\nddyBIyzd4utdvyjLa7TbFgaHdByq45C4hyedqQOhHgswrkJ1yrEQVnZmDYE4\naUNNhpSu9P6OHKChuolwboACoAVOaG5iJiYJdRJh7sDFBwl2qg4wPx4EAZ2C\nyWVBdqqU0kaAExzcxcqpNEeWntdBTeOJgZTiMKTg7isxJZvZRhcYILmQFDhz\non8IbCPBOelOde+5wdZHNF1tlMoYHdhFdS0MhsFBLjZMjpsBWPzTrNvSJzMC\nMG+S27vswf0vYu2uDqccerYiNon7wV+Vdvr3XET5nt0uWPLasmdGVK2L7JFI\nX2TikuLiVFPBaq+Fhe5ROZjXWJpDmkL5eGcGQMV+V7K60HcBDzbQPmDta1MD\nQqzpi1v+P8zFlldvitE/mcHxd/PbOTp1hEV+d4VGbwi+9QFJOaIDeURc34bg\nmDzZKyAKY4wqtNz7PBXOsjH43ZAU5HR3vKr/oyTklT/uKJhjFkb6BpUuZoxb\nyqg4NndLjK5QhDGPTeRy09K1fSMHuw1330qxKl/xY6Yxo7up/HMITKXScA3f\n69ar\r\n=26l2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH+bMrAObSM01pSUf6QDhBtBN0GGSFdFysnGEXLZYggQIgEwPfdbLlIp7bF4Ebktqjh9K1ClCRVWyCXgZXwqoLipQ="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2106302324.0_1625139548880_0.5846137339617754"},"_hasShrinkwrap":false},"1.2107012021.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107012021.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107012021.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-BEf9e+XJSQy8t28hDO1y7ksPJx7R2pHgZaEbrbiaJHTCNkl47juXawozVPg7oTlIKnDm26Cv8G0LxRqPXEft4Q==","shasum":"e7dd6e835b065b9dbb8ae48733690a92f7c62ab7","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107012021.0.tgz","fileCount":18,"unpackedSize":1130171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg308KCRA9TVsSAnZWagAAaocQAIMC1apzo7fXHVvXZ/F+\nFpXS8CPQLoBiETdL3+w7A4FfXkIOUieeIkSwukgJmyTFPMsGLvCSUsM8mV0F\nuFWA/wXzHsjGxIg2k+UBmY77b1v24dSK6xlfytIzJOkVSaT+ELr4DAdkSOkN\n6ohajwKgv13Ofk1D11sGMu2BIrErvZl0bVGqgk//3zB2vHsJjxRf148mpeYm\nc0uBEt9QSQHc6v8WTjqLDlfphUk/yP07uI8LexC8QHV1QiEhI7M1miJq2X+x\nXj6EBRxIl/V404JJsbSQjr8wRAl7RZ8jMKQrHYIzu6r2QZd4hT9d63RshTFE\noHOzWVHI11JZ/bKKsISF4KebJJ5O16IKH6LhPQKgHWoFQWXBt4MwVpifwtvO\nvN0ulPjs6RcNlqtPKLX03JnSQyTqwJqAvf08V9iUicktSJZbxCG5GAsHo2Lq\neDzyNK6XcbDxRPPRLqATzodpqP+7vGaUR0PW1seHHsOvCH3DLuI08hk/FER7\nL8RTTAzZYUq7+sUUTWSej7JMJ6BocXiFvqqVNCJz4UXP30fUkfftLpFI5d3P\n9MLBiVam3MLXsKO1E6Fs95DepAzjj5vZxL9IjSRbbqF1pFSbXyqrgE2IACgR\n4tO/uMkRZmnaVRfOUpWQj22kPD6xBPtcZVESD9de4Ocyrp2VhU0dWubrfdcT\n/It+\r\n=GY1/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXFCVY35g4UoG9dcoI1pDCiRr9Yi5rOkDNcj65jx6MKAiAJC5MvZNtaI1BuO+O8r7rzA2k8nLw1ih2mDjQqMY629g=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107012021.0_1625247497623_0.5605863347877877"},"_hasShrinkwrap":false},"1.2107030008.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107030008.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107030008.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-by2YiDP4Rsn77gpR/SwbHPaBrHlxjcVK+Yt9zDOfSJkuTIt0gvxX7zc3464ry1L9/r06asH9XqAPjWck2TsMVw==","shasum":"a4bd206b1505b626e68ae27c8bb0421ddf329f2c","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107030008.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4EtUCRA9TVsSAnZWagAAOC4QAIvF53CM6l/6dePaZWqg\n4XuK59b0V2eDrl3LhUNs8hM7iF8z71DlVW1L46pS7VVX1gwKqwLeNuKcMqVh\nLDX0e5OGKKHwlcbY6s/nSl2JDO/01FiHUp0AkcJqFYwKuacwu+T+lzdi5AZk\nBmsSbcpmeK7nSvK4Z5ofkVTnsk0r4ENYS/VJACEDYFzHB20LjkT5JRk8CBom\nvVYQz2uITOhU04cWLzFH/pbWFlQvMMj5XL/it9I6aCKVsMYQ3Qv6BCVgxaof\nW8WlRI3k2LuMIUMvtd5yqylFf9W0eDjCUf87jvmUVJthXkBIyya3nckvrAMh\nk3F7PsCoFEUtqkZRh0QSAHZlJRKIqBV2YU6bv2M1A9ir1g9XX+CqYirEgJ4c\nxvsWnkHrexagcFugaP1Jbck+OgMnUXHtwp3syQZN0REGCm0bCz0yw4zj2pOA\nYs8G/SFD5YAvafc9EsKzqeFG/ctgiFkcXKfleT2qedFC9jlQ59D+YHKSuEc8\nsSMAmAeRZVA7lTTpH9n/oOINSOldRcp//wA3H77xtulU24RWc3lLICdP6223\nV7BMEd3KeOIJ1CDt5cN7dEDJwg0KW1BPvyySKwhSs3JVLGVp3OlwyxP1pCtq\n1txSuYtyb4lkrC+WRqCpVJlwCEV/1zp+U84K4UGkkYWiW51+FQLuwJAgm16I\n0V8I\r\n=7ysc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9iZDLAVV1J0b8GUOpLUXZlLm/aOa14h4OJXKOga0eNQIgWmJDlcyQXvkrMU+cxN7mYKRfkuxv33PSdBrAmHq4AcI="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107030008.0_1625312084077_0.9080882716879173"},"_hasShrinkwrap":false},"1.2107072148.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107072148.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107072148.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-LjA3etXL5w+He4bTqMH+oKVZk/5iQ4NmnsKPoYboHBz53+OGHcdfaHUclfIpRwimfLWSh2RE5zz+1nGB6qpCpw==","shasum":"0f268ca85ae11028584baabdebea841d958cd0e2","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107072148.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5t/pCRA9TVsSAnZWagAAAtAP/3Eu7y0slgtrCalgkWBh\nzDsRtIOo/369jxke/By00hgI2XBJraj5IzSHlP6xOMG9WUslC3+1/TaQ6sDJ\nJJHoybrHYZl3T5eYJ60O0tb0fLtRiFnz8DjjVfjACgfF+8exTHKG2PFIlsvr\n6o/ylns68l8V41MMzkc/kal5tuflWcmNTo1nQgakUfcinTsBkk4AcGRrRG3D\n+EIIeOXqfSk+MGc86MSzj+6az8kgRym942e9a93L42r8vAW7DzM5cudw9sU+\nv+k9IiFU77tVDKbrIl7bKkDEAfHn9mX+tt75+O+etKfoWnC52+h5BOWDg88i\nfjEutL/AAiyY4G11lH1nJiIlnMW28EOkU1QtA9q4gysH3BDkFnR/CEOcfTYo\nKFbJHoTt7c/tYl+lXy/dbQAUmDuG5fUsyEze2te2iEWwgQWesM6gi1LHGehJ\nYwE6A9fyHylpRGu76ZS7O7gAW6TJtaSIlC4e6gZlk0mdv1ExkdREY0NE5kuU\nwyIcGV13wwZCl8fk1hE7hdifFt7J234ln7GQKLz7FmnztjAr+MElUZ2NhD+5\nheE9FekO/HYCxUFNzPBJpsbF77CjBgGbLGezzdQGiFckcDnpJxKx2DuOjz1c\nKfLdYfGptRorFbg1Jr35k4efewfeiYHY9FEULOiYczrUSo9n7Fu9OUoA2riR\nB2r4\r\n=igLG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2nPASetaMtMDeUNGuFyUma/wjWqBrzdj9Mtp1awWnKAiBQFBCIUI/nkOgxCVJ8YQkiE3c7jk14ivl+PHLZxlLd0A=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107072148.0_1625743337077_0.3254769182867212"},"_hasShrinkwrap":false},"1.2107082341.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107082341.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107082341.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-jYEXVjJd0tcQdiF8zYzhlDbc8P2U+sM18gmwvwgpwe5u7Ltj+dkjBmKFBNQOyx+i2/ensnfFz9KEUi6ldwhhCw==","shasum":"ec313026f912e3711aff656d5be4c03434d938c0","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107082341.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6DDXCRA9TVsSAnZWagAASp0QAKPz5Rc9RKOVblBz9kCD\n3Fos0YuiQJjqFilSwM3BL3wuJRPNx/jn70/YZiTgwfPx/BDHgP3T6x2rB2bd\niQd3uoXkKi/rfKuPMe5x/0rmI8LIMoMnabwDYkbp+CrtFXYjiya5+sMDgpQU\n2P3j8ghyMRKdKsYK2aGtT9NxiXDlrKPn67Sd1ff1z31MaaHGdsl4BDeVPvCP\ngANkoNHSibfZWdfXvqgIPaGFYyk4UZInnOpeBfeCQP9e0r8E9ehkE1AsycOg\nbBAaeYwfdFLbboc25dDWGMeRNq9Z91gYNQDZzQOIH4vb3+k8YEi+r2itTYI0\nfLnAJJcT0/epJ9J6z1CL/RLKds+zjm0BeqoMwk2AjdAFEHb6idSZgEQ9sskJ\nKf4i3snSWfpjdQU8EcvAJrxvRfuBvm9h8RWzNkjxLhkRUFeniNvdFmkDCQRj\nPSrymxYDmJA38VreLVLKgNfkvqsKuXTBjpe+lYgZmTRSIyW7zERlfIVIwEJw\n51EbVuSzIcl6WTFyfGL3kHWC76nXeq0zMlFBYMNnluuB5T3uP08V5lE2aai1\nKvZp8WvZjtBxMspvimrDuBGGpU07S3/MXnlAd1bakL3QB7wCroljzMav4PIP\nZzWHt6pZqOkPZCRoTj2ufg5IC6VuIFyo+qxP292yqKoqbll6hkMRWzaM2isu\n9ZDJ\r\n=R7+6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHw9Lgqr3TwlBuPWMmbyf1GTLYlrmViwiStyfYj0l6cAiB9oWL8iW5TB6Oc57UXMLvW09U9n6+58padIq7exGjJBg=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107082341.0_1625829590800_0.14967731506871895"},"_hasShrinkwrap":false},"1.2107092322.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107092322.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2107092322.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-JmK7TRk/vcZGsaOyzT/QnzvZYz6dY9cXOMCIUVMtLWXS/o0tuuuZFz5GMJpDAm07hL0JTtBjsNXNavklaFbuFA==","shasum":"ac6227e50b56f7a580bf2005b2724f0806917d50","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107092322.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6YRmCRA9TVsSAnZWagAA9YMP/0GoTnHg6n1b3uL8hUZd\nsPa9vxmeywu85/rOp/VHb3N5Qz7+/eOMfoc6tbsF/vGWKXYABBOvMn8GdWUk\nbwJlclCp7/mq56VHlCHqCQD1IMDhrlq7zQRQnYYIQu5391C0nE7ww9ovkN+G\noB18QlHRfZ6V9yIsoEWmbpFcc2RzwLoPlLVlVmEBk4/N2rzAE0w2F2wsNxZY\n0k2WhFsMKrGpv3fYrAXNZf5B23fD/HUYzeUlS9BiFxksdVShBxp0gGGtm+5O\n4dFguqUJse7tOgV8KvvVypVMBbkzrRyZeu+2PXuzalreRN5ucxCIxafwS2ny\ndlLhTa5izOPueEtrNs1MT+WIqZ9AvTufqI6bTV1S9wLaFPHWu9cbO7CumvFE\nPYcpB5+lrmV2tTe9Y+1OFSJX0fGQ/8JexVUoneB7v9ca6LGx79rlRTtT18/q\n73cwS+oeDwxwUduKYzeOl7h7VReEnje4p/S4Q7Fl1ZzjRwHViiyak9OOLied\nSmhUKkNDBEIDntbEBeQFriayJzAwztH9RewQPYhQK1VnMOp3JpN+XVHlxk7b\nU/ShW/Youcr7ytjdTEj61PQF9wIawqtWkEI+xW+SYSGgnbs4Bk3u4AFoKDUE\nNK8/HfAZuXQDUeWUGeJpBvzkFl/H8LQINKmCXo3w3O3ZRcQFriCIMus0MiOB\nQIL7\r\n=X2XG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXKLekMV5o6l9+oBrwlFyk7JCwls+G0dQuwxCqcLSNwQIhAPjjRWh+TS8TX+Gpf5d2OvXrS2nHO+x956jEdk6h1W2G"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107092322.0_1625916518453_0.29568276583361497"},"_hasShrinkwrap":false},"1.2107130206.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107130206.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107130206.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-zRIazJOQGNPJvnfLMVQyw++yN+XXHyzE342dSQvP0qGSS8+iEL1SFmqxGa6ctZusHCL/d06OV6caCMXctQ8kVg==","shasum":"b41c672be534603be9acc6897ab7af863c06336b","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107130206.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7XzNCRA9TVsSAnZWagAAeJYQAIS///anqDyo0bnC5ho3\nkU0sNFhxoYXqw5621Kjtlb/9qLKs3qNwrX5pReLBzGdWvah6XbHWVHMCSr/O\nTYG9yKs/pkzr/eG72WWj7+QPgGlVOmW+J3g6PMy/M6oLL1j+DDX2ixE1rUXP\nW99QzZX6mbgPxnw5rAKj24rbw+tDS1exfbqbFlo6ET1+fjQc90x3tde9Zvlk\nedffwSJqgh3lBELz0MOyqA6q/eGGaoXNvXTlHWlGHBEXPIiXCXjXqOT4AxeW\njbfVa2jlZu6rk3YqwnJ8CBSpkjVG4f01gYdxKlN8oQ/iScAydNED+xTfXRrj\n+fzBDaxCVyaVw0NVbF7LAT5CC4N0FpSEmTec9/5Dz2YtU6iiMiXQMaM7CriV\n2UiYWiwqL3QFww3vNYPyk6lHO+9kkn4y8EsKcnWhTvki1Mo7ZwMiWiOm60am\nR5qUE+Gsr6HDnmg2IOFm8trjoWqvo84uEiAMV4uUyc3/Z4snL2/q1ANw4/4q\nOc77ph6toY6jJngG3QKjZCW8k/8eBchgX8Xqb4d9zcqcNiBkYVpArvNkQXzl\nDhBD1PrNoKn6sMTjzwJSb5kCyExNclJyZeWjRw9JQStN3WP+p0s7JNFgEJ/B\n7eCQRwVY/zTct48zGB1GVFlyziTNBLFk5Z2116i8nNl5GZalL3ei2KVxtiMU\n6FU+\r\n=yPg2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAUSbet9BcIxDydBJ1CFBLwwhq3FvewaioDS910QjFBAiEAupgsHCboD0edFC2iUOUDDoD8L2MpiuRNxTQ50Wm1xWM="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107130206.0_1626176716437_0.9602188818704891"},"_hasShrinkwrap":false},"1.2107030008.1":{"name":"@ampproject/amp-base-carousel","version":"1.2107030008.1","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2107030008.1","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-WnCh5eRLJxkvFfAhM6g5G2F3hRnZ5s8uaZ6uwkNdhGMBPLtYg0a3q8VfcOol08tYycq6eDAW70P6FsvTfu4P9w==","shasum":"5afa908ad523006bd10b0004f4ec2b2bed71d7ed","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107030008.1.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7e2wCRA9TVsSAnZWagAAipUQAJXQtZvF384f23l17LOG\nr8R3Bn08AdWbd7jQmZFZ6TPS0I08VK9syzns45Hk9Y8vDAmtrnnQHaj6Agzd\nmhD9/YmJDz9IEG3N3cF2y1+Fnilzrx96XAsHJJ8IpJiRdow/epnWqKb6IzWg\naId2H1lbusU5d3bPxBK2yNSaadYJ1xN1V/IRwZlZKgCuHmrXyDtIqUnn3xvj\nKOFTpmxcMaH0OsCLUNBpFE+7MNJQpKVvze/fnp6q8/hdFCbEklxswF4S342C\nOdO9y7UI7OqX8GxM4XQqsgjIVnJoMzdij3FoYAGglDUZKp0CFMIBIpSayyLH\n1VleN2i+8k0DaARTnq48kAdPENnuJIrabhYWykrmroOvt+2TAbjfkLZIRcKA\nQWhU3rajYYpEizEBLeq+kAIG6uZ7Iv9naw/cHU2UfKTauYI/+OcYR1ERk/Fj\nfenBG2nnCsFwKMB0DgNcYUs2XkQujb+eMRtK/CzbKgIHonfLKKrHBNZWdU0n\n7//PaE+y2y/3nG/pIHHC64loBt8S3U7qXunC82k65CnpVVEMq0KzqWbxNBpD\nv7aaTEqWm1Nuc32EiXtgLjXXvKwd7bZHd2dtXGLiY5LHewY2Q00mzyONJ12w\nnQd9LmPzNykB80A3iwS8IU850O0F/sQuX0YagVbv2ZfT3zsiELzCqTVUzx+c\n+d9G\r\n=3Xt2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtrgX9pLX8a/RWavCt/6VvorWrg65WPbW5qD0ZGFy+IAiBUpDb41DjE4IT86AFCukLAhpd1MzJR3klpmfs2yclBCw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107030008.1_1626205616075_0.8374292502412639"},"_hasShrinkwrap":false},"1.2107140004.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107140004.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107140004.0","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"integrity":"sha512-iTbW/WmfKXSfUPCWtH0uhvYacf5wFS/IIvzl8+OCVytAMVVJhQFcUp0erMCFPx3g2pSnD3/eI0pev25EpJBLTQ==","shasum":"592f8773117a03eff26f86a4320e5b2567eb0304","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107140004.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7smxCRA9TVsSAnZWagAADxYP/2sXDIREEO4mdkQ9SkIh\nc9e76hANIJ09Xn7Wj54X8cACadZOVB5lbxRmBWD430XnnkRE3ffLDqaHE4n5\nW4SvuYcuSU6NkvDpm7scKnrgZY2Kn61xXkTZOJOgB4TUIWy2xNgCi1T6G4aI\nSRNysv7zVfyPhiTsLHpnWnyRt6MAQJiW//H5N9xnMwjOXPMmFC//OdSafC6R\nmTlLccNfTrGIOSY6xKY2MAYbwVnvoa99jNj9d6k1oiSK/ktx6UkG/YBB9WMG\n+RpoE0BVBW5ZHE/rLVrBM+Hb7jyEPegGgDy2gcz7NiQGP1UHJeSL1KXBiS7f\naSnAAdnUuDT/edjzwg3b3ppE8nSH2rJfmWaK9sSLgrVwIzJpf6i/vXAcbJs1\njblI8RKlmcRZgP1F/fRvS2C7kT5nf7ZPNcXGL7cSg06qqX2uo/tdPmGv7j33\nxo6eOMM6NkFjdytNYfgNTUv54c++vO76oV1/eBtAPVpOg8EhBkj7Yo9PkyZo\nmp9QT3rHMZIgWbmM8+t8uekkSMBttAeh270EbhZqenOy0xPNWaJBB6a6FZnB\not3xwLhB/1qjg028a0UvjcYifMtcSlW4HY/sHQSU9NSTggzbV2u3YEnF0Xag\n49aGcg+xs960b0FWwB1YvYBlsU0kkZYXFNFQIxVaezOOshztlEAZ9GKCQARB\narKA\r\n=SrnK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbKjTPUPZ6WcBZw1Wh2PiwnhtA3x5UYM5yOPKWdSDEDAiEA8YEiLYFomc2XNNDrGs1Tvxi/wmlcpM/kh/Q+OB/6VKw="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107140004.0_1626261936545_0.1499715817122269"},"_hasShrinkwrap":false},"1.2107150011.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107150011.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107150011.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-Y1TldPIGn6t35MHRhtznjL8YaWAlOjx/AGplrnWAcbGw5IfNpOlUB9FpfoSv+z1dpQsv5l8kp1QK1nFhaudOLA==","shasum":"462a5633939c32de753e921da4ddb020979489f8","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107150011.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Bw3CRA9TVsSAnZWagAAwq4P/itv5wSAa3nRiA0MyOjg\nX+3KF0q4haQi8XMFNf8idDytA0EfTa3VGomvGjqtjo/Sy3IzcOn/MkTgstLo\nLtOCyKuqxXXHBxDn6Jif8cA+GLbM42/bgNUkdwjVYPSxfBUJ9zces9Y3uA7+\novjH8T17Gi3HhFMRxwNWmUKs8+9LnPvtXZut2jjj2tXCYF6+2Ea4Sz1+oPPm\nexwnBw1itjJDiZoOWMah14A4X53ulHn67nVCrt1l0bPgC56SeYuaMVUDVWaG\nDlf7mA+G9XVbWrhtKuHOnotZdNEddB9rf6wY2vjgOoKrtKLPsKsbcX20+D/I\n4v1B2VwW5j0KyRHCf4OaDkG4W0HmBg1I5eMQrUzwdkvcysd1rYXXd5uwIqHN\nNch8s0O4O0cfoYC8OIunpkXqEJuXA1BxRcYwsLBdf8K5z2kKjswSNvsvFeXH\nk/eCpLyp9imO8JWdsvq+DqH4OZ69f28GLFG5yAm0AqvxslSveHxLTkuBgkBo\nh5s7o0htkzrCubEudWwV8XbZ8rvSc0wlQs4loV0CCjR7jAlG0ZzFd8Gcqn42\nRybpMfvnMtiX3rEoOxjQKqidHIWgVVgSw7X6E8itmyzaUprUuSUhWzdteUXi\nztS6pUu+Rwuv4YMoEGk3pwumHaj+v47Z2dLlvjAJx+LJ3M+sW3BVFTHyGKDe\nzE7N\r\n=dBEK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyczkxMZc0Hf2rVxt5qs6scD5h68qg9PWa2pxXWRO3hwIhALP+UCY5Zoa4ONb0xXHZ29+GpGJ50OiRaO9tNcuJLdcX"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107150011.0_1626348599557_0.484878670481127"},"_hasShrinkwrap":false},"1.2107152117.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107152117.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107152117.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-2W2dNbgQdThSCIBT+ymIDjo/7v5ZHXEq3Z0Axv2e1wHr1+96dccHXxoYz8/oYbtcJofn+NkXbn0f6D3MaWL2gw==","shasum":"d1a9a1af526b4e3316c2fe1f500dfd879032eda4","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107152117.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8WuZCRA9TVsSAnZWagAAO1kQAJdLnQUx26U4njpCaN2z\nnoYeWNHRUjFfpa0Ly6oINoIEu0/+sx65/Fg95oGkrqxn2hc3dc1dW1C7JH0s\nP5jmJNsY8H/oG8GngrFfXumgP0Nyg9I7E3r2EDrGhMNrBr74OgsLP3WDaMO1\nrAMS2gnYwFYmkojgredoCcpwgm1KQTR8E5GGTZYJSjMIpbGa6cCh37d54pam\n0OlBdwcbeMsYHm+HWdJsXFkWoRU0sKzMmvBKH9/HHOlKOehbImuA9P9fjQhs\n87pZhXGhqS9dbH2TMz+6kGoMhLV9iD0yq85Bql2C4NMilpTARUShZu890NpE\nYB+3DS+H+4q2EJkVlpiAjOrIsULl1oGNOalqGSGiKYCcoNcNUczy/7MM9bCr\ny31m8RWorr3JKursaCYxWge/HO9kd0mVn985+T8/4up1jq18S6ZoGEQbrJMq\nKu2EQAHqdh98YhFcR4mvNJ6fGmTi9BJSYY0OXcewrlc956d5Ugkmj/v+NcPK\nvv+xGr7tUZfp3uNcZjopxtuqgt2pbo2Rzn8aeaQ3FCCuGDeSyJvoVd+Mz101\nthgHk6eV0UHFB7Fnlia0O0l8hllPgdz4PufBUbDw8+RJjMY+ne1pjnK9cd+I\nFXuvJw9Vf3C2ETXPRbi/VrQaNW43Vp0L0aCnwi0JiJUSQsXx5QShUDcZp3oz\njasC\r\n=fRP/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8TyYSMFUat2moWA4/8KjnR+/1ZtYmnIAG/FrKV+la+gIgM+GqZsL1kbapHYPU4i00zRZ7e38Zlo4mWg/Xwx9encE="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107152117.0_1626434457709_0.6245978092231268"},"_hasShrinkwrap":false},"1.2107170150.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107170150.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2107170150.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-yRGcjBUpl3zDGNNgX7fbvIAOU/sXhZNBj8qUFLwWEt0S4BVwvlSKmPozavoYHOTUn0l022jlVNrFDdg8HNlYLA==","shasum":"99668f28de3c82faa9a9942f79f0bc09ac149d63","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107170150.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8sCxCRA9TVsSAnZWagAAOBEP/ikE/3R5K6juAP6H1XGI\nDJyj13RO4xzgz7xv6uHfO3jD4EbikVSCgV19m1DTVxo/XP4BRQoTaoVCQWpE\n6i1LHo9kOM7NDA7qSF+gOQc6LKyGxL4l0p7aqK1gt+ABP5B5zWLfwqPndqIC\niuzd06xXNluXelKGEQfkFLO6fc52zYpRYExcSrN9d1WOHnPasRz/FwFesJAx\nE5+5LmWKbNXnkAqxiKJUvWUrstrP+/5D0AYn/r9FrsMcD1roBJRwfaruOyU1\nkNTTG1w/sXiKHknFIqONg7IpKUyb4KxU6Jbly63tUUGoKEnZ8fN9hJJV4giY\nLzwsUO8xf2+1PQlMX64HXvw3c40+v8JXrVttnk7C8qbIlqEtJiEVz9Gqjr3y\nkaBd5fONpMGBMlONCQ9E1DaiOQqsu92XPFrFKFFVL6DuOg6bzdZJcApS9XHc\ndj/Ue4mA+yMb08BGi7glb6ixVM9ofXAjSsRP1GP7GaBMCRXYcDay2r6I1UT0\nLiiIKSh1kQuGszVwCC7JhGTaSUcGvnt+PNVkzomavOIo2wM5/1a6qSDIhMvn\ndbV4wUpJF6xeyw01QoltYKMm4LNrdIhLNMkmKN8MbMzMce5szQXfWK49O+xR\nr5x3zSsDLNiXZ+IqCc4Ksv/GDfa0AgY5FCioGEQWShnnWhYh5JVEpsT7dJGn\nVdyx\r\n=pKTD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSlIygsMmYKa2CEy+J27DxK1qXL0dKHuqzgNIXJp3u/gIgCbqezuXMCNe3zOZ934hwotCoqy8flZr1XfaFwl2/QXI="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"esth","email":"esther@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107170150.0_1626521777573_0.4900865291981291"},"_hasShrinkwrap":false},"1.2107200040.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107200040.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107200040.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-4RIk4ZWdWTbXX7Izu5g2mzJjPHxUh0YywV7yVK9IbyJ+vp4+zY/D5jEr+KO6PJfYYFWxVDTSYY0NFZMolg1tmA==","shasum":"51399456579da289ce40f5eb1480ce1dc92355eb","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107200040.0.tgz","fileCount":18,"unpackedSize":1130193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9rFACRA9TVsSAnZWagAAusQP/2ViNq2I5KCb0rwSaSaa\nhYchlw43SbiIaw/+CqdQO3R1Adwr0UdPVV9+xDgHClaKCEIyl7VtjDe+9Osf\nhRBWQISPGdxu9R2hp7bRcOJrKuN5IKJbWixcXJ2kdMIq6bJNEUttPOPaF50X\nsJHK5CYxUy61i6R4gM1FUWxCTuOV4gx48gBMkmaWqnTXGKl+D6dnXKohpf2l\nW4AgvRmuD6X1gbtcFEjyGmYMvhS8OIKH7iii/ZdFAY75zfk5wYZHWv/YERcC\ndFvhRHdpuObf4SHKk8J0HKqbaiBtF2CSpAJRJCKtkTU5JITpnEGI75Ttkz44\nwoMurvzj7M9acEqbyJFzysrHfIj6nAxfFSLkz3yeSwOMgXz9qQxIOBbmpYVx\nhmFlsi7AuNdM0uwEVMwo4pi6WvT25pe9eTe3Vl9TvZa4NyqiL9O65hY6zfQD\neVITbE80VwMnSJMqO1zFPj92xV8k5G/yUQ3yJJ5mt5qPLJuvh/mGNzeV0bBL\n1JMuxD4GM9Tbmwgt4jivGeGkfFfelNnQBUwfeRsral8co7Z8zR+IVEeLDpsM\nJG4dkLXcFvzYiy3LSo/9GYxacd+HcD8uAu+UdWiset7tvPU9bOrbuxZNoAWx\niAIzybIOOza8s8sfoV45b/4i6GviWyRyoc0Z4OEB5kDqCS+CnvCJRWyk1zTK\n7KAN\r\n=H52E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrkfpLfm7vi+HaB/oKQTxYnKcq9Z3cMPmSglzGY41YcwIhALljTqeBXosTWtfV0D4wd0DikaxxCU/l65OzkYzuilUx"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107200040.0_1626779968695_0.5897613986894121"},"_hasShrinkwrap":false},"1.2107202252.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107202252.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107202252.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-YuvWQ/BivZCvzC5KNX50HMJ/vKJFsjSpYietA72lm8PCKtYa1dtBuzSuG09RwgJzrbm/wx8RnOmt+MLMOtRupw==","shasum":"4419bc9f5a04695b8e9580ad45dc13ad5dffc1f4","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107202252.0.tgz","fileCount":18,"unpackedSize":1194677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ARUCRA9TVsSAnZWagAALe8P/imsQ6L3FsmINFZU4WD6\nVSpCBcIM6sZRQw4lnlRrLldVlY4ci+IaA3DODe8beSnaJqKYefJ9BNwMvnTS\n7FvIAq6KSVZKgHSUPOFaQfihakwMj8dY1pGHIr3D63LSOL3y/Cjk/rwAdcuz\naQ40W9aNt5RsnCMaQKAUyqjlA9PWchqjx/VXghFWrwiPZEjVy93cc3Ow7vAN\n9+RbbFysI/i2Q3GsrvMJvWr6AS/133DtsD2OxPGtbnBJWHP48Rq31EFcVI4b\n3eOGEkh/mv2WVttVXIbSODjPntSIAWoghY73CFXkj0Rf7A4jL5wJTQuFy/6Q\nR3xVU51gkBupgtwQOHnLG0gN/VozkUgUoKlGaG0UAaf3sHJNNbE3WWnOfcXq\nEksv91MzfJgeJ5fSnR2nNJ2biX0cCvX+hsmKuJD8Wok0fBAptGvJI4B04Usz\niQPbNJE0JbMnqvPTpnY51f5BTxjep3UlrKY3h7e3U8ZoyHRlHMfh4Ak6icwS\n620eVH90D862rJWKouo36eoCUOttM3s3aZ7SVj4dD/vLgE/nJOcytaqmvl5+\nZIqemvZu8z2zUnZVQzoQSDOH1fKsYs/V4sZ0SGOuA5aoUMSZaqeWefqE57+B\nthrX3eiDfZZA5c0wISznq9kcDSh5AVuhCupabKeDWjzpPLiVcDXsjGuyi7zC\nuH5d\r\n=E97s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRrYWIfdSocdF8a7l0q+ZQewmd4d8jufi6esrIwm7pxAiBgqDqNtaBx3a6trS74GGOcy4j/W8SyBWz5d/QNhKoYZw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107202252.0_1626866771822_0.14933259971701607"},"_hasShrinkwrap":false},"1.2107212010.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107212010.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107212010.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-4EUWcIwlpTjZnEDcMTA19p5TDD4tH3/WoTr4LAiqxWtgwLo1SgX40eCaPvNJvcE09EqK6Aw4KLUjTt6GKLymzA==","shasum":"175fb4179eafca25cc27112eb77117c6ac35cf66","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107212010.0.tgz","fileCount":18,"unpackedSize":1194677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aF7CRA9TVsSAnZWagAAR0kP/jgFl9ThSCOsgaEgiZSh\nxGApn/Mv7NsEtcTKm+2m1GsbvSYJca+SxUIy8VzdeJe1uQwT4PLXtUTYoR72\n6t/SJ64uQPny4x03rn3vZVtaeN1e+5MesxUs/pS8hGP7CgkBFmy/CZrEG0xV\nim+/6olqNx1xUAkAKKDwcph1CJfa/MJRBhyfFAPtu2iV3qiR0t+1KcUXBef1\n7Jl2C8ht9X1st8dsGjKMB2+vuf4W69Fs7avy9sMlkfpBaQY9ZCEs6q7sRMjX\n9NHHiFLDAmf7GIzy6oXJTIchGoOwCMvHOdRISYuf5kQjU2upeZ/xcYfXudUG\nFNI+8uRFcCp+96YabUxX7gzY34JK9vAiQaKOVTxnjO1B6dw0aKjehKNOCDiP\nfX8CUXKdZbtPkwSRPFedodcdcYFEdBBHDyO0CnZsVt+XN4nCbdZ268VIR8R/\nhk1b9Kng82bUN7DKPxMo+LtUgW/wWEGDhB/eqDFTTGTjix0SqU+c7g3wKNPy\nGyxDTDKewSInbm/nMuRSq7RkCfU4sgpx2Wk86mcJo4xJoXGZ/ttct4TWS6Uu\nWX56FOEbkgve8poD+4RePuN5Ik7XjeJWxaBz9FcFL93heII4duZAYQ8g5LvH\nRG92hxrIXJRCyL/jpXirk1hQ/tZheNAsCrYuB9HAEg2jysgfDSl2IcD50san\nPPTX\r\n=Cc6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBICBn+X/OevHjM9oXtgq4Y+gPDDW4ab41IVSDZmI6RNAiEA42TIYWBtpv64dlguKIlLAWbvDx0JwdUgAz+n0k9LcLA="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107212010.0_1626972539504_0.279305400077305"},"_hasShrinkwrap":false},"1.2107230121.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107230121.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107230121.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-D4+DtLtZ7HJL665MnOFM6rpwKT1hOK5ARqbt3rqKy5hTfFERw4GK0KeTJMfg76sbHxac4BQ+L7A+ryjPup049w==","shasum":"670971ca89b0a84ca618a4dac7a8d6b4a2b6c7a7","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107230121.0.tgz","fileCount":18,"unpackedSize":1194677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+qlaCRA9TVsSAnZWagAAc+sP/iJx/GC2CMRwHDOx7J2Y\n/UMen1EKlmk0Uq1hpXzjlPmJOCogyAndDaq1HX3ixt0z9Z8gTMkpEXVsXNtG\nstDwQK23yFyRkW8Y43vkQIu6X9OHws8ksgqwo4jNvWDt9KqMJAhWQS6bygV1\nmlle9aUvBxl1ELKRPP2kgU6v92CDMAJA+KKVbKIgZtO01e0i6SsiKXIwEmkC\nVSPFiLU6DQdFa6p9VN9Xlt8vXJ+wwhgpd9T6r9uqoOyuPEcS10QOCQLB2mm+\nahGFmVrnic/vdrJYFiqYvyGjRgEQ0vhzEAWR5y4dBld++V0+r8F2+K4LP9/q\ng8qlB6QIQlDB7dRX5rN/kGw9xPoaCpouajDj2EW5NRIvPt6YjjzCmNR4SH5d\nUEpAqNOIlyiLJ5lqDfEhsQUckN9SiDCaQkl/yHsBvaKoYXDyA2elc99pqg+h\nb1ixge7ee9pOUTG3MBKT8fdbOzT4lxCH5lyuHTgNGp1kqWygimk41QwzDF4h\nrCZTVGH57mk+ul3BlpeW3MohetfnDqeRxdpGxylGdJRA7dox6pswBBlbK3Tt\n1R6Czi0z6MnShevN7Xx6zoJyf1DrPT98cGXcAhOs+4/WB2N1k9VskVD7gkEq\nPh7ZPOmmSjUMd5CrALYBOq6cCXG14HkwwGnsCTqRH02zZY1du3gwV8jPd8x2\nBkNs\r\n=JqJW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJYaZE26m91zevBLvIff1Xn2NXUp2cHpG6SIqVAyJHqQIgbtsLYlQafTU3bzwBODnYcJjUxTeRYFA2y5QwduTs03M="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107230121.0_1627040089971_0.9112777851916303"},"_hasShrinkwrap":false},"1.2107240354.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107240354.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2107240354.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-/S27suK24lpDf60M8KgfAPb4Cdz3PS9SzLiOgApmrN79186j02EtUl3mmuHMMVgrltKpgdE0Z144lcfzVB4UVg==","shasum":"7338e237348728a3d39db96b8a5f3bf0922945e0","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107240354.0.tgz","fileCount":18,"unpackedSize":1197301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+/hKCRA9TVsSAnZWagAA1e4QAJE7YTvno3wOj2uwpCMY\ny3LE4wQJcHpMMJXI/cN8sB9LEUV8Oa64/6myPybJt8gsQxH7RtvcGNoULkET\nhjPbhC8f6VCe+v6eM28E0qwVF1VWQXRSOwsnX3AbH73IPlDhZItz4Q/v+CgR\n4eFVQbCBF82FoyJljM7+tQEGDOV7y4uPVo/Ag9QupbR1JQhWgwOVQkHrZW0s\nBRqcxhP45z1eUgnRV8K9RaXtdOvBLwlxruUvAisoYXR42Q0UFok8Vk4BFm4P\nTl/rkrd/JNBZ9vgWHC9As0yEXne7vbOPMOsL6ak1MIbNIK8QMGy9TJ83JvSw\nKU5sjTP6aRI7dzKmLMH3jbyVEdjLyFadSvqjVACAm7+kZe1B0v2UYadOYWA6\nDZvghrHWCTNYXouPWA7dUrF6mMeRzXtepJZI/PjjqwIC+6XglFXj00j6SNtG\nnImF9NbdfjLCldCqmRau7j18FtXTYxD+1/JGRR2xvPbtRUz0jj0xLjivn8Yb\nHt5mSgwlvaCbNpMf0GpvQFHznAs+iD4Jy0VMa6/AfRDuuPReKlw04eTASHwc\n5WAPNz4fQCSEObKyrMgPx1c2WlNC3HVzvC781XIr1aUz8Xseyz7oy+2zZyuS\nPnFn4xuw1zdZ17AxczrAIrtUhHimuKTp8r8W1ev+NJZjtMnlCzvpApS6rHdn\nd75y\r\n=SPTa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGA0/IEv+m3fhXZzafAtpjxgtarrswDFwZKngMulMu9BAiB4SrTbCv5ZNUXvH9gRcZ+NcU/DiAf1a1PO7kzinEYMkw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107240354.0_1627125834501_0.9486401924074683"},"_hasShrinkwrap":false},"1.2107280004.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107280004.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107280004.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-1azL9IouuwmoUETr8mUuMrILtomYc45W12gzZETfYgNXPeuXbeqHisUNbQX4cOLSxg3i9Dc0Kg43KKTriZ3jig==","shasum":"79a8fb39c22e46fbd780dfeed6b79a682f8db1ec","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107280004.0.tgz","fileCount":18,"unpackedSize":1197301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAafVCRA9TVsSAnZWagAAzJwP/jXzillw5SFyPnjBcf/a\noz4HBm5JZ2dXA1JxAR0OT7UfpXAtC4jKZp604/EcGMIjQ5rK3TGhS0suW+G3\ny0u0FMC0SwbpVYT7zzQ942lm/1X5/oicic3dOdZRw4XeD9ykjc4dwGHFsS7g\nMUbPQv+K8iA4X3TSRH57x8woCB5suXCy5LChATb7VpOM/hUiNY/MGv8xsNuW\nkDK/nPKW/U4HYWRHJGDsBW9AqNyU3Do7sWkH79ACKeJDDdzTWgQ7D+TNrj/l\nF/ctZD5A5hw6C4Z/jFcbZcxNt/BYZbXOHgH6+nKPvVyJupdaQYhp3eUtEBPZ\nzf7oRg87ZGVrFPDvoN/puAjWpQWhOZ4GfTrGK1Tkr5cxlHN4z6p10N3noQDA\nR6+j+emhgbEf0zKJccwtnHhMw7ixnoaPxCwPXKWaVU2sIDt8P4ClNL2Mu3ms\nfMqPECphImuevcczaDfPBuAVe4DtFZ2HjjNzayThsEIkltIRoR6zEqFOfdp3\nCQNUWBUfCOJR0DJaY12z4uLcgYYZSnxtZsGfqcRMm5Nog6KO2cVHQAaoorEu\nCNMaooIr/2ojqhQo+KmaO4/O0YwklX9ukxABijBgM2iLcvjWeIxOLRVyZISL\nRwziNJWm/zqdkBU5Bdrhu1y1qsPFZGF4i7dEZtpzxIzlsPcEVi0YGJopX6Pz\nOY+u\r\n=Dd26\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZynoUGpamJuzcJlJqNZ+Lhwhp5MobesdkGjDotczl4gIgWzbFcZcLTHbAbk09xIE7p7mSz/IoR5Xup1ekmxADE40="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107280004.0_1627498453230_0.5320329811789815"},"_hasShrinkwrap":false},"1.2107282214.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107282214.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107282214.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-L/TgNcVfXpK4dr2ByONw4wHYDN6mR1/pUxLfvc/+mh216z1DbdiDyL6JlSYOpDAiYSat2y3+HhY39j0mmHhVug==","shasum":"6e54a40217492678053697668760be1804e28d76","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107282214.0.tgz","fileCount":18,"unpackedSize":1197301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhApRoCRA9TVsSAnZWagAAUPAP/3hiM5B0JhMU2GMI8S4f\nLyfI1dOm04MzAQhrhpb10z695eop4BXOhOQKi5WPMvigayryc4+PqBQNDqVM\nTLTOABE6hL9czn+hzR5B0V5AdX/i9NzEZCFbG1VBzl778r7v1Ud4jDMe/eCz\nPfBIcK8VwK0Gn+VOET/Zj1NxE4DaXLPUfkJ0uydafY9KRGSLErJ/Q/KQmrJY\nO8FFYwe4iqSW65wVpk6q7jUxZunlOGHpDPVDM+Ib40zLHBL59Zl6ti6OS3is\nT5ES+IyxZ3BSa7z624Wufq2Zw/EOc96nbjNXLQE4hLtVDnO/8ozgf2Rzrcmo\nFmfOnSvdc6GoUgTCg1Bskwvkj4WwE6CiE8kcR9NVQiAzArAB+KU+NnW5HYcx\numnGV7lg3A2E5DXr6gatRACUZHh10xA1XwueKR1f9bDVNW3XW9PhaNi40jfF\nAKZr0p0yuHpudrbSqlG6lahjSi3yzwQOMl33I3oULxBl5uwNw3w/rk10DTXW\nt5qlQArGCZvM+F7LCljl/g9mk73SCn51bovIl6kl2cFE/88HHMw2Waltsvcb\nOMcJFo5I6mkmGJ47go/bfFCf7zENaU3R5h+nr2f5R7F5QuthhguewKsKlSrd\nNQaVzx8irKadg+jFCWjsbN/AlcePO4zUS5ihttU4Q6ydPmzR2G1URbCT5U93\naP5h\r\n=5IQN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+4AIPqMyIu9YPctQ3w5O0GCwr1ltINmLf+fNg5Qmk7AIgKp6w0t696ca4M6cfUGLvtTu7QG1UozfVnQcyghlEEsw="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107282214.0_1627559015838_0.20019658840835897"},"_hasShrinkwrap":false},"1.2107300532.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107300532.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2107300532.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-yLK3Fy5bKlqlTRFfQCTk4z3+DWpkxzBI89OHrxZm3gQRC+u28Gdgbicz8iY43ZA0f6C/+HKyZPr+LnKfWp8zPQ==","shasum":"970e9a8ace3950f750da7fb054deb8c3a6120207","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107300532.0.tgz","fileCount":18,"unpackedSize":1200741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA+T/CRA9TVsSAnZWagAAN18P/RGSYnmqM9FX6S+A6cHH\nWa/jMQaOW67sTbyd6hF/BIEwMmeUhc+ys/l50gZ8cHZHEC2z3T8IvVGVPyVo\n+ITnOO+Q79WC/DEeeVInhbVl2I4ByIs21s/Im+QY/ZvhL1n6qd9X91TIsTD9\nqiq7uddv0hKRS1IsyKSxF2im2+CzV85Ij/OlCpcQihfN6l+yklcMU0/2W4O3\nnO5iKkzxMj3gSXRolmuHr0esS/+Nc+dU07vnCRTWKPwtMFmE/zPsI9I2rWCq\nFKtY4Yryg68pBm3ytgJmFeIRbs3d5qWUrAao+B52YPa4qAaBpJ6mPDMcH0/V\nXn9Qlzcy5zDLnjlBwMAq6GQcT5EFBZ4W8+MGRfLwnEIFa50AUqgF0IMYmNAA\nv9R/9u5EYvgtdcbgo2G6+niTCM8iZC2mi5SlIWbTblwAbUlFYli7c2uRnzJW\nga3cSPbqgIYKMHYzxF+dbbRXj3qHutLWUxBLHuNZ9APP+0chLkbQ2CRmb168\nvOqZRPsUQjX6/17QR03ce8vfjE7+vb0bUk/K876Y/VEnZqB2sciZxNv9L8q9\nCKIvPkwiOcd5se3EV/SFe/d4aDSbJbDdlICH2+X5ho3fLIIck1vMfqqYa9AF\nlj155zg+jvPsg6IN+RKsCQ1RTYQWCMMKF+wh4qKHz9kOv/pM0mrLAH+vSl+6\ngQO6\r\n=mCzu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdxZOSI0TzGluOoAY/TTyPQDVcIPn0ylXg+x7nTXuUDAIgUfXODnGSZqwZ3crIeInMvE8QYnRep9X3s6unuBqqQyQ="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107300532.0_1627645182955_0.502299061052675"},"_hasShrinkwrap":false},"1.2107302322.0":{"name":"@ampproject/amp-base-carousel","version":"1.2107302322.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2107302322.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-c0FQAtndC7qoSlNOjXz9YluYqwjQOr3ljrWQhnpAtDUR4qKslhUpL2OjIL39uuzLci6WvJdcBQK/Jc0fOJrEIg==","shasum":"da7689b80f0e88e50e5c0fbb15d28184181045b4","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107302322.0.tgz","fileCount":18,"unpackedSize":1200741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBTPWCRA9TVsSAnZWagAA2Y0P/1Wa+BwpNrWhiNYnxi7d\nJxPvPFnNCyO4r+3+Xb0RnQVDiHEIZRJ1GQTQkyrrnRsQIySRoBrNWSsB7/TK\n/fUQfAbmoxzrgHl4fJd2e8uQR5o6cQA8Pc5SMILv2svwblscpCvUoQqQShAB\nVD+linwpBgopzFMzrY0N8qJ6DCC91NxUTWWtid6Pem2Ll7y7AsJF6hN5609f\nCI0Jbntjoq0BPpicsELLaETj05KnRwKg+mTXyws3I7k8ipZaewiA2uPN+KwX\nRSAi37kQiXZA9Fe57hI3g9VVGTtm7kGTLrKDCxua+728Ty6g0EvqrBnps1Sg\n/xB+y78VRINd33VHb63xTmPtLe77vVgkud2JgQCRRQ7S7uwpAVrUsWgUFm3I\nqClkmTewt2np9gy2gFo3mEGN2ChM8+O2TgJM4P9KA55jagUYqSQLgxPiELRj\nHjZqVXs6zBrosRFbkKR1WnPXgdJnslJUkHTo4L/wBydaaVNKdZTT0QVcoJ5P\nNPsNd8q3CUY+zWeH+cFhJ6Hke2v63nzp3sO7Yt+jzDjL1iEWryI6BLV3FXzA\n2Gr5f2LBRCJqcNStMtIp66TUeGVnLPduyeqTWP1jw4lBecVCEIJocdXwyMAu\nQgztZitjcBMlnZ8tn42bE0k/NotZmYhPa7B6b/FhaaMEZ30v5tcWe2mYhsOz\nLOCf\r\n=X7rG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzx9/JJvpamkgI/YTyOxyGwji1TDhDJ7XDf84sad92iwIgeIpCSEZNfxooFWYQC9iNAJ8B5PattDeVYq5NHpWuf/4="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107302322.0_1627730902142_0.2407108181244848"},"_hasShrinkwrap":false},"1.2108030112.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108030112.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108030112.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-GUCrSIEuYMXBT06C7Ic6P5pjACjmzJJL2mI55jN1f5Rl84tm5LMP2UuUe9sKuR6WmFJfjKPrXJ/0OVyVMTsbwA==","shasum":"668dd6eacf429dc1ac07758ce2ab9be0dec78d72","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108030112.0.tgz","fileCount":18,"unpackedSize":1941152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCSt0CRA9TVsSAnZWagAAWd0QAJUUDSL9ekJHjhFlV+Th\neZt9iQqhlh5i6L6mYIBfocMGKuCVRg2gSfy0PZWodBWU2WYEqevNRPBR15yf\nkrW7yLmNk/tWXxvQXiHRWgxvjcFR1NdulAEbtDiK5wVbCaYaGFSaJNXwoySF\najf8I51KslQamzZZ+hqiOPYJqLuP4NS6R8tlyPomRrc7rCbiLihJNXSgEq6C\nRKQ1iVURdt6m0A5XvO8dhk2WCgkYUvkKVAHqQXONzeYP6FeeE1vFB1rU4MMe\nidwEgiJsHktr8HzFU315QrzBhgP1hZqIxACLHXG2iYdKxgp83mVACn/y+n4Y\nXUsL9+dpzXpfLJdXDOwr0KAk5yhAKCPrWZodaRmTs0Yy79Alzgpr7+aJZ1/6\n6rUp4a3v3abEUJt4cHG/yM8KTT0W7pfSIFF7GbsJ5tXY1FKehEm1lZ0li00k\n2lH+Xq2NE6pEBf9d0uPr/WNwR10fd+XSLT/aYpC6NJgfa3VHAUmcrEH5HsKs\nT0lYuiunBE7sDxuGkG8dJku2wH4nT1IMVDHhRj3z9QtBSKvzCLoA3q3XZj5/\nBf16ixq2W+Vqxd83tITaGQF6ywbkVQ7mYjDJKVHjOVMD/ZVicbummaiUNz1C\nm7kDx9QsNt4UJsAtqcSR+kjOFVpotNT3qdOFKKs1K24DaljXQvRc1WTBlyB+\nQMKV\r\n=dWLy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn2X0t6lWL7w45iqyCI6Hh/lzr9eO7JtOsNC0uXqHesgIgFe5C9WnhzzI3rJLzI4SGL+kV9/E51Q18jIHLOKVy4Wk="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108030112.0_1627990900156_0.975593839509602"},"_hasShrinkwrap":false},"1.2108040347.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108040347.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108040347.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-0tSp6ZxEQA5hOwFMntKLiI2qIyOs8IpUFjxSjqjWWU2cdSn3FxVo7WsjSV13N5saRafqT5ZDujCb38oqJLmwWw==","shasum":"09cfe45297cbf9b6457647aab65daf74e84ba65b","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108040347.0.tgz","fileCount":18,"unpackedSize":1941152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCnnVCRA9TVsSAnZWagAAA8UQAJpsJsfMZ1/KZMjsneQX\nnBED9vH/KxfI/0Vl15f8gXye25kFJO2K4WgFA1b0llk+SjfKB2vZ9H5b1su0\n6vEW5mlZqKptxN410pVJaMiCSk2b8do/DblyrjXE3aKaIKolntk/bOVwHZtR\nwgtS+Nug5+LmM6Tx5zU95X8rrM1ROeeAz3yPnJ6AJsNL153Vh4lDY/lHBvGS\nNT1G+wmaNqhyP1gR1s43CIO+oEdM8x1np4aaaoJBELbqwifIOD7DSj64/SFZ\nC4bbzKVEVAihRD0nYUpBYI603iNu7RFCCzGFl1xRtIJufvxCt9T5mLm2ocA6\n4/ZhhYGHXEDkiw7tsBeAe7lGWN4tJ/6/TQ0AR8eeXQ7D9ljfrD09Z3CyW6VO\nNjsP1UqsptihvpSWHs+h+MINHIOA5EMzSpse9Uky8T4RUEKRsWUn5NvnYgEr\nptGkybHIqGvMpvcz4k8PSTi/c3uvD5pLG3vLYxlZZDlYNmBVgg6FCJNGU/Qe\ncrcwyd1jDE2xb30+kWGTg0gPe/axrYjc0Vis6v8QeqnqM5XhxluflfROt8hc\nmquaalO89hdd4TDAy/b/5KVGnT+mmd1dC7xlJ6gRKHXxk6matJnULa06L7Xj\nvYqDxdSmqLhKvQxqFD28Tx+3onS/zQJv527j0DsLZ4NS/VV6IRQaCwKsbmCA\nPTqG\r\n=32GL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgEXHvOli5u4qQq0NZXu6PUXMjS6g+g7eurTl04iaDhAiB5jyiMkFqcu1xoBKBODmuiFYALD8bmhoDqnxdH9/aEMQ=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108040347.0_1628076501126_0.614393680290561"},"_hasShrinkwrap":false},"1.2108050645.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108050645.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108050645.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-KpMeAV+b9xYvjKcWEwz8MkFXEfMoBNzfcKeHv6NLxp/x4MsZnt2oR5ZoTmZQ7N+34wI7LvlhyNLZH9mN2TRpvQ==","shasum":"7567b47eecc8d85346dbd6c5bebafe84ef631361","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108050645.0.tgz","fileCount":18,"unpackedSize":1941152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC8lDCRA9TVsSAnZWagAA+CgP/0ECnRjTME8o+jc1xAMv\nWppMhNf+qDGssNtyE/oV83wB+Jr0tFLIiepvaeH50sN0xpoW6YO9Stql2LQu\nUZBNpFcWWo5tavPcr8TgbmYWf9SHZ39zg82UHdaqEKORqb6dFH1PinDirerj\nX1c3yvZ0IJGElfs3jlTOiIpCNwspECzsolUv9GDijr6uZVdRX+WUOR6yJARc\nW/C51lnsOQC0nHTfREravDHMSVp0ucDQXyxwLR9gzLpBxTtRXYwSMzSSM5op\nbKhxtukc2mraji4VgxbIyLzXBEGKlNQY+xqwq6pBN4tNnEfXByaH2vQANHc2\ni0IkTKke7KsmxP9LOp9qe0CcxR3nFNNImLrP3ShlKlkwMi4xvgRw+tXT3z5W\ntDocZQzpS2tZMgn5L9L7eOzl7YaCP/QSbU0sf9W8kcxyGbMVDgqtxLYK4btM\nZ2xjTBGtQ0dARYmJHgNwGqLPXpS9rOSrTzu2ZjR4yFjL8beQnlvKDsuzgviV\n7xxCfLSgqS2zk93iXX+2djswjChUbTjZKgxn0GYW/A4xrYqvbK/qU3z5cMPV\nNCXInP/VKvUPsbFkP17nIDb3w9a3Ykn21yjjUvdSxb83xxJRBdf0Go/ZdFNL\ntbs7yFvgL2HYytVRa1jJ1SIlRJnyO7r2vquYlfseZOBUkTgQChTk9+b8aTO1\nhIPO\r\n=4wpl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4j7Q1FNgIVPZT830y2FDR6K2qou9Ra7s0ApJROeTxMgIhAKninm88kWtgpQS/qH2XxRqubL4VEB5QOv456EOo/VVp"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108050645.0_1628162371543_0.7130928489789206"},"_hasShrinkwrap":false},"1.2108052321.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108052321.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108052321.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-FeJSJNCAuvIwcMtdXFz+uqXcmVpIhNSqKdLEDX4TxSkAoMIiqmYxebiHj9KD/l8a7pZWmxWui6OAEyFaPNgj6A==","shasum":"6d5187c9280599789939d9908d2a11a80aed831d","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108052321.0.tgz","fileCount":18,"unpackedSize":1941152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDRzKCRA9TVsSAnZWagAASLAP/2a+2kU5rHbYYLOKI1YO\nAFvTYe9cDVcuPvaadgw31PeriqGwuBb9v9mwBwI0BJmFCygjRcqGlS874DJo\nomE1ZHD9wy8APTLTyKhDflC7mBa7cN6L2bx7axmsRFKJmIfuKcQwaHNKN/+f\njSah1w5lsPtOf82edBVDjs6V4GGPw3xJWzoyOx/WfhQdj6pPvHdEI+SRxYbn\n+c9VdUfwbIdpwYRAtmM4NIswv9jH+6APPuPwQrlkzaVGpT9LClB1ynO9LDPA\nElL2N8rVKtU/Rkau7PUk9d8KXEvPoOl2UW6PIpO+emPuHWXzqX6BxmQCnKct\nC8nQ5ic9qzvpruz3qik6IE6dlRhXSoibm2/vVUj+O2ZhRUGY+3pb4WHlry6y\nkgyW/R11QAynaSD/6zBPtq0Zjrw8MTso4vH6H0s7lFOwwXp/kHDnr9rKAjW1\nJt9OXOldoEBSQ4CpBDXyt2Anx505qodqqjCC1We3q5FaE1m0D9+rPsLOFQWv\nb5CxWOep8CxMQRQE8vhFjhagjAytsdQyjHjceLQncN2Yzwy9Isj/hfLQEIfT\nz0Yc7x+PTWqwsBy705xuD+Xbi2HwR9F5LaotdntbqS00v/Rdp61YLTFjLyii\nTsD4MLP/prHyBOhB0iSCduOaMxFTTJXYVJF9ZF8ZzNVRt93hkGWutAxJAlG6\nWY9J\r\n=xiSD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2nLKzXYao0rukDUPfles00Mr0Rpom7Q1BD58DrBAmnAIhAKRkPGsYWCyfDQk++DgN3xNAu8sDYFlg0Ii/MkyHbq2t"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108052321.0_1628249290443_0.6660399616589614"},"_hasShrinkwrap":false},"1.2108100143.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108100143.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108100143.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-UwXo6vdptdVn0jEOE9r/Q9v1ZkMdiiQPBQvZjkhfYEJ6//1ph9nO1pyFJ4bBtOPaag3Gi8tGiuui/ArA1AbuMQ==","shasum":"3df4ff4ca0fa28b0f91b9aa1fcd6ba20d44d49a9","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108100143.0.tgz","fileCount":18,"unpackedSize":1941152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEmRcCRA9TVsSAnZWagAAZGEQAKTCx502Krp4O7CEmioJ\nwkulMe3L2M/SniyhHjHEYWkPYbXQeM0X1yu2BrFVMuEWqBrP3jfz1v5F1qZe\n5yCDuRmRki1sKDCY2HbUJpphUQOWSFDUpoQ37IXhXNYstz3e9PfSMcff9VEs\nzO29/18f3U5/OQ6Kh6opNofPVWjIz2aPyqG6n11tb58rs7othMd7OwV8sQK/\n+ZFifh/5PzXXwS4BNJ2UZvODkRVcjg5FusvZlaD/TL3Lw13BjmF+rP6LYVqF\nM2kJDyWQTiq14H7b7IyQpDxZUEh9ERLaDmN810PpiVsvDs12NNF4TcziGP/N\nrTS2s1o/dLy9X/twa04VuG9L7lM+R2odcvlvdhcW1xoaPBdbbOQszqC2eQkz\nlGTNvwmPVpDWq1LrO7tFIl3Re05p/1t7feUxZqDll2JxEZVhzFZwKFNMoJKA\nKbjxHyZp9N13uoG7aTXznwqPwVzhiICVkuZ/TRnVRSoDyVlSOcBWZI+7NXlO\n1fY1dRTOXNE82oZvMRZPykvkUw/SGzUgnH2sTI+T8OJxEC09EAJNY34P65No\nPcIUUnvLTlajk+tSTbE6uKQbzchAXGbKDwu1/yVnrS6tA7KJra8mSthWZe1f\nU/sVWkjdk9nCpSo0evGkWH8Ja56HpAZ8l3IUq/vqWlWjPtEqgY/F0KXlB05m\n312K\r\n=GmQb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkP4zUfMIZu46pu0/oMEvQM69rIqkN37HKqDRzKiLQ6QIhAKp9axUQPV8orEairVYXDzX+v9k538IpmLa7l9myO4Dy"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108100143.0_1628595292428_0.1214752754352415"},"_hasShrinkwrap":false},"1.2108101942.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108101942.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108101942.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-BrosnaCfUbJ7sbBEOHDIPrWqcXC44pdlJM5YnstB/F9rQ4pVtsg62pfPxMjBog3X2tY3CMxzq69njhVhrJaWYg==","shasum":"5b71e15c0368b4bc8a72d091794ada29c9e1cf0b","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108101942.0.tgz","fileCount":18,"unpackedSize":1941152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE7mkCRA9TVsSAnZWagAAgQ8QAJaVgFxrC/JnGy025hGQ\nZqJFTT87NYbBhs+Z8WRy4Y+sd6KRtp6qW4DMG3iegcq0FKw3PR2aOjfzCfMH\ne74qXwmCbBjor4/Ry8jFXXzTozHdupykgf5Ktl3naXSNqwdQiMCdaYC2zd69\nGi0GKj2EgmLfLexSP3Yt4mHUevSHQ7O9CE0PMdjpjm7Wz+mhhwKnZrAqum/n\nj9Xnb6JDTMk5t/cmBK2jgbvRtZ3N8izkC8CLip8b8RN4s+6LQMntMRocWgg8\nFBgRFySilJTrz3jg33weDl4+rYsxS8D9AAq8H/PVK7CQoFC+H+ZtfzZbOydH\nlN9Vh6NCFz0iLmkgbo2Pk56Ogfqzqq5WQsi7mVNCPpg3A3vPyeY+MDYOPRy1\nAarFSrg7/TVK3n0Lll3Q8eBDxCo/XNIalvK/9zUzb/pMiNYty01nuu59EbF8\n7LGJwhFwe+nrmm7OUJfElY31Lj4u6je6gCnGP78N/JihOJZ9VEidkj1fCfmz\ncSceMsyxEYNQ4YK9M0KctTyYq3GROlCAvzazL8X1L+7fYEaZActS61pAhTwU\nR57B+ugeGxYCeIXcpWfAUOhWLhTt8QFx2V/UJ5UuxDw3suX0Ol5WMwXxE/9g\nxHsuoNPJtL0WOEVJ+C8q8Y2QVfn+T0WgKF/VMZKO/M1tdfYzuRtI4OLBgaui\nEKXR\r\n=IO5S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz4ho5F/x2C+amc2qGJZLFISXDageOZhL2C/6EW2dHjwIgYQTk1NEI48jFgDJxXkcF6oYakVHLtauotfaNcLb3bJo="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108101942.0_1628682660126_0.7237090833128477"},"_hasShrinkwrap":false},"1.2108112212.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108112212.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108112212.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-0gvBG1p42Vj7LPu8NVAdH7Y3tJv27jlY6t/07/ZT1UqJEGBvVHZ1GLw970Dx+ZsshAkHeMXXl1EVN+Gwy2fliA==","shasum":"be13dabf08b9754ee881d26cdc4b722bc2fc2556","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108112212.0.tgz","fileCount":19,"unpackedSize":1945471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFZKjCRA9TVsSAnZWagAAKdoP/15U+gzf2n5B9oAyNm6M\nekNxh0I5flzQn9+IpicoWTlErWMlZ1NFdW0UsLPVi/4g3j1sonItJqU16qmT\npUSZRv6ZSA0CRgtYZHoxhoIf+v1tCUk/zEMvMUchtIaItAyhtBhTeC+l5OJQ\ngoeJZ4cT2v6thn4gTb5EU3dngzyM1pNl5Al/V5/AhteQ5i7vnjfyzZS5NQ5L\n5T4X8sfGFy/jyvYyDVHQk3rq+PNqb3hq0A820biRykcS0D3cnZSeuv4p00p1\nd9RD4Va+eny9h64hu/8Dv4xGOqm0uBIG7SHkTERqoJTMX3JSjOnt6tXyFZP/\nxBLPp7WWDxPZzrIVvJ665j7b5my/zfS64fliKOopk8/L6tzCOXfld/rLjot4\nDfRcDkGp8UfO9C8qGRJ4YCm20W3Zw+DNd8PyzKHBieWCEZoPrl/zQ61qCKiK\nuSFvkNCndCUhKcpbI+qTO0bFY4GslCbGwJs4lFJyuP2wHr3FIGMon1RZRS06\n6kXaCJqZBk0UqggqB9gQSKvWJrSdAxOZ0eRx3snGrPcA8D620xdi8uHdqHk0\nm8Tjw6TUqM3219K4/3RmEEUKRIR+EAKwr9JDNK3YnI8JysMmZp5U+6/aw4I7\na0Y705pRGcL8uE4J5SZGg1MeS94V/4hj/Xj8YDqoQ25fNGQV4580wSbjIUOL\na7bM\r\n=WTh6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnks7i/0k/PObhvvzafWju/8LwSLCvUc/dIEWIccwMkAiBl+8jPQA9avY0DYNyAxQPVgatVbkqJA7VX+GV4HaZJmw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108112212.0_1628803747583_0.5066762583644997"},"_hasShrinkwrap":false},"1.2107302322.1":{"name":"@ampproject/amp-base-carousel","version":"1.2107302322.1","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2107302322.1","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-GqYb4OpW19aYFGuyD8ib7az7gULsYkVuslNAZu+TQFCxqZaPlLr87xBuf6Z6a4D5rIgxZA7ZczK6gVcKRh6zoA==","shasum":"9c617afafad62033ee3322683b4cd607c277a24f","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2107302322.1.tgz","fileCount":19,"unpackedSize":1945471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFaRyCRA9TVsSAnZWagAAm7YP/0Fp7glenv/E8FnNKYjs\nvbkgOcXZ2IM3l87IEgR33Y73/g/x34T+kqIMEmvEs420syjP5LB0YnIhAq01\n+cs4AFVZLG5h2aqQIkh3Qtu7qQlHiluz8y+ReO9Cp+pSwc9JwYN4Jgb3woJJ\nKU9EPd5uVioOW1TpUZjAmaTImISsroLezrsLPFsV4Nc/X+T453X7F3fu5W2Q\n/7OzBqHYT3k9vJOiR/MKlSLtFZ240lYEQ7fSYkwpWOBmyv2nWG8wjDZk/dGM\n99ltij6Qsdj75fz7I+wFV6g0i3DdTvMgXYJ1gNSVli2eQG1aCusRY/v6brui\nGlTX1lF8dodBOXHVua+tNrLnDkQi9h/rOQXdY40b8TdX3BmZskwZjGLrtKXV\nqMUB3wo0uoahtg+7D9WioEzeLluvDx/7QuDaWhseRnl1Dl+YtwB0kmvZQwOd\nhJZn8386t82lsgGzmpebl8oep/YVymUp/2Cd5unnse8GUlWKmHktaT+w8Hp0\nk2BclUlCz88fNkpslHOenTa/6ngdBNwSDbQvFB2Two7UfmkKI/UMFr7ZrGSJ\na4KUxyEnQdMrIdmnERN3eGoP8v2nJ2J1VX9t+jxU0hgWj/eHt4Z76a/C8JO8\nR5CCWm3QzFdPk39ioy1av6WHHyZs3fvU6dG1emmjQrX7MPKtPa7qUChb1yud\nR2fX\r\n=kuEj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQ/oSSXRxLk4fka4E+airn/2sPmq2q7ZJiwXQaj5GkuAiEAwhIBpyS7wPzkTgYmFMBsqFkpRwmfPQJD0dBX1vvUjiA="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2107302322.1_1628808305997_0.6510998316134509"},"_hasShrinkwrap":false},"1.2108130315.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108130315.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108130315.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-KgyUsD1sNXETYpIv3wxzpT495seEsU532EPXWyaMytM39zxykRtwFMloKDutghQ+jwTpji1aGnOqYB4vKDzU4A==","shasum":"1c7ee51ae76b4495249d77030cd9f889b35b9175","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108130315.0.tgz","fileCount":19,"unpackedSize":1945541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFlkiCRA9TVsSAnZWagAAAqcP/0ahPzrNFxLOmFm5rs0t\nhpMK4Og1g3bnMNr1Z06IE1PnHqj6RP+SG6gK8V9pUgts5S859ROq15FfOwsB\nOGYqdg5Fhw3GSk/GOikELFWj/gDPmp1Kxag8qUnvQAMR2dtqwSBIwjD0f2K8\nt2L67nEw38J7B+N46QOkoCcq7BM35VPJV3lBZj+IBCaYcjHBGyOpTYSwLRy1\nAt0qLUWy5yp+3qdy0F3RJBrjaQWRceFuUljDgVCX+8JWRDTfUf7PcirsbCZB\nIOw+9WznIiKIeThh3jsJLw/drZQYW17Jo5JAG52Ofwtv+pRkvwPAcVG+WE0U\nUXA3nGM5zuklp2RcIPkevAuxIUbmdRwc9PQV5kDrBc3314A6zsN0x7c0fRF2\nOVpG07u3GWhe03a4+Xa4n5mw/+NR5ie/yR3n3cJyEEr6SamHHFFrKmu3aXf2\nOR+GLmopvwUllca44VvKE51bz/IKzLKztX2/f4Bac28pRIEO2hPdL1djZDR1\n7CcAJFFAxJ3YLtOF6hZU8SoY3x69IuWneaPF0nnCIACaUWubEEpIjZen0Yju\nDGGc73vhkj8JwCEBnv/Kn+ZRTRqmTDFB1hlHgz8l8oYMjsgJX3xNQWeGv8hK\nAeq/zYFOkEGCU4fUmJO6COAwqSRGVI0fgjdAwTqRImeezbRzTcNIo7W0N7j0\nPMEB\r\n=3pCo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVhtas7x+NCOB0i4kh/cT0vl2lHF3qrY+63fFvDsb4pgIgAeK10mzsW/2/JtChAqMrv9axSlb4dE1+PW3YQNJ+0pw="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108130315.0_1628854562333_0.5587232632497559"},"_hasShrinkwrap":false},"1.2108132216.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108132216.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108132216.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-YILYVQZH8ylzGxNnZKmjD9falYLXLpaOyKEw10tiry9jNDianIh/VKedITPmDvVRUfzUN+MxdXDH52YCmW/yqw==","shasum":"2cc8cf079a0b64f8209563ff7f6f652618bb18fb","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108132216.0.tgz","fileCount":19,"unpackedSize":1945585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhF64WCRA9TVsSAnZWagAARLAP+gIHmzSDUgTgv6dQbZLQ\n6n+da4JGaiRf0UCKVPIWzkQpP9c0veIvBAnXGqoxXcU5ErnGWNK1Rk/yDZ6l\n6PIfuoVZJNo7v0ZIrVsjO6bBMDqxIrciOv3MLQ6LnrI1dztMoXXU4U5hbWGL\nFJxwHm9WqKNVZJwJ+B2PVGAaNuNuAZC4HLt0iAGsLBGEABrvJDx22DD1lSne\naY/gNVUs3EL7rrkI6Eay1TFF5L/zqITGQl4TuLepoa8oZVEG23+r66dmiGZR\nuBv+LZumh3JojNErTlEBUwr+GxyHzkhxDgoinidCkt8xZQwwXFL9dAQ6mHAZ\nHoZ+whetIg939pO7BCriMZFYladr960E026j3lElybxAm1IZnKMGGzOjcAZw\nE/5HR1Jj/v+zLQtrqGcGVqfsJjrnnjgTqvfFmEe/0o2QcRGIfSNBOxJFVBeA\n5slAay7xzrOuFZi4L+TSchHi4x4+UavX4UDpPR2STjNg2arROYHPG0Me03q/\nYN9S7UPretuXCwr97H9yiDnbLQCDODaoOwJFyk/Eb1Xk8TSs9Nm8JBSw/TEG\ncF0Z1cxkYKz0I8V+8nYjXzmGcDXgav1ncZU4VYW07nlp+YU3PwetcdZm2Jk7\nGUi0gnDv573HCi12F8iu7zYbKCfndvhkATw6DBjfaWu8V3JdCC8GmccGM/q6\n9jW9\r\n=/qnQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjBg7YqZBUGDrFzZSsLSEQSn53ml+p/yJniw/P3NFLhwIgVWXfxYeqjQpdyfzkjwr0FsDH3XmyKc07qxm7t9nN35M="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108132216.0_1628941845960_0.0858486619114549"},"_hasShrinkwrap":false},"1.2108170213.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108170213.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@ampproject/amp-base-carousel@1.2108170213.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-6n/nwt278vCWmRyHXzstmxR3Cn8WELicsp5zt77IiCcPRuv8oA1YLA/68lDdP1C4fzwfDXTtbAyqjsmw1RZp9A==","shasum":"8156c06580507849d4b7131880104faae99e68aa","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108170213.0.tgz","fileCount":19,"unpackedSize":1944993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG5xHCRA9TVsSAnZWagAAtGEP/i9rzkqJJhni+3/B38uJ\ngvxh0lzXkWUqacxNqrnClvYRZENjBKDMkzA3ES14V5Bw8j/wjZjzxU1UFAUC\nPEmcAGQplzfPRt5QJLYnVDC/+hK822OO7YKWyFZcDf/EGJE9pw6CaUFJfNxR\nt2RGLNzygldm8AZ5eckcYS8ZjzxYkVJEGnjvWJ06l0RErAq3xAk4jOMZr4uT\nbcZ3pL6ua7H+DwVFZRZl1NycyPtenoa/QAYaRk7BKKPBeD4qCewzt+wLNvjO\nftf4BYr7fYUy0e+M0wtbMk+NJuok9Po/gVpuf7+n6k1LM1pbWmEsVSWUhyPo\nFyzrxLxeS3SUrKovkEsScOrYQ+P26WGbykx/KcSlzhIDtm4MAPYUoxZ5w77P\n/kkpPfzhD5cypG9RKEPX8MW5h86Uy4TUUakp4wH/79KFR9vkgjtv5GJCbApJ\nK94fat88NgDT+KKuWwkpqss0SVhJgBycgGIL7HaBwa7V2R+9T1lBiln6yarj\nBbPrDhaiU5F3V1wvogSVsTqSMo2UBjKg9d3NFLEXh8Rx3l64wE/dBIHmVtJE\nbRC0OwBrTk77dqm7QcL7bWYckqoBq9fxkVsB+zeZQFsCYer9EgsfI6Wg4SFn\nqoE0xpEQCsbX1fZJ6idFzE4TuDJAdoRCVoWAZDMd9Jdv5w/e0x4dKek1PQcI\nb3ud\r\n=n6hi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCb6NPSnProPcswne+9NtYzOSaDWiV7NhsvwjmdH/ia8wIhAOvBG+J8SNf4OAhJklJZdqHGkv/vnCG1BEKNnUN3oFC0"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108170213.0_1629199431114_0.14238484223026604"},"_hasShrinkwrap":false},"1.2108052321.1":{"name":"@ampproject/amp-base-carousel","version":"1.2108052321.1","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108052321.1","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-W0eh7M6bRVzDx67UGKQuVt3Nfn0R29HXQW2zitqLWtTG2c171lqnf50QzLva4Oa76JTXkEkrN/ohKlJxL7w1Xw==","shasum":"3a3db05da5a8a1585527d2e677916ea7291c50de","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108052321.1.tgz","fileCount":19,"unpackedSize":1958479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCOgCRA9TVsSAnZWagAAR3sQAIfhpVnkHC8fep6ip3LS\ntXCyUTcfeaqQNTG3tRuoHZr9sRG2JONgxceHM1rOjHPGpMbBpGfz60QWVhEp\nShsM/itFrhtpx0mIInM1glO8XstjfG07aufN5gOGVQVpwxkajs6M6e09lp3A\nlrXqj9We+DgWxDgsfdESfBv/sVWocam0UfP8lFosUFyyBM3yk5ik1ynn2yYW\nX928HndxQiC+zwqQ/gQztpgcK4Tcq4F2qV8hrJAFHIEw+jfzKLoVWQmoJWBC\niuNk1xwPAM/+SnGZpc0y75U1l5Q4UhQB5qVE2YDlkAHR3kzqKWRpIIXkmius\n3c/3uIWMN6ydZsGTUj6S3sKu/LgavcfcTOxjyAfsWeNx2Z8qOSH/KbovC6IK\nKOdLnz0GCLRU9y8fqS0T6UKwctnk52EwKaoJHj8EaDpO3/HBfni+A3dc/Mvu\nMsHoFVa7sQNT/ZRsGvvsESVdISeBS4ShGMP2tYll2HnxxY9evHPBgQvQCoxh\nO9k2Z4HiqMt9FtuW01b6GxuMvTINbLbgA2lOXJSTh+e6d1moK6cyd/io45q6\nJwl6rK6xSZjJLJ2TAJjlYCnE5meyPmo3Wn8JszRY2wBtn9lsUF5PvIBJYurm\n5pfdA6fz9wadowuQmiZIFaFdKiLocqyGubIF0+yGCA8fW4XEyHcjsLaBN1LQ\nJhih\r\n=BAwB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDFIKx04aoiZm0Y/qo+9yaTMDd4dlg1GSgJhGquqnx+AIgRBKknGmTlNaRkzXQ+El6B5T2MmWv5CZO1CPVN5crcIk="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108052321.1_1629234080679_0.7152248160056762"},"_hasShrinkwrap":false},"1.2108190446.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108190446.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n<!---\nCopyright 2021 The AMP HTML Authors. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS-IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <!-- TODO(wg-bento): Once available, change src to bento-base-carousel.js -->\n  <script async src=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108190446.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-QiB3M5fecAk3aS+bb3lBjGI5xht1vxIZEXVwrin+WH9dcM1zHEjwdxelxg9ebCsxzlvOIOwW3b0Jx7XzZ6EYMQ==","shasum":"a7bcc4431d5475ef93423671a26dbf5c7405eafe","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108190446.0.tgz","fileCount":20,"unpackedSize":1930359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHkD0CRA9TVsSAnZWagAAnc4P/j6NyGg65XLZAs9pQu+V\nAavqDYYm3h2mpbyv4xUBQGb3dEyuv3d0Z/GoEKvej1pMtmuAzVddr3stgffv\nX23R9H58i+2d5gkkklbrJmeE5wfAMKutwIdA1OieOBvDSDz5z2lH1w7TCgh7\nOPTYojhYNRq/WfTFqvZt8F5ZckaQ5ZOr9ZSb3dS0vHI2iXPzsy/o2ZDZeBpQ\nzzLaPQpIXQWpduqw22ENraMZr0uvZghaga7vDLjc8k+zmjwBNmzhLfSIzcye\nugHLL5IrkOFQ5n5LdkA4umD3l3G7PleImQJkqtDwaesa93FShPIkbaGUxuvt\nncO7MA4F0wxim2FweeuKp0+JBpaub0PuNxjgBmOUdSo9TkkEKlWBnca/6rXP\ntKeQ7ZuSJFkCCC33flFJjS/+uZI4gfn+DElUB9E2No/OPo3qaIQ1TfskL0B1\n8LG9gb/M3mKKx51e/fKgh2xA98y9b29SixuQ/CMt7dGqnHLwMKP2DUiIHkIk\nszbWvJaVheG98N3pDQTru+rWBBL8NGdZZh/vmMR128yPxOqY0nfqPC2KwpGT\nFln1Zq/KOZjEECDulxAKDbmbONJmUhP/SsuGf/Wz9ZPpn9I/CR5hEELBUKMF\nFkrmeiGNkCJzM/jaXwSabIO3i+9StDMATAgJbPYT+j5mTqzCH/hCcXx5UlFD\nUVnA\r\n=gSsl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAFNTXdHEP8eP3clZJoDTkLEBAoiaLv0m97X1B8pDWiwIgA7XP67azx77YREZ7y7GGOCRhf/xF+yDn0oWcYIIYKZY="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108190446.0_1629372659925_0.6851519590054467"},"_hasShrinkwrap":false},"1.2108192119.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108192119.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108192119.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-MPUf6+PbNaUgEk7qHERPibQ9+Rrnu9j6ozV3ZjDLa0XUKB+UqhRDnptsTTzMJl55qGhEbSRytG87sYaXkQB+Tw==","shasum":"baa7a57449f1296d37baf8c4ee6c5e4d988de0a4","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108192119.0.tgz","fileCount":20,"unpackedSize":1790871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH4/6CRA9TVsSAnZWagAAavUP/1xG2m+xLGNErbiay3kC\niTA21eZ4LLmvAUKGfnIh2RZtT0OaSPcotslaAZEkW82JNv85Brq6HGEJhl61\n8dHJ2J6TUb9O4MC3zCsf5e0pL0/Vd+3EU/m0N+TDoDqKrvoU9i4X0M/wiZpU\ndq7b+jqb23jdDE0Pmk8KVY7Ph4+cMcnynnqcOdPZckHIZMdw0u8Em5vwoEcp\nXgaTLbe9c7kOOewrY5Fl2GA57YPUs3jbyPZeaVuRho8/xLF2EMu7+JpmWIPP\n+ScXaBbZoSdAiOk5llaJFuvuqjLXkoYJuILkoLsveYphiKABytJiuqfU3VuT\n03LFpmJFFTBd6pOfP6MO5+xcySOvAQQ1vXgRsppBK3W0EX97qPxNABpiLXLd\nYtEpvwzIEvpzwCsRraNaVKIgHhztwV3b3veEDGPey3X/YWOw1lXZKbJxmk9R\nN+jWo7RA9327AXtACDEkfXqCcAbvFXhlb/9dc1ScbbRGo8vCbd0UXXmhLgiR\nOoS960gFiLsZzLSxI7UckFEG8Da2RIN9FSNBG5uZ09UHma8Cwy6kjqbm0hP5\nBJ1tgRCCf6uT5Bk3Y/m1tqvFanHESU8egrk+08Qv7uyzRivikq9zBxRHQ0Ey\noFp5wtOBaH220GpJ3U/RsK8El0+V6uY5IXHgEwN6btujKKY56vvm6Y9ik2/P\nWNnV\r\n=UtRe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGdZFPA8QGy0+okAXMYcs9PdO/5m1lfaIUSObYXBJ4lAiEArWJaM3vJ259CBWj+yMCie765OBFSe2u9PjNxVadtV4g="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108192119.0_1629458426524_0.6483054553654239"},"_hasShrinkwrap":false},"1.2108221555.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108221555.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <!-- TODO(wg-bento): Once available, change src to bento-base-carousel.js -->\n  <script async src=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108221555.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-3FnzwG76esSQPjOM3yt+rJ0TeUvpo/035fmQz6ROSCbMSyqkr42X5CXTXvRoe/8zntv1PTNCoNVMGct9GLf8sQ==","shasum":"a74feaa1a99796ef41dbe4752d8a62f95c2d8da7","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108221555.0.tgz","fileCount":20,"unpackedSize":1790871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI8h+CRA9TVsSAnZWagAAmu0P/0Phf+nUBw3i6vBjIGMe\nzY4ce0ODJA1V3mh/EYDPa4E4dJqqPZAJLEaKlaVnNHgQiknoxbbhpUF8O3sG\n1fUmUuzo4bAqcRG2eFWQqnAg60Y++ySoaSgbDXfWcqOLjYwJ3Fb+Ex7ekeHk\n1QhlBe/kXhNPIQidfKNbU1WGiqH69sOzghDQaa2YQUCDrsODzD3VvmnWJj7X\nJg/6FPImBCbzMoAUOeXuXZgWF5LYP0Eo9CuGIAqgzR+7zJy3EHOA9Ct9xe7D\n+8tfsu/eAg1Gieqn0oSYx/Q8LSGnRAoNwl44DhwJWG1huE33ZGGwLLX2vqyz\n+w9x8+HKDjaVcWUiHxEYj7OLZFWaSttLi2c4zUeKJYcJCdCeXaKafZG59o3y\nTT7uTneJkLsOXd6w7t/+4EBfeGDTqZpWL796WaVpAM2wZVxf8pcdsasKZDyU\nv69VHdN2YSUOMdRgoVNAgLX17w8BHoC0imMN9IjD/dHf/bJiOFqNAQOCRQzF\nTf27lQSXSGZTmWaDyiWNidUXIUX++UZ6EYrnJSj0HIdIj1zno1w0sUYB8QRS\nN4zEroy342BY/WwEvB1POR2GOHNeapCBOQozIjK3mKEPmli36V7VRmAyYSvn\nZXMjCNrhfSMVdzYXsxA4W8HOIUOYcpQfj1xrmNVhU4QjbqSNjx23H2aNXO6u\nO1S/\r\n=vuse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6H6TVd0o9lKosFVaHoN5EXMjjkxsQyDcEgk2qmntNEAiEApTlYvVIiTD7qhJkDcmABEnS1XS4OQNQo/cEU2I+RXCU="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108221555.0_1629735037992_0.813745920344146"},"_hasShrinkwrap":false},"1.2108232044.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108232044.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <!-- TODO(wg-bento): Once available, change src to bento-base-carousel.js -->\n  <script async src=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108232044.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-Z6P2v5KGACpBAeBzBWnZLsvgaXMRfbdfZ+ObBqKrL5njgB9DmCMg2dABMi5htxkOsNuqSPUE4oXDKS+AkiCIUA==","shasum":"d47ab1c7c4f5d74ef44f3623e34bf15cdf3daf09","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108232044.0.tgz","fileCount":20,"unpackedSize":1788891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJNh/CRA9TVsSAnZWagAAXmcP/17VjCCMUb65FlyLKlwc\nSnn+BcmiHUIOSowaY7TeX+E7g1dH/2kL7UzAGMRlrt8bM/NXiqwhkz5jUyIj\nrt481Ojwd367cxRsED/K9tYEKgd3C5xs5Lj6D9FfBCsVxYXuMbAIvSqyphlY\nWA3OjC3DslmbLfY/uodVOKsWHZg/Kel2EZA1ukg2JgQ30H0h2Yqj1ywzTy9r\nlaoqb4ato7e3nPKDcn5ERTLLPy/dNNJDA+LjLdE7KMqfgdumg7KxlP1OS9AF\nCwAxzx1j508p30q0vVowEtcC7YlfvA5owqwq2I86rnugd+c3w/XklD+E9Ecz\nnF61StkYdmED3bhY+DfXuLb9jePYIfTiKV46l+lVxwg46TwWTIG9IqjhTplq\nioN92fEyYyplUVgAe+wkXkDm3ote6nhbwNQfd/SixG6fSCnGTZ8BaMSNa5or\nyHhEkzNVBewy82l91GWiMiBd+Yq2hvo3uweBfyF6Z9PHbJSuweRpUOV3kOXx\n939zHUbYjHdI41lWYsNuNcECtIMq3RSX0u62ALwMyWe7/5pOZdvadAaOeSQ9\nGWCP3EuPxyTgccVv5Wwg+pgSVeet2XJ06ehNcrKfx6WVm691QQKk2pX4OSN+\nrpLZajcTnEh1qmf76B5Wfxd+EeV1E9velKNZmMQMXjTl6r5dpey7Iyn3NXeW\nzD2N\r\n=0IWr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGOqK+creWZY6rTuhhgE3WuWuByBWelKlmSO/PH7Ht3AIhAKyKx+LwXEr1WK9WlWPILigk6tVmp/PFsrZWheV4q+yg"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108232044.0_1629804671280_0.9863883133865292"},"_hasShrinkwrap":false},"1.2108242314.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108242314.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <!-- TODO(wg-bento): Once available, change src to bento-base-carousel.js -->\n  <script async src=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108242314.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-Qua+ogn8+c1u54hMkmgvV1e1sOpSKBuoslr/qz4kzDD6mCQZa+TpqsAR5obcpKkJFQtoI5Nh/XIecGQEf4Riww==","shasum":"2bc7ec5c7b24a051382726ee9767622eb1213401","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108242314.0.tgz","fileCount":20,"unpackedSize":1087972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJieJCRA9TVsSAnZWagAAd5MP+gJaUAqvDQ6lH3LOtD2k\nsevtPgd7I1plaaDRBT2M4Hcm4nuaNLtuW8TPryezedroios+CyyoALffRT3T\nWJzp4HMGF+rp3RivOlmMaQf1UMnHOIlkZB6/dB9dPhk/O/xfn2AraJf39RNB\ntXFHJx+VF37dDH0EhHWdHA6KqjuGgINVKW2NYcl5kbRUGSV56FzKBOToRbdx\nIrrdNPmoSuebHRpN8PRyEh83MGaZ/n3nvbucKKTF1Jwv3rMD0UvdI0L/vpph\nzWmt8Myzei/1dW217eIot9vgmu6CgEAqMnq5x6jj/R9lAE/Gf9EDWO+hLLwp\nAGv5hxycesj+JJz8dVdh4ViccsUCzuwsthhTTnYNPQ4OtwEsdmOIJvUkOuQZ\n4UItPB+VHNoOKrl1iBx0FyZWiknLCKiEjNBBUXZGAPkKDGtZM6mDVip7xi3s\nyEzq1GU7OQLsfGZYN+i31HmtJ4c2U53SsbfEZSTOWuxPldqgBDbppnU4P4gS\nc+5j/EqWyszyZE/sLJY35699qRG3rOz8nb0uzBnnBJj/0uhDeHCSxHzcuVhU\n0B91tlOHbA4GMs72h12lvsNA0I68RJkyb1bznVWBEEqChMU/gk9SGy/KhEOr\nDjpuwhzXFpPVocY1sxKtF0ZJikycf5IViQ/x9nL1rxB/ddo7mYdUOiIIPYCG\n5DJN\r\n=Q6Ve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeN5Od1mqnYVMhEu9+buI6wEuDNF/mG6vok76dKb+MeAiAT0o9kfz1QPCTdmwC/mhrnToK3PyHtcjortoM1xMrzlg=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108242314.0_1629890441175_0.24508765664081045"},"_hasShrinkwrap":false},"1.2108270538.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108270538.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <!-- TODO(wg-bento): Once available, change src to bento-base-carousel.js -->\n  <script async src=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108270538.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-tBMaPfDvFJpcYV6EWgcwlhJxbd/4df2/zGOKjiHvXv1sUk7BvPla5Fc5aQpJ3H9lq96uBSGhaE8an43jnzcS5A==","shasum":"b6740eae34e3a8428ade5b67c2f1e88686c63f05","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108270538.0.tgz","fileCount":20,"unpackedSize":1087972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKM25CRA9TVsSAnZWagAAnQcP/3LKXXddlXAG67o4ne00\nMSdPb8UYwv5uNjnboXPI+zSp8gKnnU6+fdZFZKJtG6I4soEcZfHXepZocVWy\nvA8uABjibhCAKCPN249Qi1HDEgymJq1Q3WYQm6PnbNVN6yCpzsCHZNmiuen8\nIcaQmZ83fTjEQUfmR40vyzakol2YK2CrvXDiM+yv8ViW6LrbpMlX5ptXL0mA\nQ90J0OZl1QLkFeeokQCyG9Qhp6RPJQfe3O7oUUH/LRwPkl6u0DHDtvmaNI1I\nZj0f1+22krWsgTOYFzN7GdOTFxRLabHapq1XTX6cV6RjDuyhNCuN1oGlzf97\nKNFsR7Ty4GiQ5Pe10koa6i0WLKFmSaTK8Odh2PIcZOw+G2QjFD5mgrwBdRRj\nD+eJm4dZLuRQW1nVqBUJFMdQTZNLoeLo4Bo47rKxBS49nEjmtax+Q0OJz2CI\n4qr2twqAudonVhC2/NEDxL5DwCSyLSmdJlEPXdQoKmkfssuFzuNIKNCuzU+7\nqSSh1GQgmJqQ8/SznuBlYeYa5XTAFxw7zcdGtjfEDl9efSKKgRLkfsdEirht\nJndwEUocBiQVPh6XetWn9K5xCYGKQ52UFeGj50CzXhumEBx7F554PChtKAHE\nsmFaQwp4QQ28xnmEP4Zt1o5TXEM0ZxZUi2m644xdp3IPksX1g5QrkfHo7jOR\n0phS\r\n=wV0F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID2974JgwvWVOBSy5TJSBLalMrKPf/VwIpKsAVCufw/HAiEA35xQ5sSVAbNqZwM1EeFea49tWqKqWlsgX6/C/Tv7lbA="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108270538.0_1630064056962_0.33628174873937855"},"_hasShrinkwrap":false},"1.2108280007.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108280007.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <!-- TODO(wg-bento): Once available, change src to bento-base-carousel.js -->\n  <script async src=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108280007.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-1EgMRzo4md7ASALiQPX7aob2Iw7+dvEuwPhDi2Mm77F8eMfXH80oSCub9EtCj0JdXnMGvz+GiNkl2UsNXRJcpw==","shasum":"bfb2326c57bad6452ea4c5616f9e0fdc992ac46b","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108280007.0.tgz","fileCount":20,"unpackedSize":1087042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKhyrCRA9TVsSAnZWagAAExMP/iSxGxuoaZwiqUobC1kS\nP3tEbTqxJHRvFTKkCYu5+zUKEuu5myX7smEAFI5da4a9wS4gmo2dPoNtXrnX\nl1pbg+cSE7G6mnJn/wdDTM9ypKYM/yOY+/wqKuQyQGQOCLbfkz/dH4o+FSX0\nRG2D9bycL0DBktAMg4C5ptP/uOMfYMR08Dg974qiBNYdoUaWRsfYRLorwWGS\n0JYB2LOFHZZ91pvOGhVTzqTPgtWkaQvQeZbp/F4YtHr01/yshR3apsiTCv8t\nJSwbL0J8sIVAPs2HfTZoa5RpwOwlQt+JYZVskyf5mia0xrjUcacM2fUh9mvH\nPaHrL328F9wJgyfVLA+dgXHc7tgKC76pemqj/VGgRwL9xbxLhafVcyLgwe9f\ngjz81X9Iz6+T5DN3wwH4HADvON0XEim2qK70/zv9UMFlYg5EjpTRn3vCmGTd\nzIx9PPXKAmgzQk6iHN/qOTP6Sf5xn9kdXRQ+FvMvG57ktCdmh04pXakwhFdq\nZqwQw20yt+VJjBpXcJ3f0MIKuPS2gFbTp3sBDV7v2L8QOo5ygDZI29XE+YRn\nrekJ/Xsrluob0BrJM7bAZdSRhRZiCS75bvSBT3yemlxByKV5hAmOyOddP9t4\nvugi+V/YteQGJkBWh1tP9qpPL+eq4rXaI7H3OPGAG0ARlDRaACRaKwXctZlJ\n3ruR\r\n=+aJA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpju6++eb+dGG3ULfTrtFcADhOKK9VrIpe445770bCCAiEAjQ9GJKCaBgNfs72NVUK5rBrirk54mUq0BXpscT2UGlo="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108280007.0_1630149803026_0.538511030761037"},"_hasShrinkwrap":false},"1.2108302037.0":{"name":"@ampproject/amp-base-carousel","version":"1.2108302037.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <!-- TODO(wg-bento): Once available, change src to bento-base-carousel.js -->\n  <script async src=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108302037.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-FoRPamam8zGKzUHP/TEVOEZzNvEVFL3wlkiGOegqcQBrCAxMqsaH/prsy1E2EceYXxFr2ARjbxxtDlYYLLHMsg==","shasum":"84231edf43a5befa59611dde22e1c404b95146b1","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108302037.0.tgz","fileCount":20,"unpackedSize":1087042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLhEsCRA9TVsSAnZWagAAAtsP/iRCPMX2gu4DWLrFSSJQ\ngAESV+vAjnDntxLlFWDqYcJMvB/nn9JAnznqUyK1Foz3Ce12PN53g+8aa8m3\nud5G0X4beMoURQlrOupxSf0fJw7IQNG20TKaA2WKxSGCVkL8wf55tkN3Bs0V\nMuOQHJZ5CnZBVc/CG8Wlrk/3W9YVoGSMqUGj1f3EznAmQC5ANSFZ+Htdz3xN\nUX+jEHHtJoHNIaHrRHUfhlKzm6T0zvsO3X5YJQeicTuv8ZO1Dx8EAgG6VQfp\n/r16DEGtQjMoJ0T5onhjeVlksWYJ0FAvGS9LaggA2OSmEgDR9j5wvp+yqgOE\n45bj2gz25jaAYO+JuO7HGA0veDZzyP3zWGu9AJpztCLQQbyZuasUoW8+O1EA\n1KlrqZziS1+VXlAk1DBU3stQCHDehtLWttNmzNuL021tdRY/GyeR0Ygzu4Fd\ngZuTNhl43VdL5b800joBCOZGPyRDDkqELTXfOofNMHdUllwtdJES6SA9he/y\nXdgHfA0fnGD1Sul4LYaAu5ytVhv81RSZTs0BV+WG2Db9VTHhrJ9efqBiKAZf\nxyCDm0X+DlJS+I1zLmLrf4CfF+WyoibZhoe8jRsX630jD34ZHOTiKIE/5OKV\n18oPKyUc09rIemAw5Di3lzFz4elbWxamXTTsS1zPoznT7hMvdx01PQab+mdi\nx4Zf\r\n=juEJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa1RzgMTIbx21GOU07rwz+uqlAIfM2CmeBzIFNB/EnRgIhAPJXCLBLJDihUMKowpS/o08INmu/BIlgIu6q3+qku6kI"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108302037.0_1630409004769_0.11359189876972553"},"_hasShrinkwrap":false},"1.2109010455.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109010455.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <!-- TODO(wg-bento): Once available, change src to bento-base-carousel.js -->\n  <script async src=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109010455.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-gzQjPoq1NJ+U5WnlOPG6Sorj3cKWO1HTq06a/Uu7R4a5vMcLTMWd4Wq9HPaoMKzKhsp/70f1i9Xtae+aa0ZsCw==","shasum":"5521216497d4d25837087e0f8dd83f8d7458e302","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109010455.0.tgz","fileCount":20,"unpackedSize":1087042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL2GnCRA9TVsSAnZWagAACasP/1lDhfGcDRSHJ5dcL+kJ\nrwkWXH/GzM1OSb5I4pf6+tDZ661b+OMcGLkDl4PgGElN0bQ7+xU5NTQStUp2\nkT7nkI2RVmI2uP1kwTNC4nOJIQ42N09q/OLUOQ1DYnyRxdKEkOAFmD3lAsrs\nBozAjxiJVLa4CU7jVbfifxIlhb6O9pB8xqZmU5UepMcVPx5VG89Uy2mArq8x\n42RNFbSLf+8dH+DRsZUsGOxS0BkpqQTqzy86qu4FW5MZE4zHjV/vMXyxaD0Z\nIWQGWa7adD185waL58Xqd9oyib4RNrEgaXBvq1siUDq/lWzJYb0aYaQ8XU+P\n1scoGRHvAXybx67ojZYUM8g+F5LG6br67ogItjy+6AjFfo3m8cf086is5i5Q\nyH3UDfrjBkywbj1wFcVYy6tMczheeCBxSq2eBNzz/LQ8imirc2a7El1A7wqd\nH5e9Bvg0Wl5af5dVsDDoaOg2bxwDIe4oCTMcziIp/46oKRMI9fA4EdcBpYU9\nB9U4orh8YKqaPAEltP1by3gpVoWBaUCwG8WibZusq8LBnw4iWjyO1w/ENq93\nbgvrSi3qAJCTKM/xew2W5tg6iCIm374hFE7k9iKirDdypBYiwWXQX8Q1WxNu\nr7fukejLhrgAlcW8p1tNd19TQY0YKLKqHPZrscciHapiq9PCh6ct6sJv87wD\nXyoL\r\n=jsDJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0VESwOsthES07CZVVALcvP/N/DWbqrtmjuedXHZdIlAiAb/ISnmAR8y1y8RaNPPHH2UGTDLpL2fQAmohdgA5DM7g=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109010455.0_1630495143594_0.5997644117975829"},"_hasShrinkwrap":false},"1.2109012253.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109012253.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109012253.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-rpl/6iAyCKDvbEKUWpMQ/cgjfHV5Rwm2pL2r6WSLCK483QgonKapRTQTlrok775S60pyg56pg864pwx0IxaEqg==","shasum":"92603f927d9ab4a54158e072eefdaf0934d7dacb","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109012253.0.tgz","fileCount":20,"unpackedSize":1086964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhML1SCRA9TVsSAnZWagAAo+4P/AoUgye0jJdk49M+iHmD\nMvx6PhlB2EOs4t//WpE3UKj4Fj1cZRvPE4kBpeLJ4AU52UvS4KBodOxqKwMW\n+RP9D0tId/rxdJs/CVcXtUgALCYpEW7jpr2gHlOL2lIDY8KuLVWS6+iwnNrB\n07L8nJlNP6pDY+iTOQvietPvp+JERHgnFSwP3+xgdTrzHWCkdMjQhy+Ymwq0\nUkmPVSL+VSV/4FlXLruzbehLTa455lnTMv93sjD1zrMI1gr1t9cOfDVYHqx9\nJAYf9O/LKpOWaewg6LRPPVZLTQ60w20rFlqvQOEgjZx3N99GGa4Zl4vmXPNK\nEGQ1+00Ch6BXULc1j/HkqJb7TZqwWPQ84MlHWkzyV3Mny7j9+MMVhFIG/FX9\ndFLXPxVVdyYzcn0koi+N0QKYEb32aEDtfIDDbdHLo0Zqwt2ZWO5257WscSLk\njanRi6vCt2TXtyA5Rew5vBKqL/eFS0QGafVsar+QhDG4caQ8Wcv7pAONF+Tc\nLlVrF4KRUughrk/JyT79h2wD/VNNoYUDY2Sv6vGk8/EZBFBfuBchK95rt6Zg\nESPryZm6GF+6tvwqp9Y7UF0HgPNkU77mkVuUJVhJ0BZ72FMbP0w4Sq3EQkrx\nP2M1yL28Lcl01HDE9JbNLZuqbRPVC+vvqOzzGQRUpwbVdJUiAMrqmtkSiE70\nA7EX\r\n=aQgH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLJnSW70ru+kegEAZswBN2y5C1pejz/yGRnnW7vSJXrwIhAPLc46GZCU13C6M3IpunHYykyfg+lEpWNXeqSrgDFLLj"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109012253.0_1630584146170_0.3543738099634359"},"_hasShrinkwrap":false},"1.2109022317.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109022317.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109022317.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-zIPwsTnFdP0aIbNsNoW7qw/HbUSOSm8w/TH/t+UDtVB2am9Uksy0D3sNDJoQ4k3sUjZtxGsGgtxrGqHvWU5hdw==","shasum":"5d533608ee86ec5a99fa8ba06f647fe0e0cb471b","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109022317.0.tgz","fileCount":20,"unpackedSize":1086964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMgUpCRA9TVsSAnZWagAA2vQQAJVdiOUrBKsKd5U9RHTK\nKvOa459OlQVWZv8OgP2twI8M7TLp4DdOJI+dtGfc+uzxN6x0dSqPljhEeaOc\nQmSnil2dAApfBM5Q5GUvTNNpKsZy9cGQoAWPcONwXHaBFSF9mqaqTq7jNRmL\nOwGzVOxqNDCIWtWq6T4/dJEXNvDZ/RYSQP1USxhphNnJhaU70TTB7HtxWcRY\nDOajdb6m3fPMpVp0DyllWharUtXJdwpp7z5W0emx6x+A/erAuaez7XYzStXW\nlqVxiEhvBo0s1g9hLBehlKd64q3zIkHng9gvumJ9dZYkwkwMcsYWGL8IrNDO\nIRpUvU7xknteHuWz8HcroSNF4sUirBVdEc8DaPFsDXYNgq3FTyoBnIsy8Wwu\n5F64L7PW/9ypUE9tXl2ZB1FKPA4QqPi/qA155lUs6SjrPvhvMgJaHoX6lS4m\nyU8hvZGjF0rS6KaWlJne6aeWMA2KTfVvuYeZkTM57LToFzoeNeH6YfwNyPDI\nNewueoacy7JHLpsTXxrm+b7NCv4sWVIKp1OCgdWT7moAuS7KcUO0GAwk5RV5\nxHHkhw8mdNhNUd/U39ZXsQiPa4xXySIGUhRWZcTytuo5fBijscRbG0q/vvKD\nLcRm74H2bQYKTGVzYNFZ4uC+MAwVy+v1HSVsH3ks/yBkT6f+TLJpznmTT4A9\n/YxK\r\n=jt1Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFIOiyET6kHCUx6qc9dphtG3vlj4xNV1W8EMFh4P/zTAiBk0y5xEmCmF7IQgkX6+ZzMe6GLOSPC4QslIhb0T4nefw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109022317.0_1630668072995_0.02156000604225028"},"_hasShrinkwrap":false},"1.2109032350.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109032350.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id='prev-button'>Go to previous slide</button>\n  <button id='next-button'>Go to next slide</button>\n  <button id='go-to-button'>Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport { BaseCarousel } from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className='custom-styles'>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\nfunction CustomPrevButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className='carousel-prev'>\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton>\n  <div>first slide</div>\n  …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109032350.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-jLxXISEgYRV7V0crPBaHHaXEV9WOYdHnL9TrCOuAfKFGI6ClprXGSd+4IhDEs98cyAMKXXvI5k1G8vpuNGt+8Q==","shasum":"4b2838d0836a9e79c92c02d05c202d3d6b847ea7","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109032350.0.tgz","fileCount":20,"unpackedSize":1087352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhM1beCRA9TVsSAnZWagAAEBcQAKEJuOXLtz1eYxTq+7Qb\nn4SBbS0PsFsNnLN7U6qKEtw/9vSa4Jq8Tz54EVlrusA521zgkMhDQ2e1g9ba\nDDwMie4p3+c54az0mdXqkPXjew/X5wTxnmG/njA5dMQFkdEF+2h2i0Jp2jzf\nqJIVJAC0ydLgIk0wgDJ1QW6l5XTMAKvyAm9nPdTg3vcqtHcpwA1PJPGnf36J\nCD1epjus214Ix2uwa6iVbdgTKkO7Jj9S0PNUyT2aqIFyKLDDv8nkLTBdH7qO\nL5lT8F2UMrtp1RzYOEWmJCXUX+eb4EIYOYafzRl91Vwr/+AAy8y0jbo5/Ffm\nVbh5z52ebBLXBO17fQy+Uiz0f82wr0YmllALuOIZTXb6V1AT9FQjTQPIg+kz\nIIwI5Dih4IxFVDfJmPP/Mn5+eAdTo/z/6Ooze10/jv5TkMh34UHtKzmuUvtF\n7ZAr0vjvOeXqqwXEKYom3cB/Ds+ZdWZzd2Y1bOvVtosfKzAW7XxGbyyBBzQ6\nlH78v+3cDBrxqp44aZDO46xOE1pvzz9BxVs0zaC0YsW/hKQcsAh9AsL5IvTA\nQCRatcG7heJA3Oc8qKxYCKg8eA20jJV+nE2YgE42N9m0RS18HdFwPXFrNtH2\n2osUd5l3LezAbHgb7WsVPQRzVkRDmmA4KINYV18VLPocZLQhtqwJ5oKT7wrT\n6Xqe\r\n=60pY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCNihlTsyT2t1Cs3YQYGTWQcXMbtkfyG+YAxKzEo5Z1AIgEtm219TXC2Iw8baP4xHIb7o5aQia0+0xSB9D9MCOkvk="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109032350.0_1630754526225_0.40417765053982446"},"_hasShrinkwrap":false},"1.2108280007.1":{"name":"@ampproject/amp-base-carousel","version":"1.2108280007.1","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2108280007.1","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-A1D68UxQh6dgW0m3Ef2pbwDgFOVMeveNs2QmbEzr9VmerJycKfNz0fBZZXAxnnt5lTUv8W1UwOW0nU60/9hPZQ==","shasum":"3b61937ab8d7144449861a55b6a6f9e2e260c605","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2108280007.1.tgz","fileCount":20,"unpackedSize":1087355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/R+CRA9TVsSAnZWagAAzt4P/0ZEW6XSkmTiinpWbrwX\n01QhaIgV1A7neA9RpsuOdZ9r9Gi6T5vlrgVH28FZW9nbyCYO0buk6G6bzWT8\nqP95XYSYDjQ3dqCBcZB9PtWQDTf75QhfIIbFlb/dHSKHNSFp7g1mWxYsFTMu\n19AaOJyRlVF20Kgx7M52F46d9Y8q1tgYs8OIYBz7DQ2wyNJt188sRQdQ7W7Y\nck29OvSHsucsDMCegKynIedfbB6jlQQRXDuTn5J5is3P1N9s0WdShtJLtIye\nCNBg0Xu4ieP4U30BE3ZA2lOQT95q7OvuHaynMapq63jCh11TtV/UnFwjANtO\nqCl+dBZeU7XdFDdoMI77gfoLLC5VJ9NRGW92woT5aJTHkwy9VxV96GF2T1yf\nhXUPa9/owF9H/ZvSLB1QSZysTDXFsDF9Zwsw5QOBANOce0FpaR/MsxOnLGez\n3sRj9KsP5wpYaWEvY2aawK5nCqtTht7UlQb7cAoH1T8H8MinZk1IbttXetEC\nDnnThdSBkSrwpo7C9s+7k2rvXiE/FM+0FRuu6G87lNZfWmd4CymSy7lsAxf4\nLZqBjOhFUP5yN4si4FMzedr8XtDcCZgG0CJNtbbzLmfHGVjMgP58vPKZkJtH\nS/EDhSeklAIUalB8dIdbN6zQdYCGtA2HVpMoX19kmbuWNe1ziGTVps7m0uzB\netdr\r\n=vdYg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEcoKz71ybFwFRhGQnpOuFPW/2f5y4T/El02fLF/5NjmAiEAkrZYy/yNJlNxjCrVDUU4ku7/qBcb4qVBB2kGK0FARkM="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2108280007.1_1631057021847_0.8493421498239937"},"_hasShrinkwrap":false},"1.2109072113.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109072113.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109072113.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-oq/EpoZhtBDpzMA5hFTPjfEJAtGns0MtI3qPexDKoBHWD3BnMbstNreqfI/Im60H2q3B7VaASObPC8saDv2npw==","shasum":"0118f23bbb3b82cc23295bf8820e1f6abdf9c1ad","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109072113.0.tgz","fileCount":20,"unpackedSize":1087355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOJxLCRA9TVsSAnZWagAAE6cP/3NOrarVEIpviKDbfKc0\nQywsQlx/GyIwaeWqEvLLQZOtyCYnGPmLlX7bkPlLBIvA6xVgYAaN3HjbN2QG\n4T1IRwKIeN4pqUt7kAoZ3zCF5P/w43HLbWR2h8gm35jdlePtScYOBe7xuWO2\ngm0kCK3cLnKTZmy0xmB4ca6j6c2GBD5K8rqArq00kq2PZ2+hHbdZRBlCguLv\nMIf99mXe7tyMP6AH10YYInrNw3CLhBe6C6Fd3XC4jh2hk5yesULWvfNwiAuc\nBW/sfDYIVyeOgD6MtqoWjfRM7YgcswJsVE8m07gFYdPrqggF3knyf06IIoP8\nAwm9T4I2LYItnVCqNDktt/PZ6r8Lqn4EZvmsuOYTkKsYicp/vWn8JAy3swbr\nmuPErqatw0owNv1OMUecSrlEvANLhuhJ187GqdgE+2yTNvpcSufbz2ITsLQh\n9Xg0GkVbmbac5EpeAT6PnbBdbfrJFiQlR9PsOSd9S7cdt6uOh+26hnt7TJQb\nHETkQCx9VCFwf46cLGYTc+2vTpX2mlawrNEAOAfHUnMTAn/UHbSrJLn53BHN\n+RKcLGxYkEmGbbeZ/siBXrB/510WIkcCXi1HI+77MS0F9+Ijp1duojXR0QZn\nT2YaMsoEZN/KUeXXxOFxEbIjkPv5N16xySNRwxz9JJsBD78FsGuA9LNNIK+F\nYhhw\r\n=Xl85\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiIQvw0Wmi98ejk3Qbw0Y7nNde+Itf08jvDFmXkXivvQIhAKXlkTKw5BATL4boLVmUHWIPJ/zfXelVmqRoRbUgqwQV"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109072113.0_1631099979534_0.8778372008178221"},"_hasShrinkwrap":false},"1.2109082106.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109082106.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109082106.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Ffxxo9riWpXoxZttlRTUaanrh5EFN+YHOJ4PwwRx7AklmhWCavujOQX0jrpL+qQYH4w70dsZPr3NL6HKMdsNVg==","shasum":"c1abc615dc9445d9017f3a296a2fcc3d067c23c8","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109082106.0.tgz","fileCount":20,"unpackedSize":1087355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOe3PCRA9TVsSAnZWagAAjH8P/iKz98LYMuE0/P10nD7S\nwUPHjrg6KQQzc5bYZikN/tPvl2GZDnsHnSVxjEPR8RSuy0G2f0HKcXBe4WCy\nfBp6ZdKQPc+D3w8fiiWOk6qSvudRG1BV1YhDVALBotuMzcZu8PXoAcTECH2h\nktRTPR4RiAEaEOT/QwL8FRIMKyB7ZOxkmq1MzfpFkQNFYV7jTSDGav5J19KQ\nGstbwh31NPH+vB+g88K/QPUfEu4e52HzIOVcG2HjrCXtwmLnj1j80q9YHgcd\nE4P49FlDhYHZ234+RLzSyT/wotDU3U85fhx7NaCYPJLQL4N3RRYtkFTldaUQ\nPmmNBHRICTxDxukB9JdhcDW1zR31wi44o7MTGchj8Z+M7CqDi2CejVTmT11d\nF0p/rqezcO5c2/EuoAZ4hLi7OyPWqvDv7oTxgqNinq7IwXIFmx6xx1g4cNzI\naSfDp1/VI+1S1oeMBdlDW0PSlltzqHuqKcAoyE6QmOawzFOSEIYN1in86/1d\ncx59mUw8NochMBXnQjGSI2S5ovSk4gU7tak5ht8yTmkQbigYo2S/ssSOKmQm\nxkhAYGwEavtDZGq1rYPvhgSENP2nR3viFRN3GPFW3UwFvuEgB4oVwFjZfYBt\n0expTQI5s0gk0lY9MqOtS8AjgpUUc7hWnfsSLvNAWySzLtnYRHVGdLQeS3nj\nfWAN\r\n=+4+1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwewAmfvj87p6V+487O8htWuj1kpmmRbdZcCdjaEZEUAiBTdFtaRkowk6Pxfrjl7PCtXBNtYgZ380tp9CqT8fVcNA=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109082106.0_1631186382835_0.9129318340489556"},"_hasShrinkwrap":false},"1.2109100544.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109100544.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109100544.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-8hMbmTUVNTvZzhRoTAIuSb67xqrzh9TAvLgfYeSRnH7AsGj9tCxP2ftP+YTuOrl9lyJGz1KHl/9OzNfsogRBsA==","shasum":"e5958f6cf0a575c2fd4082f9331d7e357ba0fb86","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109100544.0.tgz","fileCount":20,"unpackedSize":1103312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO0Z7CRA9TVsSAnZWagAALdgQAJT9VuMtF2HIM5gQRHpO\nhq+kPl1NMAIz3stUt5E6EYQRjXRhkYz1PYp2tCaJdhwKTPLIufZYEUXkG5rN\nhwPPu5CV8N/J1D3KSjsDSeWpSGOyXf9KRaA8/wDLsjP68Gp3kQZb+2I7kK0u\nF/Q+/QXwfGgndrOKZbkCWRvSmXsfpaiAfsWJetbTIqTeMpJctORmHwPxjoxQ\ncGnXGYyVmaZoed7gQ8iF5pCBYAn10qRabEyCnFcwomqmVicOjhZT00V2aPKQ\nzyOi/lP+x9LPg0Po7knbOEJijs0O/72sH8AFMgcplUNS4P3U7yK4/1CEY2kd\nlzmWky9mVNx5jZjrSuyngDYQKqXkAxsMTfqYFw0MOx50pyXtg3CVXWW3NIC1\n5BAwPddgjK5zk0uUjvK0PFpkVywMTkXA04qHXdaaYsnp62wd6jTf0FUgbjSt\nlVu6NkvrHHEZ5U0FzjoXsCIc1uO7Dh6w2kPdBd0ZT0YhJZ5dIMb4WBMfL7kF\nczcGVyy90Ktvmq7irQCcoT5c0U8WD5nAqn6LGXKdSkL+EmFMcQc69wstrjls\n36OD6yJMKPoeS874vsdZryIOgoeNuEZ/UKeSsgeW9LjA4us5RyngmSza6ziD\nIChgp0r5UdIVwbv7kcTMI//xYSEfB5EJfoAtQjf6e6oWoEN3g0zI2D6KHNHL\n31+t\r\n=SQRM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoKB1/lT4Ppp9TFBmG+Zfyw5WLQuQUWUrRslu8FwbvcQIhAISBb5gt3vbVV57HObdl8yukHZiD1L7/mLnlP0icKQ/t"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109100544.0_1631274619114_0.7348228445129692"},"_hasShrinkwrap":false},"1.2109102127.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109102127.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109102127.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-e0dXsjqRyMHPL4DEm+FIf4kJ7cQAuTW3GRmBub+EjuDpte6YPSHCfC3LUXw7G9ebZTuwiGqceUNxtAHHrZY3uA==","shasum":"d7984108553877848a7b46fb1175495dd561303d","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109102127.0.tgz","fileCount":20,"unpackedSize":1103744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhPJEfCRA9TVsSAnZWagAAxiEP/1mGfb67FjB+PZYBF4lb\n+3M6fINjc5jYq1rhY8niXYyKK2bAKyG+QbBt4pVJPMy0FzeXg9Dk/V76Uruq\nrrRaLeFoMKiA8hyBBCgpfSykizTzRV+5kZhJeo7XOWsLAr0n/7fdCvqykTOc\nvt2HKbyNU7nRMRXK5T6fx4boVfOSf71RHredH7Ly4uwXECUyRMwe3pvp32uV\nEX/N5JgXqZfKQdD+fjGL7YtxWkz2LHEpu2+RkKUny2HjSZA4dZEaEY6/PokQ\nM4wR6UI+4pIMdMl2FgF+iO6r1WCHNkt1nKjCmRLZ6pYxGqFZQHRC1osJJ+4Z\nogeND0yVDoHUnSaPY+00wzLH2tET/0W6trJ3xfBswEp70+vYTxjVNUvXNBfP\nFycWB1xFO8uE7zetRE1oryKK/Qp1d3clEVIswfkyOddomQTwiFqdH2gr4DK+\nv7LL8hGutGX9wLb2W/Bc+ZBetyw2a0ED5gDZE0MHu/DEeWWLSfBi+GNUrYWM\ndntC7i1rgiTXxm9rhpexlZDU8eWfrtGoALm4oCoFaY/i4mj2e2nGm1jYXv40\n05MQRLC0hb8y4zNnTrnxMSJhi/LWj51+l6aVjGI7oLhEKzIF0MjGcWm1Ls/6\n67bBGCsQo3Y8cT+TYAmuGXnYwhKZIwGO9awkJvoDvG2zXcPkXxTzRBKSFlZI\nI6xT\r\n=2efG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdy7vtgrOUxpT004KsFLJCYr1dKHiAtHl0lxnyfy7VyAiBWHJJ5miCklDfcH+iB9p7U29Xo8BcBug5JY7Zq2I/Wwg=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109102127.0_1631359263303_0.5733017034214247"},"_hasShrinkwrap":false},"1.2109142054.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109142054.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109142054.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-sAvdS3NW7sDrez4Ilfk1GEPhsRrE5rqBuJuGsQJ5Ef/sj+8XZ/0WHKZTqTktNun/wLdxc0RK1opI16KnT0WdsQ==","shasum":"c499cf92fed5b8d2fafb9a06ec8a3710f5209c59","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109142054.0.tgz","fileCount":20,"unpackedSize":1103744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQdpSCRA9TVsSAnZWagAAC2AP+wduL/N5vo9qKwCcd6Ox\nDihTGB7R27e45+3q1kgR73PX6tywg32mJdAKmyd7o7OIBQEzZ7DaWbUJ/j+t\n/+iP3lsRNfqKMHz9B5E2rPIYGsDOXvWWolH1HyPrfpEVSb3s3huejkvwqe7t\npsQOi+do/KKSuQjIH/RFgCPDLrhDNbAIjBbd6xj2oYeB85IW//6XnpCzNW1I\nuwH1hBnTsmbn2etI5Dz0m59ihvdppk2sxYlxN68ecaO0lzGTqDfmYHVA/9Q+\nc0KOlcJDy13HxzVoRpPxPIRegL7UUb6NFrBUsO6l/uVzyI0xX0/99bM7Z6+Y\n87OyVsBBLwA8qJ5TLRgLw8qjBPv39CLOpSZr8BW9TAI3wSo1CYHtQamsRMcH\ntaKOoHxpk/+MAonlPU7musbD+16QUZ9FSJZH0Eq6wXS3hkKKiF0XuA19Zf0k\nPevAhJbwDHsszcb2tPiVKB/cR5hJf30LSJmCZny8ZFG0jkvllgblI/6GzxK4\n9sCee1/HSsm+0PYfaF6LWdSQfLiv9z/Sqwd+d2FgEqAqBtsowcvl+Rpg4Eoo\ncBcYRi3+YeX75K7hgfenI76uisJNVck9j5NGMBoWAKgl9LbYrWAqio+Ebh8N\nyUAmpY5OKwx4iWtL4kVU1wamS2z8/hfE3i4JQhEHSqieCbgLaP1itIXMa8zR\n6Fea\r\n=zCBp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMrCCMEr23Fq35AaQk/3vhkBxcFWJklCQCX3aAOV9AKAiApVkqtwKnQN9axSWJayTkoRjL8p3nTmuUmhnyJtRq3lw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109142054.0_1631705682558_0.9859294838906978"},"_hasShrinkwrap":false},"1.2109180035.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109180035.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109180035.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-5kPJR45rspbklL7vgQO+SI7yMnUJwtc/BIqaO5wfBKmvnPFO7cuUEf/e1ek1vrmG5/EPgY7YuoeuG6Aiyd8u0A==","shasum":"f6190f1bb958653c31516b94305099928cbbe409","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109180035.0.tgz","fileCount":20,"unpackedSize":1106684,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxvQo6MOijOAriYe7tmDC0IsCkEI7bdmpcMAb4w0Dv6AiAQcRY6qYdpf0l486JEWehxldItt0afKs78tICiysjrLg=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109180035.0_1631963972114_0.30344607149253044"},"_hasShrinkwrap":false},"1.2109201529.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109201529.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109201529.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-o0Wv009bHLyE1UNCL9nYA4DYukw1LAo5pj/tgSYAkCso25tNzWdXzIIJ/e7Fa0qwhCJ+m2weR2zF2uRSCXSGUg==","shasum":"55f630e39f0141a173c3a67136c7891dcf2a8aae","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109201529.0.tgz","fileCount":20,"unpackedSize":1106684,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCHgunYH8JRccOtzQ73ZNwIObWsdGV0xGbcxPXeZxt9AIgbCrIZ3wFXwzPEepXi40GUhAuVxjztD6cxabOFKjP0GE="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109201529.0_1632223106961_0.08923812283449051"},"_hasShrinkwrap":false},"1.2109212005.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109212005.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"---\n$category@: layout\nformats:\n  - websites\nteaser:\n  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.\n---\n\n# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109212005.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ZMp8Ft0uvngZY0EfQzC1TUA/wS60a0Agz0b7a6PL6S30VZHrdp+Pkx7nfcRozSnwIUSEh55qeOSZmOaIlEWiAQ==","shasum":"18cadf253ef29de41b5497c6b7541158d1170ae9","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109212005.0.tgz","fileCount":20,"unpackedSize":1106684,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPabyE1cnR2TV86B9oAEPlxYrXYNDWOvXFAJPP7MszNQIhAJ3i+FkAgV8uuk7knKJLJlb2S3hWum26Tto8M7VY6wrQ"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109212005.0_1632311177249_0.06397543379637138"},"_hasShrinkwrap":false},"1.2109222204.0":{"name":"@ampproject/amp-base-carousel","version":"1.2109222204.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preact/react-Component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2109222204.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-xR9PaYM6S3hwTXy8+EV6WWMd/6aVL68Y9PNeX6gcF6JZ1y1tDmjb1y/pRWiNSIDc8ob+p2ui3OGH6lfwB1B5RA==","shasum":"8e3f5ed2fed2c951babd41e21ddca3ea38e4ed32","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2109222204.0.tgz","fileCount":20,"unpackedSize":1106532,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChr+ibsezMHoWeGzOtBrfEFX8g0WkfJca2RoSoREIyRgIhANP3+H1Z39STBIYgic91zVbi52f0rscB7bKd8LkXjyHa"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2109222204.0_1632397335833_0.6275915678555335"},"_hasShrinkwrap":false},"1.2110112305.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110112305.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110112305.0","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Rb2PC4rLdRyhkx54bPL91nprvhfoor3vtXy7ckwkA7MQTv/cnVVuQOVuc5+GJXUDXPYlTt83ecww8jWkNIsiLg==","shasum":"c097968d8f0e0795a813d15252ecac5cceccd696","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110112305.0.tgz","fileCount":20,"unpackedSize":1106246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoKaAbDPKL+8CMhEEtDoXBS4pR7JmIlzxtDXnd+tGWZQIgLrNxgEwwC9LXydEyI2P2Yn24DZn0jCvcYL10QknJoHU="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110112305.0_1634038856105_0.14048480983075828"},"_hasShrinkwrap":false},"1.2110121825.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110121825.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110121825.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-SfAKMpFLhU0b3u8Ty+Dj3uPHe7Xy/05pBOd3BOdfhxTDNohTfQxqOX02d43loh92TzbNqlmRfXmgAyVt8TDG1A==","shasum":"8471259163259589b676bb723868f1a86f278659","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110121825.0.tgz","fileCount":20,"unpackedSize":1106246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLg1kBa40RtiaUZSTYSOyfTvNthkk/48YTKPBNKRPI7wIhAJug2HHy4eRB0LfAxsNawa+rCJ+Aummnrz6kCQ9c65ri"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110121825.0_1634124391785_0.6252299467218214"},"_hasShrinkwrap":false},"1.2110011758.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110011758.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110011758.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-w0l40C/RYdVZBrCvVjrsj72XnAtaZDbUfaoeIYCEIL1VeaJJ4Jz5QBPxDBNab42s+/gbcrzI0FuasP9Kla3VWg==","shasum":"0a7d5ada6897feafb9ae2332122038f9c1105513","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110011758.0.tgz","fileCount":20,"unpackedSize":1106246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh11gCCRA9TVsSAnZWagAA1AUP/jxri88yADHDNHJOnsro\nFTDR/rIwYdw6UeBddbuQM3fgJyYuQsYTQokkVsB2itOipEt4VEd14pbNApeZ\n/z+5DLz//QyYFgDUiybZB/CkOXL9HUZt+eGsoGRRh+TmTHjoUlYU1h6PheYH\nWWFSwdzwsyxXhVlnO3ajR8+fX1SPJtYsNwsjwpwyctpTjC2lXNTDvwtOBSSM\nVsChzLRfqJWIItGsZB9XJQ3ta76BVeTtU5KqbSpbvZZRGLJMp76RPcJl+bpv\n7Psxbb/nJp5zYp+s88oXP2DdVD1Ty2we6D6M9CBSMI4fgGIxbk9QVAvhoJor\nW7EItTCsq1oMXE7moIykMTQoUGsi7h8vAeCzPWCxc5fqHTZI/CWjlns5SNXa\n+JYlSWMfo0+pPsApUuJSD+kEl/IW3pTce5+4HhDEGi5aZ/apYYPwMhSML4EP\nnmALfJj1hVLMIE2OFkPFTO0FiJPUEF6Bs+ng5Cg5Aoh5sEqSfiAVO3hi5cw6\nQxN1ATk0om64Cx6OC0RVKV/9bUQArPfAKUCmKOKrY2gI+cwaS2sl7LVHjPSA\n5xhZ/tFiOSP0a7pzDpZ3OTfrF1baFYD76JSSaXUmbFlV9jrYvb629S7ixOCT\nYcR+Wl5BjtCVly+9C/gL9g42+vKdR+lg+Efy2/1n1o7rS1kkB5ocMoAqPunq\nJpMY\r\n=k8Lh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcO7vcdciosb07HYEyi6IzGhm7doe6NAcfzCgZAZe7FAiEA6rXlfFZwQrJb72lez9BtUZC19UQyc1LzmQ6vOwfazyU="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110011758.0_1634221298977_0.22957337866478644"},"_hasShrinkwrap":false,"deprecated":"See @bentoproject/base-carousel"},"1.2110142235.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110142235.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110142235.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-VsIXqlIE6qtu7A+EMO+9U5XZxu5ASrOKdMtHDbnmIgOX8dswyZ91XLTwuvsCVupmVsxZ9E5ry6LZCtmavPyitg==","shasum":"90fbfe870d349a227d8b175875e11930a9cd174e","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110142235.0.tgz","fileCount":20,"unpackedSize":1106246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDWkG5ebgJkXrlScoPcyRU9okNPeCvr/upa97EcUekcQIhAMPfOxur3dgTRztm6mOf9hRQhLimqgzvl7rea1B8RcgU"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110142235.0_1634297866245_0.9945621320982352"},"_hasShrinkwrap":false},"1.2110152252.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110152252.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110152252.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-N3gqv093QkGJCDOQ1LZcVIex0dhRt7QUgOSGTKbwKS0/xeZcowuGfbM+xVH1qkFumr83DCx4X9AWmSSWDjWPGA==","shasum":"5b6f02ca251e188b2e449b4074e268a8b437859f","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110152252.0.tgz","fileCount":20,"unpackedSize":1106246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGG6s9qjZYbX313KbS1EFOoS/eWe2jYulMXhDG3xbFvyAiBwQRMjD/1XXrVSLGoONSfUwQUCldKKOUNG+NegyyBakQ=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110152252.0_1634384337789_0.32848813448380376"},"_hasShrinkwrap":false},"1.2110181554.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110181554.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110181554.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-WgelZq0yGca+HmrkJAuAuQHwv/URGf5Q9l6x4argOJtgLNChng/CsoSpj5YwarAj+SHSb5tLLuyQhPYM4x4V3A==","shasum":"b1d3bc09dd03247bf2929a4f75bdd4312477fb71","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110181554.0.tgz","fileCount":20,"unpackedSize":1106246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmq8gB5sIghZKUn3i9uLVONolFZY8jsyJL1kqCBRRmCwIgaYo7Do+JikFWKao5h1cBQCeIPG17ZPl7zei1vlCBJsc="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110181554.0_1634644423092_0.038443461387865474"},"_hasShrinkwrap":false},"1.2110082201.1":{"name":"@ampproject/amp-base-carousel","version":"1.2110082201.1","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110082201.1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-hcyNmPg+JdjjrYs5FjGvlAGLCspJVpAV+SloEdrYhNW+yNbGFiqVSfteJt3r0TEHrILG/eIrk9gK0iXY5XMasg==","shasum":"7b4da93050ae92cc3f1cce3a387fd591598164e8","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110082201.1.tgz","fileCount":20,"unpackedSize":1106246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqrQpcGHrMwyG9o5n1vRvZUTA0qQQSaixThaQg+F+5NwIgN50X68Sf4oOjHTXJNs827kYgXtIqi9JsfyKqFlFtNFQ="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110082201.1_1634664108664_0.7268299273222418"},"_hasShrinkwrap":false},"1.2110192227.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110192227.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110192227.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-CbtWhiaWIdNG5mh04BnqsJCdMkNlWvO7RlVuZXXqeZvUZsNfrEFW1JPJ2XAisP2wJ7+Vy+igs0KKyCy3BuN74Q==","shasum":"21345ad2f6f6c74f5f25d67eacb3fc5f582df52d","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110192227.0.tgz","fileCount":20,"unpackedSize":1106246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjjyCwVaDqxpZj17nzncd9G18SZ9u6xRRr9/Ho7gfxrAIgHdY500jizgPQKiCp9GOPDzME1YJoZeEueFpfjZAiYK4="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110192227.0_1634729964660_0.6379251835591095"},"_hasShrinkwrap":false},"1.2110082201.2":{"name":"@ampproject/amp-base-carousel","version":"1.2110082201.2","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110082201.2","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-N0PaIQlNUcbD5gAa0PvenzwxtMvwKFBnOyEid735dWM06iyYhtYNfEmPqoz2WNW6TLiCAOUQmgtLVZLhB3w6aQ==","shasum":"d1da5f86eff3c8cc127ec4ffc90d304b15c8ca97","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110082201.2.tgz","fileCount":20,"unpackedSize":1106246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFEq5isz/ULG0ZfWwf7mry9iIs8D0P2v22sQM4gEo4RAiEAh23cWITnTHTdwg+gRIm9nJV/zKKwXVaNl/VkEwCXxy0="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110082201.2_1634768091813_0.9261993787471696"},"_hasShrinkwrap":false},"1.2110202310.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110202310.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script async src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110202310.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-8n2MWHwYTRTqYkbNQAvUuvo9H5tDsQm78mZn6F+H0s26aivUDnFuUtbkAMiHwh13lcoXkq+MdWa/pILAsjp+tg==","shasum":"dc7a8a82e8ddbe7e045fb3fc9a6eb9b1d802a7b7","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110202310.0.tgz","fileCount":20,"unpackedSize":1106233,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrdG4YRlx4HZqZtYNvz47AJskbADODqKApyeI252YcJAiAROC8afowUefBOv5u74xAo36qAe9CBo//cuffUJwO4LA=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110202310.0_1634815459398_0.5017810634273472"},"_hasShrinkwrap":false},"1.2110212130.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110212130.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script async src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110212130.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-uFNouLH/8WltDs6fqxdcmEZtE7MbUmmx7rqeIj3xAKcT5DhoFKAgxfrr/felwauJ6TjR56njqHziUy6p9YuZjA==","shasum":"322327e73a06b23ecef672f054ba8936dae779b7","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110212130.0.tgz","fileCount":28,"unpackedSize":2985237,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsJo9d9w2v6ZVPH25Z74tCBiqYKARG4qZ+DTHyvVH/4AiEA7Aef/C5+RcO+H3WqxMGC1DIRSS+kqIi2v7ZZoMRXs5o="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110212130.0_1634902257572_0.8207421043230396"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@ampproject/amp-base-carousel","version":"1.2110252343.0","description":"AMP HTML amp-base-carousel Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Carousel\n\n## Usage\n\nA generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis. Use Bento Carousel as a web component [`<bento-base-carousel>`](#web-component), or a Preact/React functional component [`<BentoBaseCarousel>`](#preactreact-component).\n\nEach of the Bento Carousel component’s immediate children is considered an\nitem in the carousel. Each of these nodes may also have arbitrary children.\n\nThe carousel consists of an arbitrary number of items, as well as optional\nnavigational arrows to go forward or backwards a single item.\n\nThe carousel advances between items if the user swipes or uses the customizable\narrow buttons.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-base-carousel>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport '@ampproject/bento-base-carousel';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script async src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-base-carousel {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js\"></script>\n  <style>\n    bento-base-carousel, bento-base-carousel > div {\n      aspect-ratio: 4/1;\n    }\n    .red-gradient {\n      background: brown;\n      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);\n    }\n    .blue-gradient {\n      background: steelblue;\n      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);\n    }\n    .green-gradient {\n      background: seagreen;\n      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);\n    }\n  </style>\n</head>\n<bento-base-carousel id=\"my-carousel\">\n  <div class=\"red-gradient\"></div>\n  <div class=\"blue-gradient\"></div>\n  <div class=\"green-gradient\"></div>\n</bento-base-carousel>\n<div class=\"buttons\" style=\"margin-top: 8px;\">\n  <button id=\"prev-button\">Go to previous slide</button>\n  <button id=\"next-button\">Go to next slide</button>\n  <button id=\"go-to-button\">Go to slide with green gradient</button>\n</div>\n\n<script>\n  (async () => {\n    const carousel = document.querySelector('#my-carousel');\n    await customElements.whenDefined('bento-base-carousel');\n    const api = await carousel.getApi();\n\n    // programatically advance to next slide\n    api.next();\n\n    // set up button actions\n    document.querySelector('#prev-button').onclick = () => api.prev();\n    document.querySelector('#next-button').onclick = () => api.next();\n    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);\n  })();\n</script>\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-base-carousel');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-base-carousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advance-count` slides.\n\n```javascript\napi.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advance-count` slides.\n\n```javascript\napi.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `bento-base-carousel` API allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```javascript\ncarousel.addEventListener('slideChange', (e) => console.log(e.data.index))\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-base-carousel {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-base-carousel {\n  height: 100px;\n  width: 100%;\n}\n\nbento-base-carousel > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<bento-base-carousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```html\n<bento-base-carousel dir=\"rtl\" …>\n  …\n</bento-base-carousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixed-lengths`.\n\n```html\n<bento-base-carousel …>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n</bento-base-carousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visible-slides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visible-slides`, you likely want to change\n`advance-count`.\n\n```html\n<!-- Using an aspect ratio of 3:2 for the slides in this example. -->\n<bento-base-carousel\n  visible-count=\"(min-width: 600px) 4, 3\"\n  advance-count=\"(min-width: 600px) 4, 3\"\n>\n  <img style=\"height: 100%; width: 100%\" src=\"…\" />\n  …\n</bento-base-carousel>\n```\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-base-carousel>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### Number of visible slides\n\n###### mixed-length\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visible-count\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixed-length` is `true`.\n\n###### advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visible-count` attribute.\n\n##### Auto advance\n\n###### auto-advance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### auto-advance-count\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### auto-advance-interval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### auto-advance-loops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snap-align\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snap-by\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### slide\n\nA number, defaults to `0`. This determines the initial slide shown in the\ncarousel. This may be mutated with `Element.setAttribute` to control which slide is currently\nshowing.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `bento-base-carousel` element selector to style the carousel\nfreely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For\nexample, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```html\n<bento-base-carousel …>\n  <div>first slide</div>\n  …\n  <button slot=\"next-arrow\" class=\"carousel-next\" aria-label=\"Next\"></button>\n  <button\n    slot=\"prev-arrow\"\n    class=\"carousel-prev\"\n    aria-label=\"Previous\"\n  ></button>\n</bento-base-carousel>\n```\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoBaseCarousel>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-base-carousel\n```\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '@ampproject/bento-base-carousel/react';\nimport '@ampproject/bento-base-carousel/styles.css';\n\nfunction App() {\n  return (\n    <BentoBaseCarousel>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoBaseCarousel` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoBaseCarousel ref={ref}>\n      <img src=\"puppies.jpg\" />\n      <img src=\"kittens.jpg\" />\n      <img src=\"hamsters.jpg\" />\n    </BentoBaseCarousel>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoBaseCarousel` API allows you to perform the following actions:\n\n**next()**\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe `BentoBaseCarousel` API allows you to register and respond to the following events:\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n<BentoBaseCarousel onSlideChange={(index) => console.log(index)}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoBaseCarousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoBaseCarousel style={{width: '300px', height: '100px'}}>\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\nOr via `className`:\n\n```jsx\n<BentoBaseCarousel className=\"custom-styles\">\n  <img src=\"puppies.jpg\" />\n  <img src=\"kittens.jpg\" />\n  <img src=\"hamsters.jpg\" />\n</BentoBaseCarousel>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n\n.custom-styles > * {\n  aspect-ratio: 4/1\n}\n```\n\n#### Right-to-left slide change\n\n`<BentoBaseCarousel>` requires that you define when it is in an\nright-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will\ngenerally work without this, there may be a few bugs. You can let the carousel\nknow that it should operate as `rtl` as follows:\n\n```jsx\n<BentoBaseCarousel dir=\"rtl\" …>\n  …\n</BentoBaseCarousel>\n```\n\nIf the carousel is in a RTL context, and you want the carousel to operate as\nLTR, you can explicitly set the `dir=\"ltr\"` on the carousel.\n\n#### Slide layout\n\nSlides are automatically sized by the carousel when **not** specifying\n`mixedLengths`.\n\n```html\n<BentoBaseCarousel …>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n</BentoBaseCarousel>\n```\n\nThe slides have implicit height when the carousel is laid out.\nThis can easily be changed with CSS. When specifying the height,\nthe slide will be vertically centered within the carousel.\n\nIf you want to horizontally center your slide content, you will want to create a\nwrapping element, and use that to center the content.\n\n#### Number of visible slides\n\nWhen changing the number of visible slides using `visibleSlides`, in response\nto a media query, you will likely want to change the aspect ratio of the\ncarousel itself to match the new number of visible slides. For example, if you\nwant to show three slides at a time with a one by one aspect ratio, you would\nwant an aspect ratio of three by one for the carousel itself. Similiarly, with\nfour slides at a time you would want an aspect ratio of four by one. In\naddition, when changing `visibleSlides`, you likely want to change\n`advanceCount`.\n\n```jsx\nconst count = window.matchMedia('(max-width: 600px)').matches ? 4 : 3;\n\n<BentoBaseCarousel\n  visibleCount={count}\n  advanceCount={count}\n>\n  <img style={{height: '100%', width: '100%'}} src=\"…\" />\n  …\n</BentoBaseCarousel>\n```\n\n#### Props\n\n##### Number of visible slides\n\n###### mixedLength\n\nEither `true` or `false`, defaults to `false`. When true, uses the existing\nwidth (or height when horizontal) for each of the slides. This allows for a\ncarousel with slides of different widths to be used.\n\n###### visibleCount\n\nA number, defaults to `1`. Determines how many slides should be shown at a given\ntime. Fractional values can be used to make part of a(n) additional slide(s)\nvisible. This option is ignored when `mixedLength` is `true`.\n\n###### advanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen advancing using the previous or next arrows. This is useful when specifying\nthe `visibleCount` attribute.\n\n##### Auto advance\n\n###### autoAdvance\n\nEither `true` or `false`, defaults to `false`. Automatically advances the\ncarousel to the next slide based on a delay. If the user manually changes\nslides, then the auto advance is stopped. Note that if `loop` is not enabled,\nwhen reaching the last item, the auto advance will move backwards to the first\nitem.\n\n###### autoAdvanceCount\n\nA number, defaults to `1`. Determines how many slides the carousel will advance\nwhen automatically advancing. This is useful when specifying the `visible-count`\nattribute.\n\n###### autoAdvanceInterval\n\nA number, defaults to `1000`. Specifies the amount of time, in milliseconds,\nbetween subsequent automatic advances of the carousel.\n\n###### autoAdvanceLoops\n\nA number, defaults to `∞`. The number of times the carousel should advance\nthrough the slides before stopping.\n\n##### Snapping\n\n###### snap\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n###### snapAlign\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### snapBy\n\nA number, defaults to `1`. This determines the granularity of snapping and is\nuseful when using `visible-count`.\n\n##### Miscellaneous\n\n###### controls\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n-   `always`: Arrows are always displayed.\n-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n-   `never`: Arrows are never displayed.\n\n###### defaultSlide\n\nA number, defaults to `0`. This determines the initial slide shown in the carousel.\n\n###### loop\n\nEither `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.\n\n###### orientation\n\nEither `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.\n\n#### Styling\n\nYou may use the `BentoBaseCarousel` element selector to style the carousel freely.\n\n##### Customizing arrow buttons\n\nArrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:\n\n```css\n.carousel-prev,\n.carousel-next {\n  filter: drop-shadow(0px 1px 2px #4a4a4a);\n  width: 40px;\n  height: 40px;\n  padding: 20px;\n  background-color: transparent;\n  border: none;\n  outline: none;\n}\n\n.carousel-prev {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M14,7.4 L9.4,12 L14,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n\n.carousel-next {\n  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path  d=\"M10,7.4 L14.6,12 L10,16.6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2px\" stroke-linejoin=\"round\" stroke-linecap=\"round\" /></svg>');\n}\n```\n\n```jsx\nfunction CustomPrevButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\nfunction CustomNextButton(props) {\n  return <button {...props} className=\"carousel-prev\" />\n}\n\n<BentoBaseCarousel\n  arrowPrevAs={CustomPrevButton}\n  arrowNextAs={CustomNextButton}>\n  <div>first slide</div>\n  // …\n</BentoBaseCarousel>\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-base-carousel@1.2110252343.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-z+hrlrN+pHn5CE/HnQSccuY8BGYIo0JiL876MbDUsBpWTu+orRLu0QtPhjDjnmp1msjQ3RPLo3JrapjQ7Hckhg==","shasum":"4bb9da9bdae8c8e6b9eb90b51619929face2153f","tarball":"https://registry.npmjs.org/@ampproject/amp-base-carousel/-/amp-base-carousel-1.2110252343.0.tgz","fileCount":28,"unpackedSize":2985118,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKFYQjrjvBscGDhWRUOnY7+/Ixia4L/n/+o7DRMJ6zQAiEAoK8vwmzNewRBaa5EKgijUcsZ8ArRY6ftE66W0YnLPE4="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-base-carousel_1.2110252343.0_1635247186914_0.8821655910980994"},"_hasShrinkwrap":false}},"maintainers":[{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"choumx","email":"willchou@google.com"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"esth","email":"esther@amp.dev"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"samouri","email":"jzfisgreat@gmail.com"}],"description":"AMP HTML amp-base-carousel Component","homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-base-carousel/1.0"},"author":{"name":"The AMP HTML Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}