{"id":915,"date":"2022-08-05T14:15:25","date_gmt":"2022-08-05T14:15:25","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/05\/6448830-hostinger-website-builder-how-to-add-an-image-slideshow\/"},"modified":"2026-05-08T13:02:16","modified_gmt":"2026-05-08T13:02:16","slug":"6448830-hostinger-website-builder-how-to-add-an-image-slideshow","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6448830-hostinger-website-builder-how-to-add-an-image-slideshow\/","title":{"rendered":"Hostinger Website Builder: How to Add an Image Slideshow"},"content":{"rendered":"

While using Hostinger Website Builder<\/a><\/b>, you can add as many horizontal slideshow sections to your website as you like!<\/p>

Adding an Image Slideshow<\/h2>

Within the builder, click on the Add section<\/b> button – you can find it between any two adjoining sections:<\/p>

\"Hostinger<\/div>

From the sections’ menu, select Slideshow<\/b> and click on its thumbnail to insert a slideshow section into your page:<\/p>

\"Hostinger<\/div>

And that’s it! Now, learn how to customize the slideshow section 👇<\/p>

Managing the Slideshow Section<\/h2>

Click on the slideshow section to see all the available settings:<\/p>

\"Hostinger<\/div>

Here, you’ll find the following options:<\/p>

\n\n\n\n\n\n\n\n\n\n
\n

Edit section<\/b><\/p>\n<\/td>\n

\n
    \n
  • \n

    Style<\/b>:<\/p>\n

      \n
    • \n

      Choose the type of controls<\/b>, e.g., navigation arrows, slide buttons, or both<\/p>\n<\/li>\n

    • \n

      Set the preferred color <\/b>of the controls<\/p>\n<\/li>\n<\/ul>\n<\/li>\n

    • \n

      Settings<\/b>:<\/p>\n

        \n
      • \n

        Autoplay<\/b> slideshow<\/p>\n<\/li>\n

      • \n

        Loop <\/b>slides<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

\n

Slide<\/b><\/p>\n<\/td>\n

\n

By clicking on ‘Slide X’, it allows you to:<\/p>\n

    \n
  • \n

    Add<\/b> slides (dragging and dropping, or clicking Add images)<\/p>\n<\/li>\n

  • \n

    Sort<\/b> slides (dragging and dropping them around)<\/p>\n<\/li>\n

  • \n

    Delete<\/b> slides (by hovering over a slide, you’ll see a trash bin icon)<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

\n

Duplicate<\/b><\/p>\n<\/td>\n

\n

Duplicate the slideshow section<\/p>\n<\/td>\n<\/tr>\n

\n

Hide\/Show<\/b><\/p>\n<\/td>\n

\n

Hide or show<\/a><\/b> the slideshow section on the desktop\/mobile version of the website<\/p>\n<\/td>\n<\/tr>\n

\n

Delete<\/b><\/p>\n<\/td>\n

\n

Delete the slideshow section<\/p>\n<\/td>\n<\/tr>\n

\n

Move up\/down<\/b><\/p>\n<\/td>\n

\n

Move the slideshow section up or down<\/p>\n<\/td>\n<\/tr>\n

\n

More<\/b><\/p>\n<\/td>\n

\n

Copy<\/a><\/b> the slideshow section<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>

NOTES<\/b><\/p>