Use image slider modules

You can use the image slider module to display multiple images in the same module. You can set images to cycle through automatically, or you can support visitors manually switching between them. 

Add and edit slides in image slider modules

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of your content.
3. In the content editor, click the add Add icon in the left sidebar. 
4. Click to expand the Media category, then click the Image Slider module and drag it into position. 
5. In the left sidebar, hover over a slide and click the edit Edit icon to add an image to that slide: 
   
   • In the Image section, click Upload to select an image from your computer or Browse images to select an image from the files tool. To generate an image, click Generate with AI.
   • In the Caption field, enter a caption that'll appear below your image. To display the image without a caption, delete the default text. 
   
   • To add a link to the slide:
     • Click the Link to dropdown menu and select a link type.
     • Specify the link destination in the field that appears. Learn more about working with links in HubSpot. 
     • To keep your content open and have the link open in a new window, toggle the Open link in new window switch on. 
     • To identify the link destination as not part of your websites to search engines, select the No follow checkbox. 
   • Click Apply changes to save the changes to this slide. 
6. At the top of the sidebar editor, click Image slider to return to the module overview. 

7. To add more slides, hover over a different slide and click the edit Edit icon.
8. To finalize your changes, click Apply changes. 

Edit settings for image slider modules

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of your content.
3. In the content editor, click the image slider module. 
4. In the sidebar editor, click Settings to edit the module's settings. 
5. Click to expand the Slides section to edit slide options: 
   • In the Slides per page field, enter the number of slides that'll appear at one time in your image slider. You can display up to five slides at a time. When multiple slides at a time are selected, captions and thumbnails won't display. 
   • In the Image Sizing field, select an aspect ratio option. By default, images will appear using their uploaded aspect ratio. To standardize a single aspect ratio across images, select Force aspect ratio. This may cause some images to appear distorted. 
   • To add or remove captions from slides, select the Show captions checkbox. By default, the Show captions checkbox is selected.
   • In the Caption position dropdown menu, select the position of the captions. 

6. Click to expand the Movement section to edit slide transition options: 
   • To configure how slides transition, select a transition option (e.g., Fade).
   • To have the slides repeat when the last slide is reached, select the Loop slides checkbox. 
   • To have the slides cycle automatically, select the Autoplay checkbox. If you have fewer slides than the Slides per page setting, no cycling can occur. 
7. Click to expand the Navigation section to edit navigation options: 
   • To display arrows that allow visitors to manually switch between slides, select the Show navigation arrows checkbox. 
   • To show image thumbnails beneath the navigation, select the Show thumbnails checkbox. 
   • To display dots below the images that'll show the total number of slides and allow visitors to select a specific image, select Show dot navigation. 
8. When finished, click Apply changes. 

Edit styles for image slider modules

You can edit styles for image slider modules, including styling for the slides, navigation, and the slider.

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of your content.
3. In the content editor, click the image slider module. 
4. In the sidebar editor, click the Styles tab. 
5. To continue editing styles for the image slider module, click Slides, Navigation or Slider. 

Edit styles for slides

To edit styles for how images are displayed in slides:

1. Click Slides.
2. Click to expand the Images section.
3. Enter pixel values in the Corner radius field. The higher the value, the more rounded the corners will appear. 
4. When finished, click Apply changes.

To edit styles for how captions are displayed in slides:

1. Click Captions.
2. Click to expand the Background section. 
   • To add margins above or below your captions, enter pixel values in the Margin above and Margin below fields.
   • To add padding to your captions, enter a pixel value in the Padding field. To add separate values for each side, click Edit separately, then enter pixel values in the fields.
   • To add a background color to your captions, enter a hex value in the first field in the Color section, or click the color picker and select a color. Custom colors can be added from the Advanced tab.
   • To set a background color's transparency, enter a percentage value in the second field in the Color section. A transparency of 100% will be opaque, while a transparency of 0% won't be visible. 
3. Click to expand the Text section. 
   • To change the font type, click the Select font dropdown menu and select a font. 
   • To change the font size, click the Size dropdown menu and select a font size. 
   • To change the font color, click the color picker and select a color. Custom colors can be added from the Advanced tab.
   • To change the font weight, click the bold font weight icon for bold, italicIcon italicized, or underlineIcon underlined text.
4. When finished, click Apply changes.

Edit styles for navigation

You can edit styles for navigation, including the slider arrows, dots and autoplay button, and thumbnail navigation. The available styling options will depend on the image slider module's settings for navigation.

Slider arrows

1. Click Navigation.
2. Click to expand the Slider arrows section.
3. Enter a hex value in the Background color section. You can also click the color picker and select a color. Custom colors can be added from the Advanced tab.
4. To set the background color's transparency, enter a percentage value in the second field in the Background color section. For example, a transparency of 100% will be opaque, while a transparency of 0% won't be visible.
5. To replace the icons used for the left and right arrows, click Replace above the Left icon and Right icon fields. In the right panel, select an icon. 
6. To set the color of your left and right icons, enter a hex value in the first field in the Icon color section. You can also click the color picker and select a color. Custom colors can be added from the Advanced tab.
7. To set the icon's background color transparency, enter a percentage value in the second field in the Icon color section. For example, a transparency of 100% will be opaque, while a transparency of 0% won't be visible. 
8. When finished, click Apply changes.

Dots and autoplay button

1. Click to expand the Dots and autoplay button section.
2. Enter a hex value in the first field in the Color section, or click the color picker and select a color. Custom colors can be added from the Advanced tab.
3. When finished, click Apply changes.

Thumbnail navigation

1. Click to expand the Thumbnail navigation section.
2. To edit the background color, enter a hex value in the first field in the Arrow background color section, or click the color picker and select a color. Custom colors can be added from the Advanced tab.
3. To edit the background color transparency, enter a percentage value in the second field in the Arrow background color section. A transparency of 100% will be opaque, while a transparency of 0% won't be visible. 
4. To replace the icons used for the left and right arrows, click Replace above the Arrow left icon and Arrow right icon fields. In the right panel, select an icon.

5. To edit the color of your left and right arrow icons, enter a hex value in the first field in the Arrow icon fill color section. You can also click the color picker and select a color. Custom colors can be added from the Advanced tab.
6. To set the arrow's transparency, enter a percentage value in the second field in the Icon color section. For example, a transparency of 100% will be opaque, while a transparency of 0% won't be visible. 
7. To edit the thumbnail images ratio, width, and rounded corners:
   • Click to expand the Thumbnail images section.
   • To set the aspect ratio used for all thumbnail images, click the aspect ratio dropdown menu and select an aspect ratio. 
   • To set the width used for all thumbnail images, enter a pixel value in the Width field. 
   • To set how rounded the corners of the thumbnail images appear, enter a pixel value in the Radius field. The higher the value, the more rounded the corners will appear. 
8. When finished, click Apply changes.

Edit styles for the slider

1. Click Slider. 
2. Click to expand the Spacing section.
3. To add margins above and below the slider, enter pixel values in the Margin above and Margin below fields. 
4. To add padding to the slider, enter a pixel value in the Padding field. To add separate values for each side, click Edit separately, then enter pixel values in the fields.
5. When finished, click Apply changes.