{"id":2068,"date":"2026-10-14T04:37:46","date_gmt":"2026-10-14T04:37:46","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&#038;p=2068"},"modified":"2026-10-17T03:48:23","modified_gmt":"2026-10-17T03:48:23","password":"","slug":"slider","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/slider\/","title":{"rendered":"Slider"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Slider Block lets you display multiple images in an interactive slider. You can manage slides, configure autoplay and looping, control the number of visible slides, adjust image dimensions and spacing, and customize navigation arrows, pagination dots, and image overlays.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Slider Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add the Slider Block to your page or post.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Slider Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open the page or post where you want to add the Slider Block.<\/li>\n\n\n\n<li>Click the <strong>+ (Add Block)<\/strong> button.<\/li>\n\n\n\n<li>Search for <strong>Slider<\/strong> in the block search field.<\/li>\n\n\n\n<li>Select the <strong>Slider<\/strong> block from the ShapeBlock category.<\/li>\n\n\n\n<li>The block will be added to your editor.<\/li>\n\n\n\n<li>Select the block to access its customization options in the sidebar.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1621\" height=\"511\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-68.png\" alt=\"\" class=\"wp-image-2332\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-68.png 1621w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-68-300x95.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-68-768x242.png 768w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-68-1024x323.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-68-1536x484.png 1536w\" sizes=\"auto, (max-width: 1621px) 100vw, 1621px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Slider Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Slider Block includes four tabs for customization:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Add and manage images, configure playback behavior, and enable navigation arrows or dots.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Adjust the number of visible slides, spacing, slide height, and image fit.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize slide corners, image overlays, navigation arrows, and pagination dots.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Adjust spacing and background settings for the entire block.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the following panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Images<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image Items:<\/strong> Manage the images displayed in the slider. Each item includes the following options:\n<ul class=\"wp-block-list\">\n<li><strong>Select Image:<\/strong> Choose an image from the WordPress Media Library.<\/li>\n\n\n\n<li><strong>Replace Image:<\/strong> Replace the selected image with another image.<\/li>\n\n\n\n<li><strong>Move Up:<\/strong> Move the image one position earlier in the slider.<\/li>\n\n\n\n<li><strong>Move Down:<\/strong> Move the image one position later in the slider.<\/li>\n\n\n\n<li><strong>Duplicate:<\/strong> Create a copy of the image item.<\/li>\n\n\n\n<li><strong>Remove:<\/strong> Remove the image item from the slider.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Add Images:<\/strong> Select multiple images from the Media Library and add them to the slider.<\/li>\n\n\n\n<li><strong>Add Empty Slide:<\/strong> Add an empty slide that you can fill with an image later.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Playback<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Loop:<\/strong> Enable or disable continuous looping when the slider reaches the end.<\/li>\n\n\n\n<li><strong>Autoplay:<\/strong> Automatically advance the slides.<\/li>\n\n\n\n<li><strong>Autoplay Delay (ms):<\/strong> Set the delay between automatic slide changes. This option appears when Autoplay is enabled.<\/li>\n\n\n\n<li><strong>Pause on hover:<\/strong> Pause autoplay while visitors hover over the slider. This option appears when Autoplay is enabled.<\/li>\n\n\n\n<li><strong>Transition Speed (ms):<\/strong> Set the duration of the slide transition in milliseconds.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Navigation<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show Arrows:<\/strong> Display previous and next arrows to let visitors navigate between slides.<\/li>\n\n\n\n<li><strong>Show Dots:<\/strong> Display pagination dots to indicate the slides and allow visitors to navigate between them.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1548\" height=\"769\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-69.png\" alt=\"\" class=\"wp-image-2333\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-69.png 1548w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-69-300x149.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-69-767x381.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-69-1024x509.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-69-1536x763.png 1536w\" sizes=\"auto, (max-width: 1548px) 100vw, 1548px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Layout tab contains the following panel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Layout<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Slides Per View:<\/strong> Set how many slides are visible at the same time. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n<li><strong>Space Between (px):<\/strong> Set the gap between slides. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n<li><strong>Slide Height (px):<\/strong> Set the height of the slides. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n<li><strong>Image Fit:<\/strong> Choose how images fit inside the slide area.\n<ul class=\"wp-block-list\">\n<li><strong>Cover:<\/strong> Fill the slide area while cropping the image when necessary.<\/li>\n\n\n\n<li><strong>Contain:<\/strong> Display the entire image within the slide area.<\/li>\n\n\n\n<li><strong>Fill:<\/strong> Stretch the image to fill the slide area.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1547\" height=\"529\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-70.png\" alt=\"\" class=\"wp-image-2334\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-70.png 1547w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-70-300x103.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-70-766x262.png 766w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-70-1024x350.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-70-1536x525.png 1536w\" sizes=\"auto, (max-width: 1547px) 100vw, 1547px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains panels for customizing the slides and navigation elements. The Arrows and Dots panels appear only when their corresponding options are enabled in the Settings tab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Slide<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Border Radius:<\/strong> Adjust the corner radius of the slides.<\/li>\n\n\n\n<li><strong>Image Overlay:<\/strong> Set an overlay color or gradient over the slide images.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Arrows<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when <strong>Show Arrows<\/strong> is enabled in the Settings tab.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icon Color:<\/strong> Customize the color of the navigation arrow icons.<\/li>\n\n\n\n<li><strong>Background:<\/strong> Set a background color or gradient for the arrows.<\/li>\n\n\n\n<li><strong>Size (px):<\/strong> Set the size of the navigation arrows. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Adjust the corner radius of the arrow backgrounds.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Dots<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when <strong>Show Dots<\/strong> is enabled in the Settings tab.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color:<\/strong> Set the color of the pagination dots. A color or gradient can be selected.<\/li>\n\n\n\n<li><strong>Active Color:<\/strong> Set the color or gradient for the active pagination dot.<\/li>\n\n\n\n<li><strong>Size (px):<\/strong> Set the size of the pagination dots.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1558\" height=\"564\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-71.png\" alt=\"\" class=\"wp-image-2335\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-71.png 1558w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-71-300x109.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-71-768x278.png 768w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-71-1024x371.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-71-1536x556.png 1536w\" sizes=\"auto, (max-width: 1558px) 100vw, 1558px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab contains settings that apply to the entire Slider Block, not to individual slides.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Adjust the inner spacing around the entire block. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Adjust the outer spacing around the entire block. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set a background color or gradient for the entire block.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Slider Block lets you display multiple images in an interactive slider. You can manage slides, configure autoplay and looping, control the number of visible slides, adjust image dimensions and spacing, and customize navigation arrows, pagination dots, and image overlays. How to Add a Slider Block Follow these steps to add the Slider Block to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[17],"doc_tag":[],"class_list":["post-2068","docs","type-docs","status-publish","hentry","doc_category-media-block"],"year_month":"2026-10","word_count":727,"total_views":"7","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Media Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/media-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2068"}],"version-history":[{"count":2,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2068\/revisions"}],"predecessor-version":[{"id":2337,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2068\/revisions\/2337"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2068"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2068"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}