{"id":953,"date":"2025-02-10T10:21:39","date_gmt":"2025-02-10T10:21:39","guid":{"rendered":"https:\/\/themepoints.com\/testimonials\/docs\/super-testimonial\/manage-shortcode\/slider-settings\/"},"modified":"2025-04-19T12:25:32","modified_gmt":"2025-04-19T12:25:32","slug":"slider-settings","status":"publish","type":"docs","link":"https:\/\/themepoints.com\/servicebox\/docs\/service-box\/manage-shortcode\/slider-settings\/","title":{"rendered":"Slider Settings"},"content":{"rendered":"\r\n<p>The <strong>Slider Settings<\/strong> section in <strong>Service Box Pro<\/strong> allows you to control the behavior and appearance of the service box. Below is a detailed explanation of each option available.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-1192 size-full\" src=\"http:\/\/themepoints.com\/servicebox\/wp-content\/uploads\/2025\/02\/slider-setting-scaled.png\" alt=\"\" width=\"1255\" height=\"2560\" srcset=\"https:\/\/themepoints.com\/servicebox\/wp-content\/uploads\/2025\/02\/slider-setting-scaled.png 1255w, https:\/\/themepoints.com\/servicebox\/wp-content\/uploads\/2025\/02\/slider-setting-147x300.png 147w, https:\/\/themepoints.com\/servicebox\/wp-content\/uploads\/2025\/02\/slider-setting-502x1024.png 502w, https:\/\/themepoints.com\/servicebox\/wp-content\/uploads\/2025\/02\/slider-setting-768x1567.png 768w, https:\/\/themepoints.com\/servicebox\/wp-content\/uploads\/2025\/02\/slider-setting-753x1536.png 753w, https:\/\/themepoints.com\/servicebox\/wp-content\/uploads\/2025\/02\/slider-setting-1004x2048.png 1004w\" sizes=\"(max-width: 1255px) 100vw, 1255px\" \/><\/figure>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>1. Autoplay Settings<\/strong><\/h4>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">1.1 <strong>Autoplay<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Enable or disable the <strong>automatic sliding<\/strong> of the service box.<\/li>\r\n\r\n\r\n\r\n<li>Options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Yes<\/strong> \u2013 The slider will move automatically.<\/li>\r\n\r\n\r\n\r\n<li><strong>No<\/strong> \u2013 Users must manually navigate service items.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">1.2 <strong>Slide Delay<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Set the duration <strong>(in milliseconds)<\/strong> between each slide transition.<\/li>\r\n\r\n\r\n\r\n<li>Example: <strong>3000ms (3 seconds)<\/strong> for a smooth user experience.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">1.3 <strong>Stop Hover<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Pause the slider when the user hovers over service items.<\/li>\r\n\r\n\r\n\r\n<li>Options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Yes<\/strong> \u2013 The slider stops when hovered.<\/li>\r\n\r\n\r\n\r\n<li><strong>No<\/strong> \u2013 The slider continues even on hover.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">1.4 <strong>Autoplay Timeout (Seconds)<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Define the <strong>time interval before restarting<\/strong> the slider after the last transition.<\/li>\r\n<\/ul>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>2. Number of Items<\/strong><\/h4>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">2.1 <strong>Items No<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Set how many service items will be displayed per slide.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">2.2 <strong>Items for Different Devices<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Items Desktop<\/strong> \u2013 Number of service items shown on <strong>large screens<\/strong> (e.g., 1920px+).<\/li>\r\n\r\n\r\n\r\n<li><strong>Items Desktop Small<\/strong> \u2013 Number of service items shown on <strong>smaller desktops<\/strong> (e.g., 1366px+).<\/li>\r\n\r\n\r\n\r\n<li><strong>Items Mobile<\/strong> \u2013 Number of service items shown on <strong>mobile screens<\/strong> (e.g., 480px+).<\/li>\r\n<\/ul>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>3. Loop &amp; Margin<\/strong><\/h4>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">3.1 <strong>Loop<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Enable or disable infinite looping of the slider.<\/li>\r\n\r\n\r\n\r\n<li>Options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Yes<\/strong> \u2013 The slider restarts from the first slide after the last one.<\/li>\r\n\r\n\r\n\r\n<li><strong>No<\/strong> \u2013 The slider stops at the last service item.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">3.2 <strong>Margin<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Set the spacing between each service item slide.<\/li>\r\n\r\n\r\n\r\n<li>Example: <strong>10px margin<\/strong> for better spacing.<\/li>\r\n<\/ul>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>4. Navigation Controls<\/strong><\/h4>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">4.1 <strong>Navigation (Arrows)<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Enable or disable <strong>next\/previous arrows<\/strong> for manual control.<\/li>\r\n\r\n\r\n\r\n<li>Options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Yes<\/strong> \u2013 Navigation arrows will be shown.<\/li>\r\n\r\n\r\n\r\n<li><strong>No<\/strong> \u2013 Navigation arrows will be hidden.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">4.2 <strong>Navigation Align<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Choose where to position the navigation arrows.<\/li>\r\n\r\n\r\n\r\n<li>Available options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Top Left<\/strong><\/li>\r\n\r\n\r\n\r\n<li><strong>Center<\/strong><\/li>\r\n\r\n\r\n\r\n<li><strong>Top Right<\/strong><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">4.3 <strong>Navigation Style<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Select the style of navigation buttons.<\/li>\r\n\r\n\r\n\r\n<li>Available options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Default<\/strong> \u2013 Standard navigation design.<\/li>\r\n\r\n\r\n\r\n<li><strong>Round<\/strong> \u2013 Circular navigation buttons.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">4.4 <strong>Navigation Color<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Choose a <strong>color for navigation arrows<\/strong>.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">4.5 <strong>Navigation Background<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Pick a <strong>background color<\/strong> for the navigation buttons.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">4.6 <strong>Navigation Color (Hover)<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Set the <strong>hover color<\/strong> for the navigation buttons.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">4.7 <strong>Navigation Background (Hover)<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Choose the <strong>hover background color<\/strong> for the navigation buttons.<\/li>\r\n<\/ul>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>5. Pagination (Dots)<\/strong><\/h4>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">5.1 <strong>Pagination<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Enable or disable <strong>pagination dots<\/strong> below the slider.<\/li>\r\n\r\n\r\n\r\n<li>Options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Yes<\/strong> \u2013 Dots will be displayed for navigation.<\/li>\r\n\r\n\r\n\r\n<li><strong>No<\/strong> \u2013 Pagination will be hidden.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">5.2 <strong>Pagination Align<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Choose where to position the <strong>pagination dots<\/strong>.<\/li>\r\n\r\n\r\n\r\n<li>Available options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Left<\/strong><\/li>\r\n\r\n\r\n\r\n<li><strong>Center<\/strong><\/li>\r\n\r\n\r\n\r\n<li><strong>Right<\/strong><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\"><strong>5.3 Pagination Style<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Select a pagination style.<\/li>\r\n\r\n\r\n\r\n<li>Available options:\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Default<\/strong> \u2013 Standard dot style.<\/li>\r\n\r\n\r\n\r\n<li><strong>Round<\/strong> \u2013 Rounded pagination dots.<\/li>\r\n\r\n\r\n\r\n<li><strong>Star<\/strong> \u2013 Star pagination dots.<\/li>\r\n\r\n\r\n\r\n<li><strong>Line<\/strong> \u2013 Line pagination dots.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\">5.4 <strong>Pagination Background Color<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Set the <strong>background color<\/strong> of pagination dots.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h5 class=\"wp-block-heading\"><strong>5.5 Pagination Background (Active)<\/strong><\/h5>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Choose a <strong>color for the active pagination dot<\/strong>.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n","protected":false},"featured_media":0,"parent":560,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-953","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/docs\/953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/comments?post=953"}],"version-history":[{"count":4,"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/docs\/953\/revisions"}],"predecessor-version":[{"id":1201,"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/docs\/953\/revisions\/1201"}],"up":[{"embeddable":true,"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/docs\/560"}],"next":[{"title":"Shortcode","link":"https:\/\/themepoints.com\/servicebox\/docs\/service-box\/manage-shortcode\/shortcode\/","href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/docs\/562"}],"prev":[{"title":"General Settings","link":"https:\/\/themepoints.com\/servicebox\/docs\/service-box\/manage-shortcode\/general-settings\/","href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/docs\/954"}],"wp:attachment":[{"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/media?parent=953"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/themepoints.com\/servicebox\/wp-json\/wp\/v2\/doc_tag?post=953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}