Standard carousels
Creating carousels within your article content doesn’t involve copying and pasting any HTML as the Carousels extension lets you transform standard ordered (<ol>) and unordered (<ul>) lists created in the article editor into an interactive carousel element. This makes it easy for visitors to find what they’re looking and allows content creators to focus on producing helpful content.
If you do ever need to migrate your content you can do so without having to worry about unnecessary markup or inline styles.
The default carousel template
View code <ul class="js-carousel">
<li>
<p>This is the content for the first slide.</p>
</li>
<li>
<p>This is the content for the second slide.</p>
</li>
<li>
<p>This is the content for the third slide.</p>
</li>
</ul>The default template is simple, elegant and responsive and will automatically inherit the overall style of your theme. You can add any type of content you like to each carousel slide, including HTML, images, videos and other article formatting styles.
Customized carousel
Customized carousel templates can introduce icons, transition effects and even entirely new layouts.
Customized carousel
View code e47a69001558c19939bda7ae5b4eae3d0ca777c98595afefd7c01ad8a48c79aa20ffe35ece91eaf1a56569f40ccac7db46e7c48b01e74f38e0a64709dccae7a47a82381430f5aaf8b728263519462df2535f91bfc8f03f77011bf18c44873b5becdee38a1ef9ac761291d1bde54bff44712273fe5485fddfdff6ca1ea204b2a28c28886e0e1cb6506282798883bcce9f30b31f71ae04827465716b69904cb592809d5880974cd1890d972f0063356aa736d84f20181d90decdef30a5d365b4de732ae2dc70eda20e1f25ff2f83f4d4af86343042a27c418bfe25b0567025f0f0f7f83457607855ea8ca9f0c886971168616af43dab7caae05546f2b5f64c3b6c8ea24291ba2dfe13351654f60dcf65170b71dbab93cd6e8a61c1d06443c2d7444bc071baa00baa466c0e85b29c4b70c85a5d65ba995908f0ec6fa690c70267610cfda1e382d9ef040cb21a1a4cf26f49d9700c1f0d8c32be6fa6793aa65afc3dd108e159ba0a242098ab2a5541f73640a00ef2db54b9e3342794a197476e59710800199b12950304f5f0f43ee9c036ff9be833142106d167c9dbe47f148893981fe37d07666ecfe9b8688fef9d3202599a8f09b9264c1f07dad6a3fff4308fac789818f073097251aa7143668243852c3e2b619b42d74f9c2d1a450067f375bb7321d9ee802b1cdc34fd06fe8388511e7a6f98a4ea659ca8604c8b93ad49e405e1fa4f50a472ba7c1360eaca13e188857fd6bf0021b1ae9feec281a1e5b50335de66d8b34bc2ae38ba2eaf43e1055b152f7943b48a5272d003b860a6a55b54cd55d2e71206fd301d117ab9dcb3ec840101a42eeb2bcf943b5f666cf4d5ca2d5ffed0f871646b53d3c43b5b645595a39e8dbe05a4a2278e066a0b37598794d41cae5c26729fa68f8316800c09b829be05b3ce1e1435940fba9a98b6e8fa0c63168b5d492761e62c26c29e8d813bb40e466ab5c8e0542afa11161362077012289eeaa76f048329543cfb9fcb1d8f529e7189c893a74c9b467828e0ff63b4c34afbd2d1c35f9c5bf45890c1912442763fa1d3c9ac160ebe8bbd4279ff86af8eeeca6ca5ee4ce5cc065a64e07055142e6516445b488a75ebbbfb66058d61782e104b9136fa92bc22eeb61e721053c15f4b58805d1c05e2923be08143f9910329f7b80823c94c1e6ba4a3392b04c5a5ba99ee63408ffa52b53c2e260a70208014ee5f764a9a4b86682e81a88471bf37770162f773bd4efc39d8f0a372bac7d2824e9ca212d36a70e65d5b88b41942b65a49b2a046260064474842333c122e7fde8fa341c5cd6f34a3db23a6b80f3f33adf989dfd11d2f5464d3d8da40c7f464330a9173cf20daff2be33efcde941fe606e9f8f2f253b349c77d1d21d87578e16cb78824f16baadf0d8048c1a9a86c56f5cb224163e1cfe9ba89933632f7269a54883c8b39fb2cfb4d7f926c65ced50e16244a1369536abfd4930bca5b51e713b4be5960361de3f6dd90d01dbf211619049889a5fd249a23936b9150d2ac786bbb86ad909d8bb7e32f8f1dbbeabf9fbf4b7a1a851f9aa52317f387933d0f52513e0bfc8794bb34a488a8e99981cfd3c42447cd1526957995554bf5a3e4a2488eac78cdd3902e36ea0484edddc558f3c70723706cae4fc697734e1ac92ca8f180a3e926e3287380945e5776aac0c8704b0f3c5539764be6ff982f5a3e7a516cd267b9435a2c7cc00ea6e2cb69ca26278292c6ff5645db16d3f972ad2d16bd23b82e3b89a08c7350dd0dee451b49eed05bd034e599dde9c824a065d29e82947a50f46922986324979e21d75c1d54307a188ce0bd73620f6009b1b6e2b8a7e49bcf0fbcc6b38af5e8a7527673d136ff3948394eaf5648182f38abaf661761d3f63fa23d31e3e24591a6093c849d99b6dc5bc516dc919f6684b0d48e6403a173508070aa4c4a0aca87451ba9c2681cfbb71d17f48fb332f5182339bf670b1556ee0334513165e3e12e801c4ff218286c374505fbcbc10c298b142067eee1c953585c3c7f4c6cfb219c80218fef43b2d9648fc4ed5dd0d2a4181ac801d2587be130649720ab6b3d623975618edea33326e2bcc0f0bec0b2bc72d252d71b151ed0f91dbb5fe28d0597bcfce99b1eced436534a47cd6c60c5f8c6af462090509048504b664b7da68dfc0ab29444d0cc2c00f8b71c82efd99c848f8b3b6486f9a88d949e33baecb0f6102050183bc14cc8240240963ada162f55392c570dc858d918514b0a97e1ea8f14d73c026de4fee75a67fa3b7339fc430af25f35ae74e9a2f86fc75d4de1584a44d0ab1135bb2c46c1b9befbf90be116c514f91383a27f4f0b4705d08a5dd1ec9c39b79d3ccc8f2074da154e1519d158b6712ebc026e2ae84682bc3f19da7820ef75784f88d597ce1243ec78250fccea7f3367d7feb85244476cdf0d98831a87ac369b8f920db034bb54d09a643780be00cff472fc21caf0866c9e576ae77418921190744b43b8d46f74d2fa6874283bfd541f8d0a8f58dab5c2458a7d26b72ee5019fa29345209f9efe2f093996b84a3c4df8268566a044a47d70d588f57f54b9b43c6b34161117bcd0522aecabfe41de75b68578b1d781e1c10f169e649d32672a01b066d78adac288eb582f44d6f98898bdd4d81614c331460b530e1d80ce23425c9ab1c4128ee984898793a3b076e583a4290ec47ee0b370674de0b5f12f46dffedbd1b9b2feb02837de0e42be75c263798fc78e572ab80646e9ff7557d5c2653f82edcc165bf5622e9716119273173dacf9a822704925bf613fa3027bc97e01c1b32afcdcb38f71a28c36d630fad1b0947f350d51e02544505f966a2221fe528e966135d3f668828b74001db532c00dccc4df09104b5f8aa356af414e74cb3c948355579dfbc7ff79d70a479222b8210f6cb359499be6fd9c778e2427784ed3f7c3f869a369ed95eb3b8e6bad33d6ad5f718495011dbbe752badc2b8db8373f5369e1facf38dce16a56e31f74dec3a8575717062c5a7b55fb7b1b361512eb95ff547ca1c33802997f30937624eeedf72c8b2c8e0e9257537a8af2173a31c5320d6cb200f29a3f63d94d8a55c42666523eb1ac6bbe3f95f20b8ceebee4a8d09ab8b00ff41c57aeb346c391108c4bc22fd2b5ee26d831b137544df4fd3df62c1522941d25dcc54556d585d1a9c6bbf14d0e155a8b7afb3f536b7b0005a34008058c57f85374046f52dbfda6708081251517a1d104a00e3acac0cef39aa3c58346e2f13b7f4618d92f6b657306cd3c72667d1fbfadfc9c2f16e1d8a0f0ff0cbb0e61cc335f10459f8907f5c4950e054ce88369cc424a1dbe96cb7ac18da6f29b7495be1307464205f2cfcc70d07eb812eae4ee7a776b153534c7a47abbe1a6eb561f55dcdd4679cab24291ceb2f99b0d3da6d21b1cf26d4c8d64c292fcd58ead6f968147c05ab4db3f2e7867ce4baae1580cb93b5aec0c24ea171b8adf5f34da746b30c3f81fdebee8b8fa78ba270cb8d5bac73207eaa0c1b4dc31918d1b9d475c63202ea5e28e15483e9b19553b0d96217447d08eb09935ecd9714779ccddac84168d94df94142015d8d6a895837950698c6d130c6d92c7bce45b212142dd3999daf7c908c9222685b456c737b562dae3fbd413ceb419def79c13cf51d856ffb402493bfb5cc2521f033bf6b0300c702924409e6587fefbf092b8c22062b82fb6d7851f9383cd56dd8b43eee4403bd7d24aa1ba7758a3f7daa8c34300918de8b3df3c8c9b9f46fcac02c73412011b5844747fda1aa203e8fb4b2addf8407417f88a634bd5c5764dbbba2ea770574848d127376efb068c861c19cf08d7c65cb585bb1a34e733c51fa2d3be9c306fd1310048cfecf2ed6e651489d3a0196dcbe6d8f913df41dc8bffd0ce703d22c0b793e6c411be1885a9939298ed2863d2145df14ab868513d90bd8be3a813c3d4f19d41460fbae41053d94b29553fa65752fb6116f8cf84752b53f322dfcea7e91b18ab8c0f567f38920a3588768a29700b5577f6eb62019824c26ce49622039fd81489e9800462cdc4d48def0151e057bf205efb9c27e03d452a2efa122d56fd88305050a0da2ab0802e8a83ac5de95a7a242b9a22c84d17523c2c268dcf96e0e9e5f469a86762e914d7b99066fdc39889777a12264e0dceb058de6c16805ef09818e84329df63b83ab3df5c534a31646a48c4ad0c89012843fb10f76c03ef74508b2a1371be9babfd76096f7e240f82a8ae6a121adfeab295f0cafc7a87c0b53827b448db0e0bda4c9750f28ae4036e33a773e7606d8d6abe60ad86f790bbe7ec082e409ceff19eaff2643976715d4f52ec684f08a5ea53485ffb1cd886db212bd3ff51c697aaa772409ada805389a185784a948ded651cfd4cb03e3a3c050060ac4586c9fd18fbdc71b4e8f9f1dd6bdaa3e36bff15e19f30b6cd3843c3aff9a790b15f5fa5c841b436c747cfc7ab5703e3fc8baf623780d58ee24a8ad7daf44d933815bda0144b8bd38fc1b167ad2e18ccb6af94aae096eeb137d452827bf6211fe5cd8e1a1b9d3aec95cf860237bb2c90a84751ed8b38e525fc08c105a16b6c01a4c3e8326ec603922e4d8c30ad4e56aacb3cec8a3b97c1ce4aac7919826505111be214cf3c97dc0b0c9b75e6bc6ea9198e531ce6bd483ebbc23c23cf8b6095449206b5151198ddf369de11d329ad352eafd3967c28cff86aac432ec770c56e188be96defa66c52cd8934d5de262c32c47c7f43fa86af3d5ac96444a107a2f0082fcb3aa0be28008891baa52af423c2e6c36b646da7c5df23636ceb6bf03ea4cb4c8aea2ecb809228c46631e213e5785a6d6838c575b7deebc2ba700b49888cdc68d8895127e9b412a7744e8cbce7d5917b73c28e16b516015eb96fb58305a366688d5d774f909862eff75cbc531ada4abecf01f647e8900d6a640e8788f91a52b2f80d876554979cb14fc34105debf89a5f99acf7a56de0c2a6e55eff13be56933d8a1b121bd15addc5c5f1a6fe6cb28cb17276fb18ce45dadde711fcb3316b48ab6c87b00abf055473ec953e13ac6723fdba28b5a196119af97dd83811094f49147e46f27795282ea0ea2af34ee21c7ae8fa512090a5197e25758d53770b427eecab133abba790726514be607caea9edb40dc9f9c5164bb558e6f1e0c269fb45dcdd376af5c4fc7aa8fc5f95984fcd338506387a1f2ce1efdbcb14fa02ca3dc2ec34faf45666ad9ab16a1d9e09d5444ba9f2109478e4822865e7f2ffcc3f879be03d16fa42cdb2e25304ea4c4ddfb561dd87eb4dff6218b1084e808283eea6e3ea38f1b5511cdc25b75f44ee936f83559246d30dccc6cfd323943cfd29fe862f2a8b4af4c40fed004e061a6d0edf00dcca9f948557c0de73f3aa5f70777646cafbf9cff1efb024fdb5483d2b091c59eaff045df5c1215dd9d1ac0aa1b7f52ce3d29c9e6d014995471e03f207d84712ddc5a6bdb681cbcb7f7fdc0a054a9833f5dc628d6c7a4878c6d845f9059b9cecf23413eead9e583882cd6240cf1e514a0206983c9505af80cdb2047cb0ee3100971c514ec8998c041a0feb34b6dbe9468fe7962404ffcd21d491b22b9405fa56e97b1339af5ff601ff7ac37b21241df827a3f1a67c8e72c2f7a0f3bd68bc6072d0d86d4bcb2295cea0647a23b41b8a1647414da9033d4b51b41b59b2b17eb2cfdb690dd1878fdae2eac9a0aa1937bd7326dc20c7f19dbb4ab7838b5937eb6998b8c36672de327b6916c93bee57f791da279e2af8d8eac3ef1871dd0afdf426dec1ca75e7ab09a33811b4e95a83911cbce4a1cdf28fcb405dddd896617812881d35c4d3b0db19e24930ef97f389a66eb9ceac05e1d81d1f1df7c4153e53360857a6a01feed0581c6fdca519416b84fe3b679b6085e65199c0a38191a697b788e71c06c36149ab59088757f412bf0c0c16e619831b151ee28ac1c5b19d10b9b0473668c567a1500cc64924da9a6ba783b832c0270ae8db8cd56df7eebd2b334a9ef6ddc05b07f3cda4fa3e4a86df47b518b5803854acf5758f1470a35170822c22d85842e597e29cb673f33bfdff052e1c7ede8c162d11d10641a253bfb47148e65030e7662b561d668fa512a80deffc6518c8b74c2153b8ae7a084dd3ae626674b541933956f4cba5b04360964c0502c510bebd315b21cff0c55c50b3860f0326dc9254aef592059f5ddbcb1838cd860d56d13325ecccc2b9405ed19dafbadff95414b7845475d669e8977d3dfda49287bd8fd870a74d1eea3bd50dc7976b72667b49338b1291bcb752771b672a03814bcd563d5bb7b8bdefde68ae0a25d2102bd448c88adfcb1efabd6722b9f7e3b4fd0443c5bffc3fab850a6668acaf7c1b8faf444d3f15706b47829e84a7b7d7e85c751c3afacc0b8f1217c23c53b16853e0a2f0b0a0ad015c5f5dce216bcef85373e7a1485f4cbfa3853d211ecdbdcbfec56a7a898112d7fc9733de17d8513e88e61dd05639dbb82cae32c32afab30d5936c7ddc48edbafe24d754a34997483b9f8857fb42c57ef2831c9b976d7ba916a6c5fc4fb2e77e0f525db88217c99257e1cf700410b03efa4619e9691a3dc54d4bbff85d5cf8df6e990e3eb61cb448f0cef7fa1ccd45c33d85451de5e86e69d87a7a1b038433b69ba06c9a4a55d075d4ccab498750e3fd0c0e72d9ebe9efb6afee94933dd23bf4b661ece4793893012f6b62a480f5425d7a994f0f382b23959d9f4c4089c2934d487652e4839a631bdd562aa3428e4cea98352e2a5d2fc72feefc90749dfc606d0f1e00c6b7b52cd74c7ca6138262da413487cc811c5cf3af90a053a78bb2e2e2cc7b7aa6f34d55d809f32259b6e5ab607906e558b0363528070d94b2ffda2722ceb35447b8d599749283f7ab60d7521ce818c19c609bd80e730c15bc63a0571086c0ffeb1b617ebb2fbc20f32bcf7558bcd2a542f87b95cd0abfd4d6ceb0565b137214c768e0037d99e5382f195e4dca270df2524183d7bf17dcb1f543858e59ca858e40c66d9ed79b8a58dbd0d912ebd0748309e2297ee3fa1ab230db3a9988adb03ed3d31e68f1fc48d7ac300d1396e8f938564f13a73f0c713a4ccb6b9a970adc799dd59965540ecfe57405b0ddc1741ba651ea92f543cdc6ecc18aa79cfc1eeacff03f3f75ce556c34940a82306f6fe93fcea666482fffdbe5bce33b21b136ede0a42d0e833c85d305d9bb740e17bd4fad585e551a4e205c06c5ab660e7d12564f3b1c8377ea0b99c5987bb269c99fcfc687e5407d3a04776e9a79cef6e9c9cbb451e9de6370ac8be7192dcb655da21e2b5fba91bdb8df40b06f03fca70288c7732e301dc0dc232893faa6092898e1d396bc9fbfa3c134af47df442fb8b827a2b2300a83906c752924f03f808e7ad0e9c1a69b327cac80e376745864ae443374d142f12f04d54dbe67c86918c2a7df98a964c0a7eb17f6bccb686243e8a212bfa07ccb092d21f83e0dec804c0ecda0c00b7169eaa23a4f829f9f7ee47974461d51f84cb7625f7975918370b58940b29b798b74f4182d271b1197bf173718ba26c36cce8ef3f2228347de79543b62a7de05d7110ca34aa4a968f41070413f83ebf3da95a5d8dc7692461de6ab93e614365fca9fa2d22c774c79bdcc53b277c0b0709abfae5330b28a8fbaa393ec19962eaef52c66b2224aa334241049743336627da782952cf9e7ed07dbe52f8bface1cab39f6f89aac67a9057444fe2806002bc484dfd67da6415e594137cce1fe76f5c18fa6d25a6b26c15d65da7dd7cecc496b8be73281fb1c48f92c5116fd2eec21493d448238ea84d20747f5ea12e72ed34a13d8f656c79cd13ad8c68863abb7bccc7454a7ca798c26c538783ea444d864bf01fee16da2bf1eafcd071b867b06a9b6e54c8b203a9d9fc289c8a31ae7eaca797ea33e7314cd70498759d13ef721e0123752428ead5d8e753ad2bbdf09bc8b923ef364690814f0bf40cff2b9d2dcd8d1278bbd8eb5643c2c2fb63b8d05c6b9546a0f5d068494022b94e3ebe08b1ac8c27decfb9ffaf7c72f779fb4d448a128ec7e04e9c4b944f5f89317a51e77afda21fe2104d69d022307300cc953ab4a9af10bdcc52f05b2a2c5d6420026f06db95fbef597e354aa1a0ddf98fcb0e27a459081c65cb8ac682b60f7d7d27f4d2888d0a55ab6c760a89104bb35656495580a75585ddfd2fb2908fc98800b9c6c290c8eeebc3e7ae508415a3d1376546ba80adb83296b666dfe37c90347f88a68c48d9fa00ff65e47018c86e1c8c9de1edacca2e50109c0da405a77bfa858afddfe2904a0f92ecf6fda25e0d90982237c87e002238c22982e8605f6bc69f72b1dbb291042f9a4790b1300710a98903aae76d5aee5335de524072090127d0a304c64889eb3927317ad92db6c1d83b828bf834da0f638cd9d0b0ebed41c33bf4e81cf0bfb22c44c19bd5e2b7d6bdd551de73bb6f1124de6fc3f20f57512086aff9870847ded643c2c3e4c538ed0d149f41749f88e9c3862caeb8c5bfee7aa80dab55eb0a10682242caaa5a36c854d4929e5d259e982f9eaab75d1699c0b7179e4424f7701b60263338d570ace95152e1de68983dc68f339568c6c7cd073c549dfb95225d207a1704b363696218ee5728d45c9c91178d6e3e28783c63b4ac2cad7e8acbcf1e8cfcb95c63245686dbd16c73c5dc5f6e6e2a92a37c8c3076bb4f18caefc7d2ba8e30002112af3370755ee0d5495fd2ad4ed603c23f63c4b4ee2f8b2acc28a70b2ed077d753fb357c8324af36fd63f8fc14141f656b5fc44241831590f70c26bc291d5d2f4184504e556201228aa80f9a449cbffd2beb2934eb353190182dc57e1a1bfe31eeda2295a42e025415ca78712c149dc421313514a81fbc2cde993ad20aa94815aeafac9ac22964820b96a327e119cccc944dcad1d511e962637afb0a6c976c6cb518c9991de39f0f0d470770a60e694b49f90e27c5d066f7c19e658bc2602c126b8a9bfe37501ec44152e03ea1c35c1832d7c9d97da6e1ba3fc39f1230061cc54bdefd6f1eb203d3b34c8ef123bb055f5595f2100fee8b212bd6e2f0100158bcc0791411b1488ea5f921138e279b2bf710b9b7cd969201286d23e41bc1ec17bba67105c972397193dc4dd06f9f621e51144636d7d338968193abe1bbf602bb5e19a4a16ffc834f59dd8146389fc68508cd9b74d673eac8b8173cfe0c10a5b7ad0376d4dc371fcbf5a2a408deaa55c891268c9c25df4704535cc8e03fafffab71d5f72b8450d5cc28076b32d4b3cfcb018ec3425d41430cb4c8bf40f625bfbfd7babe3713280dea029c1dde0af61049b61db3930aa87bc0a0d5fe2c528d2f2024d3ae68ab853d19ef5f0b340d3bf60a215eec032951e086211e06819437f89be011ebf0cdb31c76932f416797f70330be967642eb76f2a947bbafb9b4bfd7d652ccab5e58687a80ec0cf304dcc149e3d98fabf946bae330759f1bc4c7866005f8fc388c7e90e233d5d0cb916a1555e64d39505dbcf56bf27004cc509172a2ef5dc97e752d93371579d4a2a482f6ec5981a179ebb216c54e46a75ae50dabc49133bf9cb4aaf6d6bbf5ac210fda115732470c8f5f094479cb3c981fabda8cf1111154fe17ea614f5f715e98d3a65a1c83faf30b9a8c102ed84341c699c025a74351cb858962868ca5ab9d80c9bf6b4f9e90a6777e65537df5c336826752e65e463a417c8a8f3fd58d41e6ed1415c06be750712d28ee5bfb7b047f469dbf22bfa5bf6607a410d380dd48bc100e22f14e4e72dbb30cda5825b3b3eb66417936b43003ce7d5ab9016c0d61602b481d323ebfb40171bdcedae836ea85080064c0cfbed8f49d2526b9040db23727c63a6606dc1c6eb3b1bfcfaff0f950c35804d795e85454213725c7c62ffb4829fc72bb4aa3f571655ac3887c95134b04f1af56f667859273fc3718c42dc7f10de0a0e4fa878ed79f8a3f3dce7c86a29c000fb72bafe04fd092338d21fbb57eb6093a5be4281cb78ea55d88efa19f4b5e0dc010a8e20e2d2e88fbf0d38d97760f8badc622a059cdc88cf5461d870f1e43f6bae75a8cde450b97e0ba01eb39b38dcd0ea85f236373d067248b4135268ab9c2ebdee469fd65490151b71fc996d4935f1fcba4021762321368a50bc48ad1d588344be06f744bf9ed9445b82c886758d7afedd523a43945aabc2c40765898eb574502ef8258bf016311cfbdad921175fe5859f11faf94772f78c8760d58325faca3b1e9e77bd0c1f7ed4edbf70b4a04ff9ff459743a06b1de17a3d8a127329ee3d6ba141953818d5fce7a20867c7ae659cba429ef88b10bc775e55ef46d98b8cbcf4f487dffe70d8f5855fbec9f56b661bf5b0ca6221c2babd6f18b580f898341ae7d24a17e4733da89d4066aa09dba44fec4997a7441f32b27f379060165c168554fedc39893cf20cc9d0c85c4583d7d49a8918432ba30acdd1fc3fddbb444d0351bd69346248240b682d85599645a3043f6c9d86a6134ca5316da6d0e1b6d17fdb62f2c277315b16503305539532f730fac2965bf8aab16c277ab91aaf9fdcb44c80bc167e9baf5b29ba2bcc690a71d85d0a13f6beef1a87223469db44fa7f2347312b0143b31c154361f9093e94b75a4b05bef96a4832e281c4a3886a2266a66903208aa0160b5fb6c24d051d645f10809cec3d5dced1fa2a9811e0a76ed470bd40c2412c153424b16788282b1b9d59ca54a805078b8ad408fc8fa0881275e2436ca13881f315c037acf0195d4c4fab86e1453e49de69ba459f6d0787b189eab99e741e96d7352698db7cb3becce0e75b1042bca238d7ff60491c34f65e956cace9070323025698e3291e99b90897179407dadd46875fbd721d54f29b9fb4bfc661ae84a2ad96975ca8b87c8f2393b5a8ad03c76e84a0a78c5067f155622cfe7daca6408cacf4c26784360dd9e6215811978d69855e3175efa826025244b30e6ad7bd274d2fc134a0ef9cac92dc2fc992fb25f10d4b63f99625bfa66f3bd94266f5a91c6f9cc04c7b4891ae053a65586affa6039ea92fdd97314b05d9bc1354578995dac34d5e0411c6a38a52e786f59fcb30551861ecb5e29754cdb4a0278d3dc1e77ba3a8c7345f192de0c8e6fc0c70b3af8b6e1171b8849f982b5de43b928c0149e3b673098b9ecbff7cbe546d62c295706a82da3f97d63184ce076c2d6cddad0ca18fe13a90fb1db8934c86086eaba25c1fc94dbd103c6015f7cc53a3be3cc10160ea668c8e919a2dfcd4f05c617cd5f841b1842feccd3c45d3733267e9a5ed5924280c1efa0ba29d975e70a93450dad8857f90a3f0ba6801463a56d338f7c445617971f32c4cb717dc8e1105ef0c6567e13a5521758886870c784e2623e6e79848be4d49e74b155d22406a0702c0889a60075b260433453d6cbc2cf82f1487aaac1d9dbbc69f36c33dcfaa386a504d89b5bdf926130a15ed5623be1515676fad380d69d2510cd14a1338a76bc9bf99ace57abb9430d4163d9fd294680fcde6e9585507caca1d6e891de8f1006ce98bf4e4611327f343ab0b6a995365c57a27ffd9a54418d93b9a6e84845f37a323d7128eebeee6e78105067f5f962979139d7e76d040d7ebd24fd0a11b9f2bf8bb94ed6a2828b0fcd9b80d367cbd30d9a56375ffe03e0b66c01d491df85696ee1cd96bfe647d0982dc13e3b20e7d393ca4cef2cc6ace0ff3ea0b293cf66e928dafe1c68045b21a3fb9e5af46bcea8f07f0dc9b7f5e4111f5633da1f294f86a603b1eb650f2c251753d7982e8aeb07d547b26118718d14589a3b621d625bcf464ccab8bb8eb36da3036b797499f0521187e203bb796f8f895f14023e54098e79b7e014e671e074d05f2c43a8426b39d0f69c20d8e6284d3415abad7576457355ec60780128645bea27d3d897daf2cc2be6b6382d79fe80121fe07bc76db3a42045356993487baac2a3214abc93c15135fba7909224754d0cb0c5861a9c6550859b40b49038c70972f25e5a23f40e8237e2202d24cdb0589f996488120c98bdfd55617ec2f1a3e91913482b83757328d2dfc968f53c19d41725658e2b496a5bb05866a1387888e36711eacfbaad69081b96ff8a759f3090bb7e47dd7cfb9fffa72c37ffc23f66cbfd31c411af4a908de9e8d685356462c818e153320fee3ac062852ce0bab522f7fe43649400c6bf2514c53308812fede13e5e831edde1d77d64f2a9d7aac9e0a9e74c15bcbee26cc98d479dcc061c4649ff1e1e87739bac3578bf15db159ab0d2c86eeecf2e796b5100b9e38e0bc5aa7103727b91d16bd3428e212df1c40b194d9a27d1e26228e321c3d81b850cb0667586acf13893f7558b2324d388d0fecaf10e43f4567bba689d61b22f8a4d6cbd506f932ef4cc5ef15e16a7fed1a55f624350af22d42f6fe4ec9b00e3dc8ae9c51e990cb4aade520976b13aeb59903e35684ac20c8121ad45b299da8b0e28a1ceb3397d3253c07f090b5354e63c6d1de413b2e16e0fd587196940c7c4885c9c25650b9acec600abd0b2775b8f167fdc8627de1f2a4f61c502c0669e57a8ce5dfeec7faf1e091965f101575c8d268819c7f2272f74dbef93bd407987a87db70a6cff16f071d1b020ef10ec8b5fc571237243ade9f4651c82dff18b8a849bd61a03a59a4e5f6665ef8ad71765f8a6e1fbf9fbaceff7d64395d1912565281578c3fa02a78fd4b2bf85e7852b802e8c0fa355cd5c4179d66604474b223ef8aa38fa1d159a0b087848c05dba89574ee3177cbcf63559c421936228a803ed40a60055179a6922eab06a10bac1ae2a734f10b967629f0f29a6bcc2252be4f3c026dbe3f3ddbfb4bba61e9c53cdeb2d50cec509f062eebba23d99d69e22c2cb1664b61eedac5939025eda8768be82d2ac85f6ccce0440299cb8f64c928e4723e398c17d4bdbe8c81020689762cc9a76a2950c32c48c248aba3d76811e810ad03067ca566fbdb5d1b9602638e90d8c6bf9909a95b89f70cc394d7e6945ee6b3b2414a5fc8363d2e48c07002ad51f868bd6456454aa96265b8892b18eed52eaa09afffd55d544d8821622b50b20bc927ef402ce1a9b361f87de106b2e6fcf08372129b095fecb2d591a421982cfe58ca3f2e0e5dad1b2b745ae394f413a285b0d3e02cb737cce8b03759a0db64516c6bd027a730ded49f63bb9253ef8f543195790948fe96da61ebd5a128ea2f6c61809e5636baa1ccf99812bd12059bfc70c6d46231b519da399d4a2df48d4f4734a864851a66968af4985f6ea56227d66bef1fb9da165459e0a68b2a909b2f199897aaddee0063b891fd5bcfc6ddc804650aa9628d23701153eb1e97f8b3077a0757c0ee33434ae7e2924317f4db49ffb62fc6c522f50098b3c60c6d45551fc667634e94b1bd8508580a516f8e6a377a15be32a25ddd0ff95ee0267aef4286d7b6e6c815c176cbea4d930998c0e5d774047123756bc969393dd0801dc82278205c7061fc03a890f68f02576acd0fc1d9eef989393b728ae80574659988fe01fe3a8c9ad1a1fec532aac65510a1bf99eb8332148a7963be488f6db61a680d1e764ae40ccc6976377090245a0c1e6cd9045441e0cc4bbd9737c28f5036b8d58be4adcf94b32bafa6b1060939e642a4d23705d093bcae4ea513c61462bcd72b6e00b83b65ba849564c87523814733153bba1997360b3017497768cd3890be34d9f39a71cc5089c2b909ac0893a29696600c7d1c3032d22269
Creating a carousel
Carousels can be used anywhere in the help center, but often they are used within article content. Our extension allows you to create toggles in several different ways, none of which require you to copy-and-paste any HTML.
The Carousels extension is bundled into all of our themes by default, so you can start using it straight away. The source code can be found within the extensions.(min.)js file in the theme’s Assets folder.
When creating or updating an article using the Zendesk article editor:
-
Create a numbered (
) or bulleted list (
) using the editor toolbar and add the content that you’d like to see in each carousel slide within the list items. -
Click the Source Code (
) button in the editor toolbar to view the source code of the page. -
Add a class name of
.js-carouselto the list element to convert it into an interactive carousel.<ul class="js-carousel"> <li> <p>This is the content for the first slide.</p> </li> <li> <p>This is the content for the second slide.</p> </li> <li> <p>This is the content for the third slide.</p> </li> </ul>
The Carousels extension allows you to convert a standard ordered (<ol>) or unordered (<ul>) list into an interactive carousel using JavaScript:
<ul class="my-carousel">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const carousels = [...document.querySelectorAll('.my-carousel')]
carousels.forEach(el => {
new Carousel(el, {
// Options go here
})
})
})
</script>
Options
Options can be passed via data attributes or JavaScript.
For data attributes, append the option name to data- and use kebab case instead of camel case.
| Name | Type | Default | Description |
|---|---|---|---|
| initial | number | 0 | The index of the page to show on initialization. |
| children | string | .list-unstyled > li | The CSS selector for identifying child elements (pages). |
| previousButton | string | .js-previous | The CSS selector for identifying the Previous button. |
| previousTitle | string | Previous | The label to display in the Previous button. |
| nextButton | string | .js-next | The CSS selector for identifying the Next button. |
| nextTitle | string | Next | The label to display in the Next button. |
| scrollToTop | boolean | false | True if the page should scroll to the top of the current slide after the Next or Previous buttons are clicked. |
| template | stringnull | carousel | The name of the micro-template to use. |
| templateData | object | {} | Additional data to provide to the template rendering function. |
Events
| Class | Properties |
|---|---|
carousel:initialize | Fires when the extension is initialized. |
carousel:render | Fires when the carousel has been rendered. |
carousel:next | Fires when the next page is shown. |
carousel:previous | Fires when the previous page is shown. |
