{"id":2640,"date":"2024-04-09T07:20:20","date_gmt":"2024-04-09T07:20:20","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=2640"},"modified":"2024-04-10T08:01:24","modified_gmt":"2024-04-10T08:01:24","slug":"slider","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/slider\/","title":{"rendered":"Slider"},"content":{"rendered":"\n

The Slider Block allows displaying the content in the slider on the site page and posts. Moroever, the block provides options to select content to display in the slider, as well as settings to customize the slider\u2019s appearance and behavior, such as autoplay, navigation arrows, etc.<\/p>\n\n\n\n

\"Adding
Adding Slider Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Slider Block, you\u2019ll get a block editing panel on the right-hand side. It has three options: General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

General<\/h3>\n\n\n\n
    \n
  • Per Page<\/strong> – It determines the number of slides displayed on a page.<\/li>\n\n\n\n
  • Per Move<\/strong> – It determines the number of slides the slider will move each time the navigation controls (like arrows or dots) are clicked.<\/li>\n\n\n\n
  • Speed <\/strong>– It determines the speed of the slider on rotation.<\/li>\n\n\n\n
  • Interval<\/strong> – It determines how long each slide is displayed before the slider moves to the next slide automatically.<\/li>\n\n\n\n
  • Loop<\/strong> – Loop in slider refers to a slider’s ability to repeat itself continuously. Once the option is enabled, the slider plays from start to finish and then starts again from the beginning, creating a repetitive motion.<\/li>\n\n\n\n
  • Autoplay<\/strong> – It slides the slider automatically without the need for any external actions.<\/li>\n\n\n\n
  • Pause on Hover<\/strong> – It stops\/pauses the slider while hovering on it.<\/li>\n\n\n\n
  • Arrows<\/strong> – Enabling the arrow displays the icons (left and right) that help manually move the slider forward and backward.<\/li>\n\n\n\n
  • Pagination<\/strong> – It adds dot icons to the slider area that indicate the current slide position and number of total slides in the slider.<\/li>\n<\/ul>\n\n\n\n
    \"General
    General Slider Setting<\/figcaption><\/figure>\n\n\n\n

    Spacing & Height <\/h3>\n\n\n\n
      \n
    • Height<\/strong> – It determines the height of the slider.<\/li>\n<\/ul>\n\n\n\n
      \"Manage
      Manage Slider Height<\/figcaption><\/figure>\n\n\n\n

      Arrows and Dots <\/h3>\n\n\n\n
        \n
      • Size <\/strong>\u2013 It determines the size of the arrow icon. <\/li>\n<\/ul>\n\n\n\n
        \"Set
        Set Arrow Size<\/figcaption><\/figure>\n\n\n\n
          \n
        • Arrow Distance from Edges<\/strong> – It determines the distance between the arrow icon and the slider image.<\/li>\n<\/ul>\n\n\n\n
          \"Set
          Set Arrow Distance From Edge<\/figcaption><\/figure>\n\n\n\n

          Style<\/h2>\n\n\n\n

          Under the style settings, you\u2019ll find the following options available:<\/p>\n\n\n\n

          Arrows & Dots<\/h3>\n\n\n\n
            \n
          • Color<\/strong> – It allows you to change the color of the arrow and dots.<\/li>\n\n\n\n
          • Background<\/strong> – It sets the background color of the arrow.<\/li>\n<\/ul>\n\n\n\n
            \"Change
            Change Arrow and Dots Color<\/figcaption><\/figure>\n\n\n\n
              \n
            • Border<\/strong> – It customizes the Border area added around the arrow and comes with the following options:\n
                \n
              • Type<\/strong> \u2013 You can set the border type as Solid<\/strong>, Dotted<\/strong>, Dashed<\/strong>, Double<\/strong>, etc. Moreover, select the border type to be None<\/strong> if you do not want to add any border. When you select none, you will be given the following option:\n
                  \n
                • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                  However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                    \n
                  • Border Color<\/strong> \u2013 It allows you to choose the appropriate border color.<\/li>\n\n\n\n
                  • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                    \"Add
                    Add a Border Around Arrow<\/figcaption><\/figure>\n\n\n\n
                      \n
                    • Top Margins for Dots <\/strong>– It sets the top margin value for the dots\/pagination added to the slider.<\/li>\n<\/ul>\n\n\n\n
                      \"Set
                      Set Dots Top Margin Value<\/figcaption><\/figure>\n\n\n\n

                      Text<\/h3>\n\n\n\n
                        \n
                      • Color <\/strong>– It allows changing the text color added to the slider.<\/li>\n<\/ul>\n\n\n\n
                        \"Change
                        Change Slider Text Color<\/figcaption><\/figure>\n\n\n\n

                        Background <\/h3>\n\n\n\n
                          \n
                        • Type <\/strong>– It sets the background color of the slider.<\/li>\n<\/ul>\n\n\n\n
                          \"Change
                          Change the Background Color of the Slider<\/figcaption><\/figure>\n\n\n\n

                          Border<\/h3>\n\n\n\n

                          It customizes the Border area added around the Slider and comes with the following options:<\/p>\n\n\n\n

                            \n
                          • Type<\/strong> \u2013 You can set the border type as Solid<\/strong>, Dotted<\/strong>, Dashed<\/strong>, Double<\/strong>, etc. Moreover, select the border type to be None<\/strong> if you do not want to add any border. When you select none, you will be given the following option:\n
                              \n
                            • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners for the border.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                              However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                                \n
                              • Border Color<\/strong> \u2013 It allows you to choose the appropriate border color.<\/li>\n\n\n\n
                              • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                                \"Add
                                Add and Customize Border<\/figcaption><\/figure>\n\n\n\n

                                Advanced<\/h2>\n\n\n\n

                                The Advanced section consists of four customization options for the Slider Block.<\/p>\n\n\n\n

                                Spacing<\/h3>\n\n\n\n

                                Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                                  \n
                                • Block Margin<\/strong> \u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                                • Block Padding \u2013\u00a0<\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like\u00a0px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                  \"Manage
                                  Manage Padding and Margin Space<\/figcaption><\/figure>\n\n\n\n

                                  Z-Index<\/h3>\n\n\n\n

                                  It allows you to set the priority of the Slider block according to the site requirement.<\/p>\n\n\n\n

                                  Responsive Condition<\/h3>\n\n\n\n

                                  Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                                    \n
                                  • Hide on Desktop<\/strong> \u2013 It hides the Slider block on the Desktop.<\/li>\n\n\n\n
                                  • Hide on Tablet<\/strong> \u2013 It hides the Slider block on the Tablet.<\/li>\n\n\n\n
                                  • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Slider block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                    \"Enable\/Disable
                                    Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                                    Advanced<\/h3>\n\n\n\n

                                    Under the option, you can set the CSS ID and Classes for this particular Slider block. The available options are listed below:<\/p>\n\n\n\n

                                      \n
                                    • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                                    • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n

                                      After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n\n\n\n

                                      \"Add
                                      Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

                                      The Slider Block allows displaying the content in the slider on the site page and posts. Moroever, the block provides options to select content to display in the slider, as well as settings to customize the slider\u2019s appearance and behavior, such as autoplay, navigation arrows, etc. After you have chosen the Slider Block, you\u2019ll get[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/2640"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=2640"}],"version-history":[{"count":19,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/2640\/revisions"}],"predecessor-version":[{"id":2746,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/2640\/revisions\/2746"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=2640"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=2640"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=2640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}