{"id":4688,"date":"2021-12-16T01:00:00","date_gmt":"2021-12-16T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/angular-carousels\/"},"modified":"2024-03-08T19:59:29","modified_gmt":"2024-03-08T18:59:29","slug":"angular-carousels","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/angular-carousels\/","title":{"rendered":"Top 10 Angular Carousel Components of 2024 [Updated]"},"content":{"rendered":"\n<p>Here&#8217;s a list containing what we think are the <strong>best Angular Carousels<\/strong>. If you are looking for a carousel, we have you covered!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"1.-fullpage.js\">1. <a href=\"https:\/\/alvarotrigo.com\/angular-fullpage\/\">fullPage.js<\/a><\/h2>\n\n\n<p>\n    <a href=\"https:\/\/alvarotrigo.com\/angular-fullpage\/\">\n        <video width=\"680\" height=\"382\" controls muted autoplay loop playsinline>\n        <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/fullPage_intro.mp4\" type=\"video\/mp4\" \/>\n        <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/fullPage_intro.webm\" type=\"video\/webm\"\/>\n        Your browser does not support the video tag.\n        <\/source><\/source><\/video>\n    <\/a>\n<\/p>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>1 month ago<\/li>\n            <li><b>GitHub Stars:<\/b>35,461<\/li>\n            <li><b>License:<\/b>GPL-3.0<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p><a href=\"https:\/\/alvarotrigo.com\/angular-fullpage\/\">fullPage.js for Angular<\/a> is clearly the best full-screen carousel. With more than 8 years on its back and 34K+ stars on GitHub, <strong>fullPage.js component is the leader of its kind<\/strong>. (Used by <a href=\"https:\/\/www.bbc.co.uk\/news\/resources\/idt-d88680d1-26f2-4863-be95-83298fd01e02\" target=\"_blank\" rel=\"noopener nofollow\">BBC<\/a>, <a href=\"https:\/\/www.dreamworks.com\/movies\/how-to-train-your-dragon-the-hidden-world#about\" target=\"_blank\" rel=\"noopener nofollow\">Dreamworks<\/a> and many other big companies.)<\/p>\n\n\n\n<p>Fully configurable with 50+ options and plenty of callbacks and methods that will provide you with a smooth developing experience. Both vertical and horizontal scrolling are supported.<\/p>\n\n\n\n<p>What makes fullPage.js stand out compared to other carousels, is that it creates an inmersive full-screen experience. Scrolling up or down will snap to the next section making it easy and quite pleasant for the visitor to navigate.<\/p>\n\n\n\n<p>It&#8217;s ideal for storytelling, marketing, and websites with beautiful visual elements.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/alvarotrigo.com\/angular-fullpage\/\" title=\"See Demo\" target=\"_blank\" rel=\"noopener\">See Demo<\/a><\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"2.-angular-slick---ui-carousel\">2. <a href=\"https:\/\/github.com\/mihnsen\/ui-carousel\" target=\"_blank\" rel=\"noopener nofollow\">Angular Slick &#8211; ui-carousel<\/a><\/h2>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-12-16\/slick-carousel.jpeg\" alt=\"Slick Carousel for Angular\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>6 years ago<\/li>\n            <li><b>GitHub Stars:<\/b>77<\/li>\n            <li><b>License:<\/b>MIT<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p><a href=\"https:\/\/github.com\/kenwheeler\/slick\/\" target=\"_blank\" rel=\"noopener nofollow\">Slick<\/a> is a popular jQuery and WordPress plugin and, thanks to a third person, it has now been ported to Angular.<\/p>\n\n\n\n<p>It&#8217;s a simple component to create a basic carousel. If you are looking for a more traditional kind of carousel, Slick can be for you.<\/p>\n\n\n\n<p>It also includes a fading effect and some fancy features such as carousels syncing.<\/p>\n\n\n\n<p>One of the main disadvantages that I see is that it still requires jQuery as a dependency.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"3.-keen-slider\">3. <a href=\"https:\/\/github.com\/rcbyr\/keen-slider\" target=\"_blank\" rel=\"noopener nofollow\">Keen Slider<\/a><\/h2>\n\n\n<p>\n    <video width=\"680\" height=\"382\" muted autoplay loop playsinline>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/keen-slider-angular-carousel.webm\" type=\"video\/webm\"\/>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/keen-slider-angular-carousel.mp4\" type=\"video\/mp4\" \/>\n    Your browser does not support the video tag.\n    <\/source><\/source><\/video>\n<\/p>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>4 months ago<\/li>\n            <li><b>GitHub Stars:<\/b>4,594<\/li>\n            <li><b>License:<\/b>MIT<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p>Keep Slider was born in 2020 as an agnostic touch slider without dependencies and with hooks for React and Composition functions for Vue 3.<\/p>\n\n\n\n<p>It can however be still used directly in Angular and in fact all its examples ara available for Angular as well.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"4.-swiper\">4. <a href=\"https:\/\/github.com\/nolimits4web\/swiper\" target=\"_blank\" rel=\"noopener nofollow\">Swiper<\/a><\/h2>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-12-16\/swiper-carousel.jpeg\" alt=\"Swiper Carousel\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>7 hours ago<\/li>\n            <li><b>GitHub Stars:<\/b>39,211<\/li>\n            <li><b>License:<\/b>MIT<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p>Developed by Vladimir Kharlampidi, Swiper is a well-known carousel. And it&#8217;s for a good reason.<\/p>\n\n\n\n<p>Swiper comes with quite a big amount of configurable options. This might be a bit overwhelming for some, but if you like to have total control over your carousel, this one might be for you.<\/p>\n\n\n\n<p>It also comes with advanced features such as multi-row slides layouts, virtual slides or two-way control.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"7.-angular-owl-carousel\">5. <a href=\"https:\/\/github.com\/vitalii-andriiovskyi\/ngx-owl-carousel-o\" target=\"_blank\" rel=\"noopener nofollow\">Angular Owl Carousel<\/a><\/h2>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-12-16\/angular-owl-carousel.jpeg\" alt=\"Angular Owl Carousel\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>1 month ago<\/li>\n            <li><b>GitHub Stars:<\/b>174<\/li>\n            <li><b>License:<\/b>MIT<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p>An Angular wrapper for <a href=\"https:\/\/github.com\/OwlCarousel2\/OwlCarousel2\" target=\"_blank\" rel=\"noopener nofollow\">Owl Carousel<\/a>.<\/p>\n\n\n\n<p>It might feel a bit more obsolete to some, as it still relies in the good old jQuery library. But if that&#8217;s not a problem for you, Owl carousel is a totally valid solution.<\/p>\n\n\n\n<p>It comes with all the basics you would expect: responsive options, URL hashing, autoplay, lazy load and dragging support.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"6.-angular-gallery-(ngx-angular)\">6. <a href=\"https:\/\/github.com\/murhafsousli\/ngx-gallery\" target=\"_blank\" rel=\"noopener nofollow\">Angular Gallery (ngx-angular)<\/a><\/h2>\n\n\n<p>\n    <video width=\"680\" height=\"382\" muted autoplay loop playsinline>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/ngx-angular.webm\" type=\"video\/webm\"\/>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/ngx-angular.mp4\" type=\"video\/mp4\" \/>\n    Your browser does not support the video tag.\n    <\/source><\/source><\/video>\n<\/p>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>5 months ago<\/li>\n            <li><b>GitHub Stars:<\/b>598<\/li>\n            <li><b>License:<\/b>MIT<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p>If you want to create a gallery with images and their thumbnails, ngx-angular might be for you.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Related article:<\/strong> <a href=\"https:\/\/alvarotrigo.com\/blog\/what-is-a-slider\/\">what is a slider?<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>This Angular carousel has been designed with a single purpose in mind: being an image gallery. Thus, it has a few advantages such as covering very specific problems and making it easier to use to build galleries.<\/p>\n\n\n\n<p>The documentation is on Github but you can find plenty of examples on <a href=\"https:\/\/ngx-gallery.netlify.app\/\" target=\"_blank\" rel=\"noopener nofollow\">its website<\/a> as well.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"5.-ivycarousel---angular-responsive-carousel\">7. <a href=\"https:\/\/github.com\/ivylaboratory\/angular-carousel\" target=\"_blank\" rel=\"noopener nofollow\">IvyCarousel &#8211; Angular Responsive Carousel<\/a><\/h2>\n\n\n<p>\n    <video width=\"680\" height=\"382\" muted autoplay loop playsinline>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/angular-responsive-carousel.webm\" type=\"video\/webm\"\/>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/angular-responsive-carousel.mp4\" type=\"video\/mp4\" \/>\n    Your browser does not support the video tag.\n    <\/source><\/source><\/video>\n<\/p>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>3 years ago<\/li>\n            <li><b>GitHub Stars:<\/b>151<\/li>\n            <li><b>License:<\/b>Apache-2.0<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p>As the name of the npm component indicates (angular-responsive-carousel), this component puts special focus on making it easy to create responsive carousels.<\/p>\n\n\n\n<p>If you need a responsive carousel, this one might be perfect for you. On top of that, it also provides the expected features such as lazy loading, touch support, free scroll, autoplay, bullet navigation, arrows etc.<\/p>\n\n\n\n<p>I would say it&#8217;s a more simple component than others, but a perfectly working solution for many scenarios.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"9.-angular-flickity\">8. <a href=\"https:\/\/github.com\/benjamincharity\/angular-flickity\" target=\"_blank\" rel=\"noopener nofollow\">Angular Flickity<\/a><\/h2>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-12-16\/angular-flickity-carousel.jpeg\" alt=\"Angular Flickity Carousel\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>7 years ago<\/li>\n            <li><b>GitHub Stars:<\/b>33<\/li>\n            <li><b>License:<\/b>NOASSERTION<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p>An angular module around <a href=\"https:\/\/github.com\/metafizzy\/flickity\" target=\"_blank\" rel=\"noopener nofollow\">Flickity<\/a>. Flickity is a JavaScript component developed by Desandro and now brought to Angular by a third person.<\/p>\n\n\n\n<p>Flickity is a quality component although perhaps a little short in responsive options. Also, not being the official wrapper, you might find that updates and support might be a bit slower.<\/p>\n\n\n\n<p>Flickty documentation is amazing, so you&#8217;ll for sure like that part! Oh, and it comes with a full-screen feature too, which comes no handy for image galleries.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"8.-ngx-gallery---angular-gallery\">9. <a href=\"https:\/\/lukasz-galka.github.io\/ngx-gallery-demo\/\" target=\"_blank\" rel=\"noopener nofollow\">ngx-gallery &#8211; Angular Gallery<\/a><\/h2>\n\n\n<p>\n    <video width=\"680\" height=\"382\" muted autoplay loop playsinline>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/ngx-gallery-angular-carousel.webm\" type=\"video\/webm\"\/>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/ngx-gallery-angular-carousel.mp4\" type=\"video\/mp4\" \/>\n    Your browser does not support the video tag.\n    <\/source><\/source><\/video>\n<\/p>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>5 years ago<\/li>\n            <li><b>GitHub Stars:<\/b>436<\/li>\n            <li><b>License:<\/b>MIT<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p>Very similar to npx-angular, this carousel is an alternative option if you plan to create a gallery of images.<\/p>\n\n\n\n<p>Unlike other carousels, ngx-gallery supports a full-screen visualization of images. And, although it supports the usual sliding to switch between images, it also supports fading, rotating and zooming animations.<\/p>\n\n\n\n<p>I doesn&#8217;t seem to support dragging with mouse devices and the touch support is much more basic than in other carousels.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"10.-ngu-carousel\">10. <a href=\"https:\/\/github.com\/uiuniversal\/ngu-carousel\" target=\"_blank\" rel=\"noopener nofollow\">Ngu-carousel<\/a><\/h2>\n\n\n<p>\n    <video width=\"680\" height=\"382\" muted autoplay loop playsinline>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/ngu-carousel.webm\" type=\"video\/webm\"\/>\n    <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/angular-carousels\/ngu-carousel.mp4\" type=\"video\/mp4\" \/>\n    Your browser does not support the video tag.\n    <\/source><\/source><\/video>\n<\/p>\n\n\n\n    <div class=\"al-features\">\n        <ul>\n            <li><b>Last commit:<\/b>12 hours ago<\/li>\n            <li><b>GitHub Stars:<\/b>328<\/li>\n            <li><b>License:<\/b>MIT<\/li>\n        <\/ul>\n    <\/div>\n\n\n\n\n<p>Advertised as the &#8220;Angular Universal Carousel&#8221; this carousel tries to keep things as simple and as agnostic as possible.<\/p>\n\n\n\n<p>It doesn&#8217;t include any CSS so you will be the one having to deal with all the styling. This will for sure be a turn down for many, but probably a liberation for others, it all depends on what kind of problem you are trying to solve.<\/p>\n\n\n\n<p>It relies in hammer.js dependency for touch support.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related Articles<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/carousel-UI\/\">Best Practises for Carousels UI<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/jquery-carousel\/\">Best jQuery Carousels<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/react-carousels\/\">Best React Carousels<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>List with the Top 14 Angular Carousels we recommend. Wondering which one to choose? With this list you&#8217;ll be able to decide.<\/p>\n","protected":false},"author":1,"featured_media":4687,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[108],"tags":[10,18,43],"class_list":["post-4688","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sliders","tag-javascript","tag-jquery","tag-slider"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4688"}],"version-history":[{"count":9,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4688\/revisions"}],"predecessor-version":[{"id":19690,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4688\/revisions\/19690"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4687"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}