Carousels

Carousels are a convenient and effective way to present steps, tutorials and other guided content to your visitors.

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 templates can introduce icons, transition effects and even entirely new layouts.

Customized carousel
View code
98869cbb8499afead56f0357ff1a681016a6fba67819dae36be2ceb66e18a7f431438a039c5c3715779dab60481079ff2d84f92827252236389689d5699d7bd75b36c2038d5e155f6a507d16b6cfef1a49c56e611d6ccd652aab23363aaef29684b1afb31ebd619b8e71c264fe76a6eb01838405f6eb69d5ae07751d5be2670984a32999c934545d161ba8dddee0a277f7d31fd2bf8bf383f4199939e63908fd24bb58ea759b3fe0ec795c309e5b840125b7abe127817d691b05201fc5368c767ad98aaa78e82fe6e9577473d6aa8f3463d74c386ff9710c0d3a239bad9ed400bb700bbfcf1573f420e8c414216e8c63fcb297832d4161da40ba26a98f4b27ed6707254af1862e350b7cdcc9a6a764d4261ba745042489bc1d0976109193f147bcd352e74986768de9c0890b740865a15cdb7e7c674ea14e5bfc2d67916da1f24743e2101808996b120a970a3cd433173d63375697000cdb97b542b842c7f56b7c989325963a8916ee4df74e477d2e406c0d9204b0d0e7b39a53447ff45749f7b8c54eaebc42d0adcaacd5a4d950c331d93a8ec657483d293c5a3b0b47c42c1d5fc52775743485f227a493c64a2dab1a3aafaedee2ea427bb85feca8e14b50ed3cc3b38cff15c3fdcf5a816b81d26dd7bfc2f90863f8cd83874c895ffbb18c8d7e0a1c25dc34db437e4e7f0c6e01f40f31b333316e0bd24a5061b5eb4091abaebe5d7d829f59d9e3f0a5968004f02bd09d530a86f01058f9b7a7ffad6cfc7bc483af48207ee49f274e70d7097cc58d578a3c051dc3d73fb2511fd301cf1074256c6830b1e080959ab81482087f6b6bf679b9efca27ba032839ce99dea119c3cd658c68596e4e05a69de0a0e8360fb430f3e53b13a15e3797a0161c0b25121223a68ee3a9d6ce2526c95d9afcf14b0c825918aa528aba161c533713cc4b3a81ab8916370c92fbdcbe454c0852249016ea8322643418c0de40ff9823a267d91b6b57cb4ffcd319246c479b4367ec3471bb234032504b3ad3eb838275f42a2b19913311a0546025a170c917a6058adfd4e43024362da2bbcc77704dd4aaf7c520fb23b3f52583e40b7e5e3c7b6c83b0b22e25b6759e72d7d6c9d192f6d12675f8959da6dfd9200a16478dcb9d4fe3ec713d2f3c62357779d125916a7f04e714b428c2f9fedc7dec7ee2b2a46ccdd2e2812b3e0758bc81efd7fa81fdf564ac8352259ef60f0924adc6c06af4b75f5f53cb4f68f45460355d4ecf5a04957f108df286ffdd46788e43f0b0e98db4aae98f36cb8ffb58e980c85ad9ea2598aeac90d6479f4d86183a0018ba4d6ff13b142ee4c290fda66282cef8b72d541bc27b069b2683f79c690848af1854e943c5169e529fe54827a4915e93bd14b49e14409b24322c77bf975e9d3774a628cc028eb9c7c73211d5405db3d7914a5aa2651131a1ed8dce53486e190279944a20a4f5e5ca923fa8f9cf8ad9331452907326cfa3d11b9c14cf31b32e5e7e636658f12a1d2c7b8dd16e16b4571c0f7fc66f0f092b49d529f9a1ea233ae83ee9c9b0f02b4df8022c5798706eda1365830d9fb95342d9b0f0883afbaf19fee1843b174a1066e68368e05f44b5636a253574cf6c491fc513cd1c4a77954d6558230c35a9439ad1bfd679250d654458edf8563eec4de3e9b79b6c8fe617a31c992c423a05b538dc78df71fa53243088719eb84512e10958118df485814ad2c4191edab2d577d3eaf10c1d0d680b8edfb93a0be94af094edf39e5ba2c84dc0c81b83255059a532dff53e6ff8c77ed4c6a3ece4ca49f3e1054b075d0ec6e21d2bd576e799b46c136059fc6d69492576be6dcb616d2d2dcc452c32c39f7daced67bea6a67cf189810d949508b9d3aeba3fb6f176dc7f7798ede10fa93bb0f154a4414f772521040785b2ca142831546c047cf62083f61fec6964568dd40574e7ad7f0e4304edd0bfe6570563e206e43016a1d9b86bd2e72adee76af42cba18d6a8ff5d367d4d307d5d24193df32ef2947d6d2a59a728ec591eacb171e5492cf15046a18aa0be139a37f22f999416326f0aae4fe62a00ea99e660bc7b8d5c6a4b3c5fa2548b880262bdc8835bf67e775536c436d47428a98a15645c33cc3e2be89ffcbf77b6eb6d36fd628ad26c71f61d8200ebf91a9f010da6a7e9e758724c6d3a7e41d65083e700acb1403da6529ceaea604115794ad3eec051fc22e36d98f7a6241af6b088243f0fcf05d9048f6df7bacc0763bcc7775bd098ec0b885bd85b0d5a7e18410dbd18c05db74e87980246f810551948e253944b07908832a0e50e08cbecda872471be266fbfc2297612a0d5957933d064e5a773878b162d3681b9b5f0dadf2ae129b1ab4e2233219366482f2ad5cb1e7b5b8b91e4be9852348bd8fe7038eefe0b2004ff6e2c19c051e070f0594e4851b87282b1ae55835ace110712051bf548deae71882847b089128def6b6c12c71ce7a130a70dab30dcd91f7807c001926a45369b3e3ae9474221b5b49f618589bd3b53a105179a5d462c1c72c7db940065dabeeffa425758756771a5d0415524584d8cddb0b99d026e1f88170f80a1d879a67b6400aeb633a4bdd1e35b4847c43807085d93de2272c1d8752dc770c3a0b4d29e5837a1d71edfd77a2c526086827cc6d25e2568e889be5174aa7f3430c79ac8ba0460df6b252acdfeb1ae302f46e24170544380042126996324f904f69b991a370eaddfbff30c4761fb0cca47726880d3d83748940a216c2eddcc59469a42c1e6556ca8e5087301127dfcf70a1a5f6878c50524290be8eef1677b32f266da03f565badd139401d7b34fe6fa069ea04dc3e4f63747a14272b185d7d81cdc410edec9018c6889867f764ea78b7dddf1780cfc951b98fd8ac24f25feb4dae8f54475de61c7873375817ad0c03dfd911a1ee5975d7773b41da2251871f06ca49384cf4167533e0e11f6f402e7cf511bb72aba2cb0fcec6d4d03e1d36a09afb5369a644e61552211e98d555c19659e73d9c9d3da044e6ce12e0134cc56b0bd7d958c7eb505ad4300b79ecf5ac85ec5f6dad508b94035e6db1ea0071bd28c266d4d310af6ce94a331a0483c7dfeb634d8379588c9b38f447ea678500707742f13430abd9c8c15861cd56c742359bb3dc4f8cb66a7f6bbbb723ff5f2966d5875a52532df55b530d353f25488d18610a8b531359ab9bd8219210bd26903f2d735553e447dbd5aadbe995a3fe04f049f3ee477394669c4686533dd53a674124def00a44a6eea317518d2bfd2d09eab8babc28cef70f71f5622936e8422ab1bce850b40de9bdce414fda4afd0053af80cfc6ac47cabb2218992875cf7643c0c43c8072989c6e759844ee6b691f11f1bdcf58220f64baa8d9f18744394e6c859e3fcb0714bbd905b44c4a96f52f302a870b99c9da3b631bce3910a0e94887ebd7f89179ec0c0316947ce92e14bc61f53bbdc3e1d7ef86efb60aa9c02c54c612291361c31e976cd957d38460866f881d6c472e1b0c51e957f702757a92cb1677c957ad2e51d8c8642381acff8054cb14dfd2fcc7c2993cf5364641a84b5bf799d138602ccb47253ccc0e9a526263e35cc9491c9381d905668caffa31a3f0df1a6de352c179ba9e3b32f62b820013a0fbdeafda528dc5360b09fe35d32fe74d114641f708341e974de4a6b48f4beea4df329f6989059fd501c393b2b5d6f8b5a6d937b464ec1ea20f8159461ea3cc196d3ffff33b5cae44f653ee634814bd0fb258278ebf1d084b168a4810760e9b93641b3f1fc73794dc60888fffb05b759758a2e85e868f851993497b787027254863a506121282cf71ea3bf07628715f2117377ad75a38353a6a78c4124e8f7b2a642558d7a1c320f3b73597c161656a0a132f01c6f77aadc82a89b7817419ef886c08742172eb2f48d0f07f146f13fe527fcda15e4f64253080738250c9a6f464f55b0a540d5565764d1d35e59d11c6e7a0c8cd0e9fc02591fb6fe471d95daa8d5d178934750b5561f08a423dd6e4bad2c6e3ee09e56d81b96fede459125a93965185d1fe288927dba9afa830e986aacef6f1c6d045c5d044e2c915e3e4b15a451501244f248d990448a96f2fd39f469101393f71a040df15a46c61b5c6ce1cd41749d5ed0c3780a4ea400b3a3a16f5c0e4723c0ef0c62edd4f048dbcd6cb2307ecf0b516f8397feea6bf4810fa304c9554dc7708ab40be9b720bdded2bfb565c6eed13ccfc1d89ad63971ac178ad0338d692912bc4972d8c6167f8a49f6957a0bb0891ca3c9469784d083534fda31ee41084b9eb568f9557f8507d81b0890a65df6a2e70635c73115bf8a2bdf04d6aa074d4587e2940c06ac66cb065fe39e41a7463c71f584f692f9fd73e1b6bcb4e5d648ef356757a9ce4c3c8f8a2ad40972671ac52307782328f0bce3a5e56f435d155e85f83ec66444ecda651302606e8d55b967b5383b10e94274f30afd9b123aa4596b14d68f21708cb28956c2c49e170bcd21b1deb58d61edfbdd0c574d1a1d313987fa7a303b5bb43273235673d26240efdb72ebb195580533930efadc7e0dd2e7907aecff5cd823962a0ba2bd86b439984235311df73142f9f7a593f259f6fc429cdc38ddeceb7b53b6113c5c4a15d06a278b7f9c0b11cb6ead777a413e308ad2056c527bed1683a02fe1bb8595e8d9c3951258ef61f15997144a2b09efa1e492a5ed2650ee2e4d0cccad6497376b4701fa257c443f36f886841d752681286c992b9be653c337684081902fe69309e568311441ead337273acf814b834f6e40f736354fcac1efea7fe1ddb7fbf033b5146e89ffde61a5c5708a276a34b5cc57aa76487ddd6f12d5473a0e64df6cf0ff322810aae4568e2c4a195f600f0be590d584f9380a6ead60391f6469e85034594e0bf37e5cab9367dd1bdf31c6169645015c168a0411cc9394a29a8b92abcd9d1b3cc0ddcd51503b2c071119c40c5ac4a6345175b5d8323196f65d9e282eea1e4032040b779bd6c803dc8377b18d0cc19b4422df38c86f314297fccdc482a6a914f1b2acaea94a03b95cae70851a81c76934e6ac5a1751c3a66abcb9a1e6599ffa2271fc758e50d9edb82a25aa8de6c53d7cf3c8994a607c41733c7a302b294173b928ee443b6b19eece9000d2abf305d0cdc66f2ed13140155c1bb3ca97697618d936e768e1ccfcb4fe398e5e60a44e13ab97122afaa2a610790f8a5bff75b0124dbc4f200946178b6aed92d4cc03d8f885a28fd701eb2c77e70e1a400190cb47f98190e59c9cb4a40a476854f7208a68454bdb72e42c616682ba4c828d3a291304f876ae7602ea23c19f6a3608fc338390c7ef506690c6680ba5f6947f9363d7c0f68f9b60f1479c8d121def9c01cac06b5aa48a3abb1e55a57a469afd2893ecd027bcde0c9af7422d974c67e39f99e4bb66076760ac234a861462ba70e1bd39fb68a34da99b176252a1b24abca240c6ab20a48e158cc0522f2d067462dfb42587dc7d7fa2394d5f79a53107ef91093e03d0f8fcd3d78cb0bd7ed6cdd87f1848c85748d7e53176cf01cc4f945670c9bb61eef0ce3fbe4e5af23c264bf1391210108329f52f5bd4965d1e933f776f54c3718d6c69d338a10edbb08f93d7f7490d9eca3ce79712cdb34353bedc70da82670ac8edfd2b3afb3106eadc320b24172f15ce4b7bb30426f3c349058989f3bda55e993ec824fc3579cf064b6b6d69432fc7e2c30f9496bd2784ad28e154c4d00817e1869bbc68266a75b604d44b150d6693a18d8a0f17104b2441a292747305ffd13bcc0dd00552aa6e9608dd18b1053297be53601cf71fd4b94231b0c7fca3990fa8195d2525b118e517921f4a5e42f33fe04529431fe19ccfc8290467f82d2a9035e7cc3aa5227ea49557f0ff7be1f4a4b0ccd56c2dff6bdc35074040607277e67188c247be5ea2ff9cffb441e806c4583c806380f0cb9a2e1f1ab9feca1d7fe17d08fc1d124d62602e535d3e09afbc1f550a47feb8f29e1794fd626c9404fcfa680049fca8a72eb2342b4ba7147cac95fd03c4f9ecc09215c586d91914bc5f684bceb5cdf88f51f8bfdd4f6c226da77a2aac9d4338c5f882ab410a08155f8f7107a141c2dd1aaf7567d8d6d27827d443a382f831b010d27e872043aa444d5e500eea8b5a8e3e82dd133087823f14d719f650709088a86620a7b8b49e46129a862be2d219f779358df1daab21682f1a3a591f93a99877a9b9e7794aa80efe642f9c79fe1a5ccee3973ece33e1155707106ca02a12e4c119df64e03d570bb086ab78b1362c570426c56912043f2396850fa439b5b18fb45e4f739319b228f5cbce6c602f0b5e0bcaa4b89d14a0d6f95aa7ecebc1108b13746c5f3160ee2d0657bdaf7c5d5592e0bf5ea3af6b9afb8d6e850714027d6845bc6ba2b91c4aecea4776dba14ad710e72bf6d8df58aacb4191c8a7741677f3e901535922dd0fcf2dd93215296a20966c92e20c836a9933ddfab7058aa1fac4dbcb9bb030b3af60d9e27e8dcd55f1f23187de58b110c4d7e42e50926b08126c931b8466b494745f3e0f075df17681adb3e9de4b8c7ed529467aa77066bd7b8227d39c5560248762db8dcd02b98e6f46308ec33deca98e492f7fe07e5c5446017580faf3ffbc24920cba26cf06488b03faacccd750f739a5f7ec34087f490c71dcf76a37848208e1ca4ebb3781db2d6affdb49b296767919fd069de8dc532fbbfc69a142468dda608b2d9b2b9f0e0351aebfab935013c62f56eee005d6eb5ca064a73bb9f103393acdb2586c4baaaea0c3cae9c854472a56df16002d9cdedb24938faee6761efc3be6d4b0693d02e00e4d8c5b342b9b7116362ce8cf557b105cbba1e84bbbb15905cfbffa8024799516455798da018b2b5da798980634b53b81bf74391e6b9a800883fa7d7907429100cf3c3e1071306b75bdc0f3be9710571f48702e53b330c39474210ec316787e1130fd520dcf04689950a71912ea8249ed3ccf59e3fa06563bf929fde15a725051c31c8c5f75cb2f909b6240bafe4eca6617a5b5925b598f01309a0af1aee45611a5e262622b55c4f7b4f540ad818dafcbcdf7a4370351a1da8002bcc8ff05fef2465e91e5ec2ce3f0eb91c2202cf6189d02d7ce12dbe7736d6c1aced2f55438d231abff25d29a464c9e349d94192bd81f3f2e5332347e0453d2dc8e9d0f435138bad448420e9f60963e7b44bbdd42626e3f50d1e2fb20a7b906961cad61cca65f2c9fe77d01a6cc61fd768675abc4c2028d3c80a97ce03967c328e51483cf32f2895a8668e390b0286d03ace925829259d718207d47c250526b825798e14e637dc4381a1bfed06d361871a0d24c500a45e0e0450e097b502f435bf5d82f3948d6887d1d7e9798b1fd4dfe7dc45136e40d35a40c6ca08f9cf2268419bea5fd6cce2cad4312ef52be2eab069ed5d527f16fad33ccce63558344ed5e3c754a2619dbb99138518a4e1d5dbd13be2894cae1014acc92ed57e095114a1dcaaa990d65f423bfa039d8f7126619b1b029d3d25a9ec9d47b231eefc685fee70b780ebc51ba4e7e9fbc3ab24ad560bea9cf4bb49831387dfd99db7e8ace9199c1a8845209dc1915872137feefb234f2cfd9201ee4b296878b4196b6322f4d10e25a7fd422b3ab764a4b241353246085c923fbb54f359baa03f9ad7aca24a564fea309910d5bfc1aabef84df85cdae1e3504867b481b54449ee8a3c7c476fd66fbfd0d5a45879181ef178ea3fd35f1e875435d12516751f033933eb27097dc55fc2d1c8a5b57ece06e1ed329f90f14d9fbad9f7aacd3bb843de29cb96d964b6f257f78e7112b185509c74ed9a7755821d07e615c0d3fb309977cb572305c1ce1cc8a0e6e887c81dad35b94631062f64ecffd4b14f6f70ea1a676a8b87538e3b6b7e3f20e64ea02eea8621d1d64a1aa804c28897d7f35768b4371f67a3ffd3634ef702212aee26046922de757a4784b78c7d76070ed6b296ff806c860d82e704882a23493264a5c2ab77c457961a348dfa0fb79b2990858b32abb72bb0783f46c43872788e486437280cbc2c9218af6258db1e4dd6b2748145434c1688f5908f0537b384ed31680eadb8252b1b2e4e68621db69578d0d68016adf9e131307b472f2ca82e7c82d9fa149b0ebaf5c11a567a9ce9e6a1ca411210f3dfe458ae7b31accb744ef65d1af9b4fa6d2cbd2b49aa80331d1e6db8356a46b821dce7e85df642bc4f339b7ad2e0fc72081f319963eb8e86c73156b6afe4f87755f9ea5db402d416f6fbe2b46677e4682826f05aa842bea25953b7e15d0eff409b1fffea522c73e6dc0d6ccbe29a32259bfc49c9fb905c97f17519653a927f3bad8d6883232335d9cbb1dbc57e987447f188866bfb1760c7b61c444b602f3328187c3273756a8a9b4e7866824a36bddef87a66ba345091c2d08645fa9fa31c94f9067b37c1633dfb2a4d9f42c2de8ac189a0f9fc5a8c4ab0541d9e888fd08b450182818392d7a5a19a6a667dcd9cff516b7170a64a2b8309f7104d4fcf081a32d4ca01196bed2d1b6a959783ee8df5f6dcded8d806f294cd3da5e820f320b54cd301fd85e6a12a2f2d117d4ed2f2e80015aba461d1596cabb8ab6fc42bb30baa803734545de178d83c01486195433aa6df4808994f77ad2aedabfb49482d35a799ee58a704360657df88a18116054ef0f22ef95af3da5ea46f3a5f6bdf42ec1228a0a8055188aa218fccbf1e25132f7f960bcb990eaf6253d4d589243a0b85ee06ba0ff56a8d059d023d16f174a3c43ac1bb19563fa4d96e354f2c3f9eb779ee65253438fe6d78dc05d5f6bbc1ceb97daad99de8d78b504d15df3f1c610a01e064d344d58408ad18e2ac3143e87cc6c83ea3308898862f7b335b06b91e4dbafb276978bb954f74e944e6ede42277cb47fad5a1b1c71464e6b4db5a83d8e295aad737c1ad6052420aba939596ba45234a86dc7f6ae0f5b4f1285ca5f886e3ed301ace6a32f319ef6fe707fd073b7bc2f19978c90de0f584acad4645512183e7cfb65454d53ebe201b4b2db71a1296574173ac4bbbf0069c80a67f87cac83396ec7a2a21f0838b78a805486c47561dc6cd99ca27ad1dbfc944b0b6d61bea35834400c6d67cbb6c2042a0e716856ec408509fc06fcd690e73ee3cd9752afa1b7036a6d10efcc9bd242dda39d3d9e5352bca0169f1669f167bf9e8eba5052fb95bcfb1e77f744789c4b0f48303940621e5ef51b685999948ad9fe0bcb7a9dadb37bd8ae64041d243de1750a29fe088fe7526257c1161fd7d08bada230fe258c84f214c391b6d93ab344489a46f9d9d2466a1a6b7de66f1bf85b006383e5f307c53e0fa639ba82cbc0fcd05ae64592508e711c18fb8df1c64159ce16447180b7f663818201031a44d0631fd58eb2c639c1f5d0064dd373933b26ba2aa0f293391efdb06aef7288e0192a0c5980b0e1d8f3f3642c25b9fe257e55440a18b6b1a6a8549c098fcb0222516ce5791183e9c0b489d44efc925cd16073002f086da9ae1632ac27c8ad2a310cdb36889826ce5cdbfc0c22295ea6d7192f252fd8e45c57bc4174dd2e17a51e577114dc3b17b128ff6c5ff5064053bb6464bcb59df856d9626f01b32c5cc8ecf9da1861132000473a29210d61441eb68e306f1382a873e297084934b6093289320ca381c283abc9ea3c92c8b4ccfbe5afabd942ba1083290f69a5681d6b4d583524adc0486a4ff907560b268577e4c4aeee06de7c1219c57fc8d76b664feb4f820483ffc0e430a02b3a930af998269148df1dc910fc50b7b84a9a575c24cf07f9da0c4d318310003280288f8f00816fbf33ca6a0a3d42907342efbd3c1e0e016905c6b47083fe48420655f67ffbd89a8170942f1c896cbf1faa43f9434db16075b86741359c1fc86ec3e9cf212927267285c027b453b4110a9a5fdcb8345370ab2df133b404497931644cc9b019cebdc3c7ce4ff0facf80bfefb343078a6333f299a3f4db05e699541093bb6855e32ec0957eac639da2e61fe7f41ea02158eebd213ce18c8229cf88417a77e04ac34c0717cc2cf785e5a161de09de54cc355287ec35f2e11891d31a84bb73c908cfe1eea59feea10de0ce361710e9e06e96d2fadd8a1c0657b7c1f16c96e1c52f3aa9ae0a75813b2ffeb8276b5ce0e5a26585d7b6875125149d6397ad3ed3049903febf55efe9576fe92b55e76ca9ea677682980d433b9a7117502bafdb548f808a70eb66213fd0267aeceb95ed0e1778e1f6117fca18e3429e053c6fd934aa7db639b80c2994f93729cdbce16d443276943bb7082e09f681c34ed5cad48748590c32691841101bc402529beab3483867cb2f33ce6b773f737f8a17b40b4e5d80cf92c53ebee7d8b036081adbb0a294d3de1e8297368dfd9f4c26bbe0bbf8bbd704b9d2cb28d4ebd0e92d3c6ea9528491efa713579028c293e628c93cdfa01b19b28ee335295d9f037866151db80336613755632d6c1f6f828da482c7f61b6bf0fd6424a60da175c5c04d7827bb8ff342476604e7148011bdbeed5d758a825137e04a151bb9437b318a344405787c9cc12ed8e59984bf393423ffab0b0a5943d00db751b898e1faa20c34423f52bf1332d85ef809dac31babd85311e8c2dca5f5a95e8c799536489c3a12cab621567a343b6fafb83ec977b958b8a41955e73da1a07c4e18cd730338b6d0e1b567279b3a1f3753c732c358b5121641e39e8318e8b67342ae3700024675d060de63c9720bb7547a2fac62bf296be196604ba3f7b439cfcc543b8291d849e95e07a79ca59bce841915f0eda6c3ed0bdbcfd66f91b09e022dad9dbcf9bcaaabed1c4beb7494169f0a45913a0cf542d54977797b338a69b036b54eb1d5cc8fd860906d4190b79c86a8c7efb67fbeaf1c52776c52446f553ac682fa0ce3bc30f40865b1af1ae81f8cf6dd3fd86d05c5dc2aa2895d7c83baffc26300d2a2f4f0ac50b89478d2e652a450bdb93c81ef2ee3562c9322e383bc6227187ecff7c8badf3e4d4e495812156c433a0d7037aa9186575681503d038237c32c7741ada6355e88cfe704775fc9b6bc41c2218fdab3642351410b1549acf8863c010c83a3dc2b9c4c78158725c9da39632ace98e7b847fcdad1b2edf9cec365482d9ff03d3cd20b237b3d266604bdbcbe80ff65bfeb0a4d9a524dd238fb1c4973c80d97d7d1001f4f09a023051bb4e691ed922b2c76f4575a848500857941207ac4020cdda46a3337136623b83c98290154be01b7ff668a1f5dbfc5e60f6323040ff7d510f7359154cab80d70a2d07e00724deb14cf430ceb4fc05ac8c2d6b739a152fb03587f93adb9b5e713765a2d71d079108ebe28d0cf0f6afbc227b8db700bc8b976ca76e159c300b3293736eb3a4d107d5555b1eea895d3552af7baadaffebe2e86e46b203ca7be2efc065a5cb8ac6539002bf4fe2028ece483119445ef3fe50cf05eb77ee19bc1ce991da6bef9800841233f08f083628b55bb94ef20e783b2f9ba444b54f61aded2dafd9372e9e6ecbe2a4f2d4da32a5aa6427d79aa23337ded1b1fa27954636c9c414b88736b867227e2b45e8a148fdeafefb0b44ac118e5a5d9fbbd69574a2dd22af40ef545148ea55b3c5e2ed088dc281acabe76f9ab456a2abe1e8570f29188a83e239621e25eb540b38da8bc7ee3e7861c9e565819c75fc8b619f9a64d9c5e95c9e56d295b48d0f29143168d53a387ce0a28af12e0476ed207c4d77cacee979edb7f83db29e1b8d201b1b48d8ccd065f374952e5f1f1f37446d8bfa687185f1f799a9d6044cd5168cdbb7f33b8427b618fa792d87a0cf0860517fabbbbae034bbdfc56da69d60952b98a0adce1ecc0c49da40aa51de674f01b05cfec89400eb23073c076659e20e9b47eb43c13b68b4c131bff0a4ed0c54c911fab5afa4761759bf2558f5c9141ac71b0bdb263d45211256a11fd0d9d391bc9197690c09f3541d5847b76940a7966aad247dea0a1f525c7f0698d6fc4df629f86e56343c482b0afb711e441e219b375bd555411b5396538b2061d4984c661f3346cf3ece6e575fcd88399fd3797e2fbbdf03f73ce75e718e9c3a53df14ada917b3ee2755f0efa2fd008582c4c970c4684d8078511608b5daea47990ac1598c3c79e9df6685c9002899ad51ea15d6d8477868674a6437807b0a90a0d4492f895c36f631f040dc246520e2a810c0241f349be030a75132112be095e0e469c72fb6b2d0ae68fcdfb156bfe604279df358c39ac9f9a0342513e9223b155380917d2b81e6ea992b11b8c109b515eaa5e0774fc0aaef3f6db6090e3cc1557d8c7b50e84f22ec065077cf939f08fbec35ea938aedfa420b8077235f2afb6b5350a732c80dc43fa1d736dd29ca8919c7bb331fe494769eae7acb88dc3fc2007ac52021541c5e972a9b1f61633cb07ccd36f3d40946f048db1246ad1fc13a588aa70484f6415dfb83aab84ea2dd1f5b122c7882bb52728ba9a187fac8facfa1b7e6583e2ddd1d91facf664166496bfd1ddc6a4385e4fbdc29c83ec21eec52144554ecd1f03ad363351705478f76b1c398ef9eaa25e861d6d148fa888aa26fd98975f374b15f341a3e695c2523869ec69ef3504559da6772555c2b9d1ac91217ef22f906c730c1d974b848962a1f708a257c2a337f1c273bbfba226bb6140da73284ef761173ffc4e05a0efe65878cd22adedf5ee8d597ed6dba8faa7b3bf7725cb6294c7b6d070e1f2b10198031d8782aec04f6d9f401843cd49d4a3cc404e7ea55f3cad62cc8d3f05beb9995db387017cff0cd726ed3166c72d8dea36d248be62cb1bd1e30512a5a3d37407c655c742473d317d1e0d554991ae323b273399db759ff5827e0fc2b1b877e3831d27cef1e4d79b6f6f4a8ede82e2c225fb19cdde8ca9b90817e0571735448065fc230d1b0d84ab87381bac1cdfbb1f0e648cad336f6675364cafb23ba73baa2a8bc3e94e5a8b7f9187ee0a366b09a9a96237983fbaf62f2d6ede745c24ff5c7e1d638925bd943cd54f401812bc44d34a02973f2da2a39ac16b510e3435265b7e043a633dee61ffe4f77bb8a5dc6221f9ee30901459682c17b2d715e30d384f1c4622a2fa5ca9763f0329dab56499489965d01cc9badc7a08ed5baa1b327406e3ea17f10295f090c4726d429bfcd50a2ab1836637419d105dca285f794b4f4c6f7c8c07819f19a8b7d26220478db6c411c52e0a2746a8ee90403b1d2693bb72fbc56613dd56447e5293036a3525c91ed367b387e7e23807b15c35df1e36a27c959d2c5e02b0704aadac815e02c75bd56b0ef48a1dd77d944fa40f71876deecf20e26908b6d1e6a0be1dc45e1da750f879a92b0e3fed398100c4ffc15aa3ae139351db22e3a8f8a212eb91794c2083cce29d0b9b7bcc113921fcb64fb022d99811a5f521872a5b575dbe39af65dcca37724e8e34bcde88ea28069931c7fbc816bfb57bf188673cae0591d6540b25c3fbe92a4a540b6743559a14351ccd089e01c847e67ea7ac66b76e76b80da367bf32a98b4deb416ce9d322370e7045e1f2be9af28be2731961d4633212a64fdb0358637ccb4144407842cbf94dd9492a2ed61f0366dc9dca21750d65ce247ba571834bac165ed8a59f308aba9b85e6fb9269fb43991b85f735ac89f8219e44aa1c4549c26465dc8e66df339e9d9cdf55fa849fc9134b69d27b86afc7183bd8fb52592d179854dc5a27907d00a250be2c6fff533c7428b874c17a021617705dc4829846c2f24720065f08d6af2677d53f3e293992cf08c22ad8dc559630df548027bd947e5048bb8ec1350e36043aa7bc1a48dc4768b65e745881033f412607ceb0057f5a6d0b7f3ef5a286e282539552166eacdbce13271deb9124716dbac11c842bbeef2593611e24af493c96f174b0697cedc9c2947fbf0fcecb7902c13d7f0178931d1fcf9beb656ccfead13780d37aa41e668f5ac99d7fa754186fa1745f16fd0848f0a49fe051b5cc348f7c2de9f6f4493dd3147eb6afbd6cda424070b2383f5faccabac2daa779200f1069224bb2b4a2e36cc5f23f8fb3871ef039fa651d3a3b5a07ea7ae509fbf847c9291df9d5bce416f6dc984321ee99c50b4353b512686413cd4a7a70ac9d1da6b3403c0af84f82241d03a50ebbd142cf00240d0bd1476214f006fa5496ddc4c9c38c231d61e77863ecd33c77b248c1140edd41b48d8b6b614988c2796237c40511be98e084561b72f132b4b43e7b4e1fecd5f3a39df0d3d6eb057fcbb2c3a22b47a1

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:

  1. Create a numbered (Add numbered list button) or bulleted list (Add bulleted list button) using the editor toolbar and add the content that you’d like to see in each carousel slide within the list items.

  2. Click the Source Code (Source code icon) button in the editor toolbar to view the source code of the page.

  3. Add a class name of .js-carousel to 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 id="carousel">
  ...
</ul>

<script type="text/javascript">
  ready(function() {
    var carousel = document.getElementById('carousel');
    if (carousel) {
      new Carousel(carousel, {
        // 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 string
null
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.

Related extensions

Animations and transitions Free

Animations and transitions

Add engaging animation and transition effects to elements.

Content blocks and icons Free

Content blocks and icons

Display icons against categories, sections and articles.

Featured articles Free

Featured articles

Display a list of articles with one or more labels.