--- title: Slider Style description: On this page, edit the settings for the slider (carousel) on the homepage of your website. The slider consists of two or more slides. There are several… --- [Skip to content](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/86573372#main-content) English Show submenu for translations [![punchmark-logo-horizontal-white](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/punchmark-logo-horizontal-white.png?width=225&height=38&name=punchmark-logo-horizontal-white.png)](https://academy.punchmark.com/knowledge?hsLang=en) - [Website](https://www.punchmark.com/) - [News](https://www.punchmark.com/news) - [Support](https://www.punchmark.com/contact-support) - [In the Loupe](https://www.punchmark.com/loupe) Open main navigation Close main navigation - [Website](https://www.punchmark.com/) - [News](https://www.punchmark.com/news) - [Support](https://www.punchmark.com/contact-support) - [In the Loupe](https://www.punchmark.com/loupe) - English Show submenu for translations - Go to punchmark.com Go to punchmark.com Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Punchmark Knowledge Base](https://help.punchmark.com/knowledgebase?hsLang=en) 2. [hidden WIP](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en) 3. [Design](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en#design) # Slider Style On this page, edit the settings for the slider (carousel) on the homepage of your website. The slider consists of two or more slides. There are several groups of settings: Remember to click the **Save** button to commit your changes. Click the **Reset** button to return to the default settings. Upload the slides in **Content \> Home Slides** ## Homepage Slider Settings These are the general settings for the homepage slider: - **Transitions**: Select the drop-down to choose the type of transition. - **Autoplay**: Select the toggle “On” to have the slider automatically rotate through the slides. - **Play mode**: Select the drop-down to choose the play mode. - **Shuffle**: Leave the toggle “Off” to have the slider transition sequentially through the sliders. Click the toggle “On” to have the slider randomly transition to the next slide. - **Slide duration**: Use the **-** and **+** buttons to specify the number of seconds that each slide will remain on the screen before the next transition. - **Animation speed**: Use the **-** and **+** buttons to specify the delay (in milliseconds) for the transition to the next slide. ## Homepage Slider Styling These are the style settings for the homepage slider: ### Slider Layout - **Background type**: Select the drop-down and choose a light, dark, or other type of background. - **Background color**: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field. ### Slider Size - **Border Width**: Use the **-** and **+** buttons to adjust the width of the button border. - **Border Color**: Select the drop-down and then use the color picker to choose a specific color for this block. You can also enter the hex color code into this field. - **Box shadow**: Choose the type of shadow for this block. ### Slider Padding In **Mobile size**, click on a screen type. Then, use the **-** and **+** buttons to specify the **Slider** **Width** and the **Slider Height**. ### Slider Border - **Border Width**: Use the **-** and **+** buttons to adjust the width of the slider border. - **Border Color**: Select the drop-down and then use the color picker to choose a specific border color. You can also enter the hex color code into this field. ### Slider Container Background **Background color**: Select the drop-down and then use the color picker to choose a specific background for the container. You can also enter the hex color code into this field. ### Slider Container Padding In **Mobile padding**, click on a screen type. Then, use the **-** and **+** buttons to specify the padding width for the **Top & Bottom** and the **Left & Right**. ### Slider Full-Screen Offset Enter a percentage/proportion value for the amount of offset that you want for the slider in full-screen mode. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/86573462-cbbbfff4b0.png) ## Homepage Slider Arrows These are the settings for the left and right navigation arrows on each end of the slider. Click the toggle to “ON” to enable the slider navigation arrows, and then make changes to the settings below. ### Slider Arrow Background **Background type**: Select the drop-down and choose a light, dark, or other type of background. ### Slider Arrow Style - **Arrow style**: Select the drop-down and choose an arrow style. - **Arrow color**: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field. ### Slider Arrow Visibility **Left toolbar** — click the drop-down and choose the device visibility for the navigation arrows. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/86573501-2330a89945.png) ## Homepage Slider Dots These are the settings for the clickable dots that provide the other method for navigating in the slider. Click the toggle to “On” to enable the slider navigation dots, and then make changes to the settings below. ### Slider Dots Background - **Background type**: Select the drop-down and choose a light, dark, or other type of background. - **Background color**: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field. - Click the **Choose File** button and locate the file containing the image that you want to use for the dots background. ### Slider Dots Style - **Dots style**: Select the drop-down and choose a style for the dots. - **Dots color**: Select the drop-down and then use the color picker to choose a specific color for the dots. You can also enter the hex color code into this field. ### Slider Arrow Visibility **Left toolbar**: Select the drop-down and choose the device visibility for the dots. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/86573479-24179bf6d9.png) - [Default HubSpot Blog](https://blog.punchmark.com/blog) [![pm-symbol-blue](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/pm-symbol-blue.png?width=40&height=45&name=pm-symbol-blue.png "pm-symbol-blue")](https://academy.punchmark.com/knowledge?hsLang=en) Punchmark Resource Center Copyright © 2026, Punchmark