{"id":8519,"date":"2021-08-31T07:05:43","date_gmt":"2021-08-31T07:05:43","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=8519"},"modified":"2021-08-31T08:53:16","modified_gmt":"2021-08-31T08:53:16","slug":"wordpress-carousels","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/","title":{"rendered":"All You Need to Know About WordPress Carousels"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Carousels, sliders, galleries, people often get confused about them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And designers still seem not to agree on their definition.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, here are the definitions I feel comfortable with:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400; text-align: center;\" aria-level=\"1\"><a href=\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/\"><span style=\"font-weight: 400;\">A slider<\/span><\/a><span style=\"font-weight: 400;\"> is any web element that rotates through. It can contain images, videos, images, and text, etc. They can be managed manually by the user, or set on autoplay, like the one below. Many times people use \u201cslideshow\u201d instead of \u201cslider\u201d.<img loading=\"lazy\" class=\"aligncenter wp-image-8546\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image27.jpg\" alt=\"Lonely Planet slider example\" width=\"1200\" height=\"450\" \/><i style=\"text-align: center; background-color: transparent;\">Source: Lonely Planet<\/i><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Carousels are a type of slider that does not show entire large images at a time, but multiple ones in a row. Some web designers say the carousels and sliders are one and the same. When using WordPress, you will see them treated differently. Both sliders and carousels make use of visual cues in order to show the user that they can move left-right and uncover new images, etc.<img loading=\"lazy\" class=\"aligncenter wp-image-8539\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image20.png\" alt=\"WordPress carousel example\" width=\"1200\" height=\"510\" \/><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400; text-align: left;\" aria-level=\"1\"><a href=\"https:\/\/colibriwp.com\/blog\/wordpress-galleries\/\"><span style=\"font-weight: 400;\">A gallery<\/span><\/a><span style=\"font-weight: 400;\"> is a collection of images or videos presented in grids.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8544\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image25.jpg\" alt=\"Booking.com gallery example\" width=\"1068\" height=\"563\" \/><i style=\"background-color: transparent;\">Source: booking.com<\/i><\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">So is your head spinning right now? Or is everything clear? I know it can look messy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now let\u2019s see how you can create a WordPress carousel. Carousels are not a built-in WordPress feature, this is why we\u2019ll need some other tools to help us out. Now, I&#8217;ve got three such tools that I\u2019ll exemplify right away.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to create WordPress carousels using WordPress plugins<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you want to use WordPress plugins, here\u2019s how you can install them:<\/span><\/p>\n<div class='embed-container'><iframe loading=\"lazy\" title=\"How to Install, Deactivate and Work with WordPress Plugins\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.youtube.com\/embed\/tRmW1Texk3k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p><span style=\"font-weight: 400;\">When choosing your plugin make sure to check:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Reviews and popularity;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If it has the features you need;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Go to the plugin\u2019s website and check the demos;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Start a free trial if possible.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mobile responsiveness.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now, you should be aware that most of the time these plugins might use the term slider instead of carousel. You can ask their support team if they support carousels while defining what a carousel means to you.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, I\u2019m going to make a list for you of the most popular WordPress carousel plugins out there. After that, I\u2019m going to show you a demo using one of the plugins. Let\u2019s get going.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3 style=\"text-align: center;\"><a href=\"https:\/\/wordpress.org\/plugins\/nextgen-gallery\/\"><span style=\"font-weight: 400;\">NextGEN Gallery<img loading=\"lazy\" class=\"aligncenter wp-image-8545 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image26.png\" alt=\"NextGEN plugin\" width=\"1027\" height=\"320\" \/><\/span><\/a><a style=\"background-color: transparent; font-family: 'Open Sans', sans-serif; font-size: 16px;\" href=\"https:\/\/wordpress.org\/plugins\/nextgen-gallery\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here you have the most popular features for the NextGEN WordPress plugin.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choose from 20+ gorgeous gallery styles.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Multiple Upload Options (Image, Zip, Folder Import).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rotate Images and Custom Crop Thumbnails.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Retina images.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A wide array of options for controlling size, style, timing, transitions, controls, lightbox effects, and more<\/span><\/li>\n<\/ul>\n<p><b>Pricing<\/b><span style=\"font-weight: 400;\">: starting at $24\/year.<\/span><\/p>\n<p><b>Free plan available<\/b><span style=\"font-weight: 400;\">: yes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3 style=\"text-align: center;\"><a href=\"https:\/\/wordpress.org\/plugins\/modula-best-grid-gallery\/\"><span style=\"font-weight: 400;\">Modula<img loading=\"lazy\" class=\"aligncenter wp-image-8541 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image22.png\" alt=\"Modula WordPress gallery plugin\" width=\"1057\" height=\"342\" \/><\/span><\/a><a style=\"background-color: transparent; font-family: 'Open Sans', sans-serif; font-size: 16px;\" href=\"https:\/\/wordpress.org\/plugins\/modula-best-grid-gallery\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at some of the most appreciated features of Modula:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Drag &amp; drop builder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create galleries faster by starting from the saved options preset. Change settings in bulk for your galleries.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create the ultimate gallery experience by adding videos from YouTube, Vimeo, or self-hosted to your image galleries.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mobile responsiveness.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Adds zoom functionality to images, when opened in the lightbox.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Shortcode functionality.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lots of presets available.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Compatible with most of the most popular page builders.<\/span><\/li>\n<\/ul>\n<p><b>Pricing<\/b><span style=\"font-weight: 400;\">: starting $39\/year.<\/span><\/p>\n<p><b>Free plan available<\/b><span style=\"font-weight: 400;\">: yes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3 style=\"text-align: center;\"><a href=\"https:\/\/wordpress.org\/plugins\/foogallery\/\"><span style=\"font-weight: 400;\">FooGallery<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8523\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image4-1.png\" alt=\"FooGallery plugin\" width=\"1059\" height=\"340\" \/><\/span><\/a><a style=\"background-color: transparent; font-family: 'Open Sans', sans-serif; font-size: 16px;\" href=\"https:\/\/wordpress.org\/plugins\/foogallery\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here are the FooGallery most popular features:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Drag and drop builder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Customizable templates.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Multi-level filtering.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mobile-responsiveness.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gutenberg-ready.<\/span><\/li>\n<\/ul>\n<p><b>Pricing<\/b><span style=\"font-weight: 400;\">: starting at $19.99\/year.<\/span><\/p>\n<p><b>Free plan available<\/b><span style=\"font-weight: 400;\">: yes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3><a href=\"https:\/\/wordpress.org\/plugins\/envira-gallery-lite\/\"><span style=\"font-weight: 400;\">Envira Photo Gallery<\/span><\/a><\/h3>\n<\/li>\n<\/ul>\n<h3 style=\"margin-top: 0px; margin-bottom: 0px;\"><span style=\"font-weight: 400;\"><a style=\"color: #2ebcfc;\" href=\"https:\/\/wordpress.org\/plugins\/foogallery\/\"><img loading=\"lazy\" class=\"aligncenter wp-image-8533 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image14.png\" alt=\"Envira Gallery plugin\" width=\"1055\" height=\"334\" \/><\/a><\/span><\/h3>\n<p style=\"text-align: center;\"><a href=\"https:\/\/wordpress.org\/plugins\/envira-gallery-lite\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Here are Envira\u2019s most popular features:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Drag &amp; drop builder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pre-built templates.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">WooCommerce integration.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Slideshow and fullscreen options.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mobile-ready.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">SEO-friendly.<\/span><\/li>\n<\/ul>\n<p><b>Pricing<\/b><span style=\"font-weight: 400;\">: starting at $29\/year.<\/span><\/p>\n<p><b>Free plan available<\/b><span style=\"font-weight: 400;\">: yes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3 style=\"text-align: center;\"><a href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\"><span style=\"font-weight: 400;\">Slider, Gallery, and Carousel by MetaSlider<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8531\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image12.png\" alt=\"MetaSlider WordPress carousel plugin\" width=\"1053\" height=\"337\" \/><\/span><\/a><a style=\"background-color: transparent; font-family: 'Open Sans', sans-serif; font-size: 16px;\" href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here are MetaSlider\u2019s most popular features:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Drag &amp; drop builder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gutenberg-ready.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Slider configuration: transition effect, speed, timing, plus many more.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create completely customized HTML slides using the inline editor.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">There are over 50 built-in CSS3 transitions available.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">MetaSlider carousels are compatible with all slide types: image, photo, video (YouTube\/Vimeo), layer, HTML, product, and post-feed slides.<\/span><\/li>\n<\/ul>\n<p><b>Pricing<\/b><span style=\"font-weight: 400;\">: starting at $39\/year.<\/span><\/p>\n<p><b>Free plan available<\/b><span style=\"font-weight: 400;\">: yes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now, most of the galleries out there have the slider option included in their paid plan. This is why for my demo I chose MetaSlider.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After activating the plugin, you will see MetaSlider showing up in your WordPress dashboard, on the left.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To create your first slideshow you have two options: dropping images or creating a blank slideshow.<img loading=\"lazy\" class=\"aligncenter wp-image-8532 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image13.png\" alt=\"Creating a WordPress Carousel using MetaSlider\" width=\"1239\" height=\"584\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">I\u2019m gonna go with the first option.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After the upload, I will be guided towards the \u201cAdd Slide\u201d option.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-8528\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image9.png\" alt=\"Add a slide\" width=\"900\" height=\"451\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now,\u00a0 I don&#8217;t quite understand why I directed once again to the Media Library, because I have already uploaded my images.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8521\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image2.png\" alt=\"Adding image to the carousel\" width=\"1133\" height=\"370\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">After the image selection, go to the button-right and add them to the slideshow.<img loading=\"lazy\" class=\"aligncenter wp-image-8537 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image18.png\" alt=\"Add images to slideshow\" width=\"338\" height=\"157\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, it\u2019s time to preview the slideshow.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8530\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image11.png\" alt=\"Preview the slideshow\" width=\"902\" height=\"189\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">If you want to create a new slideshow, just head over to new.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Whenever you go to the MetaSlider menu on the left, you\u2019ll be seeing all your previously-created slideshows.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-8554\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image28.png\" alt=\"Add new slideshow\" width=\"1207\" height=\"153\" \/><\/p>\n<p><span style=\"font-weight: 400;\">When you select your slideshow, you\u2019ll see all your images\u00a0 (aka slides). Now, you can make some extra edits to the images in your slideshow: cropping, scheduling, SEO optimizations, captions, attaching an URL.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8526\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image7.png\" alt=\"SEO edits to the carousel\" width=\"768\" height=\"199\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the right, you\u2019ll see a panel with some extra settings.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8534\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image15.png\" alt=\"Extra carousel settings\" width=\"249\" height=\"298\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can choose the width and height of the slider, but also set up effects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are also some custom themes that you can choose from.<img loading=\"lazy\" class=\"aligncenter wp-image-8522\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image3-1.png\" alt=\"Custom gallery themes\" width=\"1200\" height=\"518\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the advanced settings, you can tick an option if you want your slideshow to behave like a carousel.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here you can play with hovering effects, autoplay, CSS classes, alignment, and more.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the right, there\u2019s also a section named \u201cHow to use\u201d.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8529\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image10.png\" alt=\"WordPress Carousel shortcode\" width=\"371\" height=\"294\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here you will find a tiny piece of code (aka shortcode) that you can copy and place inside any post or page you want. This is how you can go live with your WordPress carousel. It\u2019s that easy!<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to create WordPress carousels using Gutenberg blocks<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s say you are using the Default WordPress Editor (aka Gutenberg). It looks like below. For every element that you want to insert on your page, you will need a block: heading, paragraph, image, table, quote, etc. You can do this from the \u201c+\u201d sign in the upper-left corner.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-8536 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image17.png\" alt=\"Adding a Gutenberg block\" width=\"1132\" height=\"501\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-8525\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image6.png\" alt=\"Default Gutenberg blocks\" width=\"409\" height=\"686\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now, there are no carousel or slider blocks available. Right now, the only default block is for galleries. But, you can add such blocks with the help of\u2026.WordPress plugins.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I\u2019ve already mentioned in the previous chapter that some of the plugins there are Gutenberg-ready. This means that you can find their blocks available in the editor.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s the MetaSlider block, for example:<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8520\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image1-1.png\" alt=\"MetaSlider block\" width=\"436\" height=\"338\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you select the MetaSlider block, this is how it will look inside your page or post.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8535\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image16.png\" alt=\"MetaSlider block inside a page or post\" width=\"553\" height=\"283\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the previous chapter, I made a little demo on how to use MetaSlider to create your first WordPress carousel. After creating it, you can select it from the block. I named mine \u201cFirst Slideshow\u201d and \u201cSecond Slideshow\u201d. Not very creative, I know. And that\u2019s it!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The whole process is pretty straightforward.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, let me show you a special use of WordPress carousels: creating carousel slideshows dynamically sourced from the posts, pages, or custom post types of your website. You can use it to display product carousels as well for your WooCommerce store.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is a common practice used on blogs when you want to suggest some new content to your visitors.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And there\u2019s a cool WordPress plugin that can help you with this, and it\u2019s blocks all-in, so to speak.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Introducing <\/span><a href=\"https:\/\/motopress.com\/blog\/getwid-wordpress-blocks-post-carousel-gutenberg-block\/\"><span style=\"font-weight: 400;\">Getwid Blocks: Post Carousel Gutenberg Block<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-8542 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image23.png\" alt=\"Getwid post carousel block\" width=\"1024\" height=\"586\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how such a carousel can look like.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-8556\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/store-slider-min.gif\" alt=\"\" width=\"700\" height=\"356\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to create WordPress carousels using WordPress page builders<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">For the purpose of this exercise, we are using the multipurpose Colibri PRO WordPress theme and the Colibri page builder. Why am I using a WordPress website builder? Because it gives me drag and drop functionalities and the design experience is really seamless.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Colibri builder has built-in carousel components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, the moment you install the Colibri theme, you will be prompted with an upgrade message so that you can fully experience the theme. During the upgrade you\u2019ll install the Colibri page builder.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you will head over to a page for editing, when you\u2019ll hover over it you\u2019ll see the \u201cEdit in Colibri\u201d option. This is where all the magic will happen.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8555\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image29.png\" alt=\"Edit a WordPress page\" width=\"794\" height=\"538\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">When inside the page, go in the upper-left corner, and click on the \u201c+\u201d sign.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8538\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image19.png\" alt=\"Add a component\" width=\"783\" height=\"705\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, head over to \u201cComponents\u201d and select the \u201cCarousel\u201d option.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8543\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image24.png\" alt=\"Adding the carousel component\" width=\"786\" height=\"666\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Simply drag it to your desired location on the page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In my case, this is how it will look like:<img loading=\"lazy\" class=\"aligncenter wp-image-8539\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image20.png\" alt=\"WordPress carousel example\" width=\"1000\" height=\"425\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you select the carousel, you\u2019ll see a bunch of editing options on the left. They are split into content, style, and advanced.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-8540\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/image21.png\" alt=\"Advanced WordPress carousel editing\" width=\"350\" height=\"721\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Here you can adjust the overall carousel look, as well as each individual carousel item.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are so many possibilities here: from adding text, uploading images and videos, to arrow and dots styling, and spacing, borders, shadows.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">All you need is inspiration. The tool is pretty intuitive.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Don\u2019t forget to hit \u201cPublish\u201d when done.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">This being said, it\u2019s time to choose your weapon and create your WordPress carousel today!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, if you liked this article, and you want to learn more about how to<\/span><a href=\"https:\/\/colibriwp.com\/blog\/web-design-trends\/\"> <span style=\"font-weight: 400;\">design a WordPress website<\/span><\/a><span style=\"font-weight: 400;\">, make sure to subscribe to our<\/span><a href=\"https:\/\/www.youtube.com\/channel\/UCN3ZM-C7TJgklVfseVHamHQ\"> <span style=\"font-weight: 400;\">Youtube channel<\/span><\/a><span style=\"font-weight: 400;\"> and follow us on<\/span><a href=\"https:\/\/twitter.com\/WpColibri\"><span style=\"font-weight: 400;\"> Twitter<\/span><\/a><span style=\"font-weight: 400;\"> and<\/span><a href=\"https:\/\/www.facebook.com\/ColibriWP\"> <span style=\"font-weight: 400;\">Facebook!<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">[sibwp_form id=1]<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Carousels, sliders, galleries, people often get confused about them. And designers still seem not to agree on their definition. So, here are the definitions I feel comfortable with: A slider is any web element that rotates through. It can contain images, videos, images, and text, etc. They can be managed manually by the user, or&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":8548,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[292,290,294,291],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>All You Need to Know About WordPress Carousels<\/title>\n<meta name=\"description\" content=\"How can you create a WordPress carousel using plugins, blocks, and page builders. Demo included. Read on for more on the Colibri blog!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"All You Need to Know About WordPress Carousels\" \/>\n<meta property=\"og:description\" content=\"How can you create a WordPress carousel using plugins, blocks, and page builders. Demo included. Read on for more on the Colibri blog!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-31T07:05:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-31T08:53:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/xavi-cabrera-frbCzHFLwvU-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/xavi-cabrera-frbCzHFLwvU-unsplash.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/xavi-cabrera-frbCzHFLwvU-unsplash.jpg\",\"width\":1200,\"height\":800,\"caption\":\"WordPress carousels\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/\",\"name\":\"All You Need to Know About WordPress Carousels\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#primaryimage\"},\"datePublished\":\"2021-08-31T07:05:43+00:00\",\"dateModified\":\"2021-08-31T08:53:16+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"How can you create a WordPress carousel using plugins, blocks, and page builders. Demo included. Read on for more on the Colibri blog!\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"All You Need to Know About WordPress Carousels\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"All You Need to Know About WordPress Carousels","description":"How can you create a WordPress carousel using plugins, blocks, and page builders. Demo included. Read on for more on the Colibri blog!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/","og_locale":"en_US","og_type":"article","og_title":"All You Need to Know About WordPress Carousels","og_description":"How can you create a WordPress carousel using plugins, blocks, and page builders. Demo included. Read on for more on the Colibri blog!","og_url":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/","og_site_name":"ColibriWP Blog","article_published_time":"2021-08-31T07:05:43+00:00","article_modified_time":"2021-08-31T08:53:16+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/xavi-cabrera-frbCzHFLwvU-unsplash.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/xavi-cabrera-frbCzHFLwvU-unsplash.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/08\/xavi-cabrera-frbCzHFLwvU-unsplash.jpg","width":1200,"height":800,"caption":"WordPress carousels"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#webpage","url":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/","name":"All You Need to Know About WordPress Carousels","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#primaryimage"},"datePublished":"2021-08-31T07:05:43+00:00","dateModified":"2021-08-31T08:53:16+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"How can you create a WordPress carousel using plugins, blocks, and page builders. Demo included. Read on for more on the Colibri blog!","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/wordpress-carousels\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/wordpress-carousels\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"All You Need to Know About WordPress Carousels"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/8519"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=8519"}],"version-history":[{"count":7,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/8519\/revisions"}],"predecessor-version":[{"id":8559,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/8519\/revisions\/8559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/8548"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=8519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=8519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=8519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}