{"id":27664,"date":"2023-06-14T09:17:22","date_gmt":"2023-06-14T14:17:22","guid":{"rendered":"https:\/\/wpstackable.com\/?p=27664"},"modified":"2023-06-16T03:15:15","modified_gmt":"2023-06-16T08:15:15","slug":"introducing-new-carousel-block","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/introducing-new-carousel-block\/","title":{"rendered":"Introducing: New Carousel Block"},"content":{"rendered":"\n<p data-block-type=\"core\">When it comes to engaging and captivating website visitors, the layout and presentation of the content is as crucial as the content itself. There are now many ways to present information\u2014one of them being a carousel.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p data-block-type=\"core\">Carousels are very versatile because it can be utilized in different use cases, like storytelling, presenting a gallery, or highlighting featured content. With this in mind, Stackable brings to you our new Carousel block\u2014a dynamic and highly customizable tool to showcase content on your website through sliders and carousels.<\/p>\n\n\n\n<p data-block-type=\"core\">In this article, we will introduce you to the power-packed features of the Carousel block and what you can create with it.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">What is a Carousel or Slider?<\/h2>\n\n\n\n<p data-block-type=\"core\">A carousel, often synonymous with a slider, allows you to display multiple pieces of content (such as images, text, videos) in a rotating or sliding format. It saves space, keeps the design uncluttered, and enables the audience to interact with or consume content in an engaging manner.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Stackable\u2019s Carousel Block<\/h2>\n\n\n\n<p data-block-type=\"core\">We\u2019ve made creating carousels and sliders very effortless and easy. With the Carousel block, you don&#8217;t need any coding knowledge or separate slider plugins. Here\u2019s what makes Stackable\u2019s Carousel block a great asset for any web creator:<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" data-block-type=\"core\">What are the features of the Carousel block?<\/h3>\n\n\n\n<p data-block-type=\"core\"><strong>Customizable<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">You can add literally any block inside the Carousel block. Whether it is text, images, videos, buttons, or a combination of these elements. Simply add a block by clicking the plus button like in the video below:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-5.21.19-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">If you want to add more blocks, just select the Inner Column and click on the inserter.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-5.22.27-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong>Autoplay and Looping<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">Stackable\u2019s Carousel block has an autoplay toggle that will slide content automatically after a set interval. This is so that you can display the different slides without requiring any interaction. When the autoplay toggle is turned on, it also automatically loops the carousel so that when the carousel reaches the last slide, it loops back to the first.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-5.28.27-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">You will find this setting by navigating to Layout tab &gt; Layout Panel.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled.png\" alt=\"\" class=\"wp-image-27683\" width=\"348\" height=\"170\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled.png 696w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled-300x147.png 300w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\"><strong>Transition Effects<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">You can set what type of carousel you will be displaying on your page with the Carousel Type controls.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled-1.png\" alt=\"\" class=\"wp-image-27684\" width=\"313\" height=\"108\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled-1.png 626w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled-1-300x104.png 300w\" sizes=\"auto, (max-width: 313px) 100vw, 313px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">Here\u2019s what it looks like when the carousel is set to <strong>Slide<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-5.35.30-PM.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">And with the slide option, you can also set the carousel to show <strong>one or more slides<\/strong> at a time.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-9.17.18-PM-1.mp4-1.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">On the other hand, here is an example of a carousel with the <strong>Fade<\/strong> option selected.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-5.33.54-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong>User Control<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-13-at-12.55.43-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">You can opt to add some controls so that website visitors have the ability to manually navigate through a carousel. You can even further customize how the dots look like in the Inspector.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled-2.png\" alt=\"\" class=\"wp-image-27689\" width=\"277\" height=\"480\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled-2.png 554w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Untitled-2-173x300.png 173w\" sizes=\"auto, (max-width: 277px) 100vw, 277px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\"><strong>Responsiveness<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">The Carousel block can be made responsive to adapt to different screen sizes and devices. On smaller screens, the carousel may resize or show fewer items at once.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<p data-block-type=\"core\"><a href=\"\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">How to Create a Slider or Carousel using Stackable\u2019s Carousel Block<\/h2>\n\n\n\n<p data-block-type=\"core\">To get started, simply add the Carousel block to where you want your slider to appear. From there, you can start adding slides, customizing content, and styling the appearance and animations.<\/p>\n\n\n\n<p data-block-type=\"core\">Here\u2019s an example of a Carousel block:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-4.56.31-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">We\u2019ll teach you how easy it is to recreate this slider using the Stackable Carousel block. Below is a sample homepage for a yoga studio. We\u2019ll add a carousel as its hero section and we\u2019ll walk you through how to create it.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-1.17.52-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">First add the Carousel block. Heading over to the Layout tab &gt; Layout Panel, we\u2019ve adjusted this to have one column for now and set the Block and Content Widths to Align Full.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-1.32.49-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Moving on to the content inside the carousel, we\u2019re adding a Columns block. We\u2019ve selected the <strong>50 \/ 50<\/strong> option for this, however, in the Layout tab &gt; Layout panel, we\u2019re adjusting the widths to be <strong>40 \/ 60<\/strong> to allot space for our image. Selecting the right inner column, we\u2019ve headed to the Advanced tab &gt; Position panel and set the Right position to 100. Selecting the inner column on the left, we stayed in the Advanced tab &gt; Position panel and set the Z-index to 2 so that it will appear on top of the right column. Going further, we\u2019ve set the left position to 100.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-1.32.49-PM-1.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Now let\u2019s add content to our columns inside the first slide of the Carousel block. Inside the right inner column, we\u2019ve added the image and set the height to 600. We\u2019ve also added a beige overlay. Inside the left inner column, we\u2019re adding a heading and a button.<\/p>\n\n\n\n<p data-block-type=\"core\">For the button, we headed to the Style tab &gt; Styles panel and selected the Ghost option. We set a custom color for the text and the border. We\u2019ve also changed the font to Hind and changed the transform to Uppercase.<\/p>\n\n\n\n<p data-block-type=\"core\">Finally, we just need to change the alignment of the left inner column so it\u2019s centered vertically. Select the Inner Column block, and in the Layout tab &gt; Layout Panel, select Center for the Column Alignment.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-1.34.23-PM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Going back to the Carousel block, we navigated to the Layout tab &gt; Layout panel. For the Slides control, we made sure the Clone button was selected and changed the slide number to 3. This was done so that the new slides will clone what we\u2019ve added in the first slide. This makes it so much easier and faster to reproduce similar content.<\/p>\n\n\n\n<p data-block-type=\"core\">Now all that\u2019s left to do is to change up the content of each of the slides, such as the heading texts, button texts, and the images.<\/p>\n\n\n\n<p data-block-type=\"core\">To finish up, let\u2019s make some finishing touches for our carousel. We\u2019ll leave the Autoplay toggle turned on and the speed as it is so that our carousel plays automatically when users visit this website.<\/p>\n\n\n\n<p data-block-type=\"core\">Moving on to the Style tab, we toggled the arrows off and finally, customized the dots to make it cohesive with the rest of the website motif.<\/p>\n\n\n\n<p data-block-type=\"core\">Once that\u2019s done, save your draft (or publish) and preview how your Carousel block looks like! Wasn\u2019t that easy?<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Screen-Recording-2023-06-14-at-1.36.24-PM.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\" data-block-type=\"core\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Conclusion<\/h2>\n\n\n\n<p data-block-type=\"core\">The Carousel is a great way to showcase content on your website. Thanks to Stackable\u2019s Carousel block, you have a powerful and customizable tool for creating engaging web content. With its ease of use, versatile content options, and customizable features, it\u2019s a fantastic asset for any web designer or content creator using WordPress. Slide into an exciting new way to present your content with the Stackable Carousel block!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to engaging and captivating website visitors, the layout and presentation of the content is as crucial as the content itself. There are now many ways to present information\u2014one of them being a carousel.<\/p>\n","protected":false},"author":18,"featured_media":27842,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-27664","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-updates"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/06\/Introducing__New_Carousel_Block.jpg",2400,1248,false]},"post_excerpt_stackable_v2":"<p>When it comes to engaging and captivating website visitors, the layout and presentation of the content is as crucial as the content itself. There are now many ways to present information\u2014one of them being a carousel. Carousels are very versatile because it can be utilized in different use cases, like storytelling, presenting a gallery, or highlighting featured content. With this in mind, Stackable brings to you our new Carousel block\u2014a dynamic and highly customizable tool to showcase content on your website through sliders and carousels. In this article, we will introduce you to the power-packed features of the Carousel block&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Alexandra Yap","url":"https:\/\/wpstackable.com\/blog\/author\/alex\/"},"comments_num_v2":"20 comments","acf":[],"modified_by":"Alexandra Yap","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=27664"}],"version-history":[{"count":5,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27664\/revisions"}],"predecessor-version":[{"id":27843,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27664\/revisions\/27843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/27842"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=27664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=27664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=27664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}