--- title: How to Show Google Drive Images in a Slider Carousel description: "Do you want to show your best photos from Google Drive as a smooth, swipeable slider on your website? You can easily do this with **DriveHub**. The **Slider Carousel** module shows your images one at a time with arrows and…" url: "https://sovlix.com/docs/how-to-show-google-drive-images-in-a-slider-carousel/" updated: "2026-10-07" category: DriveHub / Modules --- # How to Show Google Drive Images in a Slider Carousel Do you want to show your best photos from Google Drive as a smooth, swipeable slider on your website? You can easily do this with **DriveHub**. The **Slider Carousel** module shows your images one at a time with arrows and dots, which makes it perfect for a homepage banner, a portfolio or a short photo story. Your images stay in Google Drive, so new photos you add to the folder join the slider on their own. **Note:** This needs DriveHub Pro. Here is an easy, step-by-step guide to help you set it all up! ## Step 1: Install DriveHub and Connect Google Drive First, make sure DriveHub and DriveHub Pro are installed and your Google account is connected: - From your WordPress admin, click on **Plugins** > **Add New**. - Search for **DriveHub**, click **Install** and then **Activate**. - Install and activate **DriveHub Pro** as well. Our guide on [how to install and activate DriveHub Pro](https://sovlix.com/docs/how-to-install-and-activate-drivehub-pro/) shows each step. - Follow the setup screen to add your Google account. [![Search for DriveHub in Add Plugins, then click Install Now and Activate](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-00-install-drivehub.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-00-install-drivehub.webp) Read our [step by step setup guide](https://sovlix.com/docs/drivehub-manual-google-drive-connection-setup-guide/) to avoid any confusion. ## Step 2: Create a Slider Carousel Module The next step is to create a module for your slider: - Go to **DriveHub** > **Modules**. - Click on **Add module**. - In the **Select module type** window, click on **Slider Carousel** under **Display files**. [![Choosing Slider Carousel in the Select module type window](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-01-select-slider.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-01-select-slider.webp) - Click on the name at the top of the editor and give your slider a name, for example **Wildlife Slider**. [![Naming the slider module](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-02-name-slider.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-02-name-slider.webp) New to modules? Our guide on [how to create your first DriveHub module](https://sovlix.com/docs/how-to-create-your-first-drivehub-module-and-add-it-to-a-page/) walks through the editor in more detail. ## Step 3: Choose Your Images (Source Tab) In this step, you pick the Google Drive folder that holds your images: - Stay on the **Source** step (it opens first). - Scroll down to **Your Drive** and find your photo folder, for example **Wildlife Collection** or **Team Photos**. You can type the name in the search box. - Hover over the folder and tick the box in its top left corner. - The green panel on the right now shows **(1) Items Selected** with your folder. [![Selecting the Wildlife Collection folder in the Source step](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-03-source-folder-1.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-03-source-folder-1.webp) You can tick more than one folder, or pick single images one by one. Above the browser you'll also find a few extra switches: - **All Folders & Files:** Uses all the folders and files of your linked Google Drive accounts. Leave it off to show only what you tick. - **Use Private Files:** Shows each logged-in user the images in their own private folder. Our guide on [how to give each user a private Google Drive folder](https://sovlix.com/docs/how-to-give-each-user-a-private-google-drive-folder/) explains this. - **Use ACF field Files:** Takes the images from an ACF field on the page where the slider is placed. Type the field name in the box that appears. - **Merge Selected Folder Files:** Puts the images from all the folders you ticked together in one slider. Turn on **Include Subfolder Files** to add images from their subfolders too. The slider only shows image files, so it's fine to choose a folder that also holds documents or videos. ## Step 4: Choose Which Images Show (Filter Tab) Here, you can decide which images make it into your slider: - Click on **Filter** on the left. - **Allowed Extensions:** Switch **Allow all** off, then type the file types you want, like `jpg, png`, and click **Add**. While **Allow all** is on, every image type shows. - **Allowed Names:** Switch its **Allow all** off, then type file names to show only those. You can use wildcards, for example `fox*` shows every image that starts with "fox". Use **Apply to** to choose whether the name filter checks **Files**, **Folders** or both. - **Maximum Item Count:** Type the most slides you want, for example `10`. Leave it empty to show all of them. [![Maximum Item Count set to 10 in the Filter step](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-04-filter-slider.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-04-filter-slider.webp) **Tip:** A slider feels best with 5 to 15 images. Use **Maximum Item Count** to keep a big folder short. ## Step 5: Set the Slider Width (Advanced Tab) - Click on **Advanced** on the left. - Under **Module Container**, set a **Width** (like `100%` or `1000px`). Leave it empty to let the slider fill the width of your page. [![The Module Container settings in the Advanced step](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-05-advanced-container.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-05-advanced-container.webp) The height follows the **Aspect Ratio** you pick in the next step, so every slide keeps the same neat shape. ## Step 6: Choose How the Slider Looks and Moves (Advanced Tab) Still on the **Advanced** step, scroll down to style your slider: - **Slides per View:** how many images show side by side, from **1** to **4**. - **Aspect Ratio:** the shape of each slide: **16/9**, **4/3**, **1/1** (square) or **21/9** (extra wide). Images are cropped to fill the shape. - **Show Captions:** shows the image name over the bottom of each slide. - **Arrows:** the previous and next buttons on the sides. - **Dots:** one small dot per slide along the bottom, for up to 20 slides. - **Autoplay:** turn this on to move to the next slide on a timer. Then set the **Interval (seconds)**, for example `3`, and keep **Pause on Hover** on so the slider stops while a visitor's pointer is over it. [![The Slides and Autoplay cards in the Advanced step](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-10-advanced-slides.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-10-advanced-slides.webp) ## Step 7: Choose Who Can See It (Permissions Tab) Here, you can decide who gets to see your slider: - Click on **Permissions** on the left. - Scroll down and turn on **Password Protection** if you want to keep the slider private, then type a password. - Under **Visibility**, use **Display For** to show the slider to **Everyone** or only to people who are **Logged In** to your website. [![Password Protection and Display For in the Permissions step](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-06-permissions-visibility.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-06-permissions-visibility.webp) The slider has no preview or download buttons, so you won't find those cards on this tab. You can leave **Usage Limits** off too. Don't forget to click the **Save module** button at the top right when you are finished! (On a module you have saved before, this button says **Save changes**.) [![The Save module button in the module editor](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-07-save-module.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-07-save-module.webp) ## Step 8: Publish the Slider Once you're happy with all the settings, put the slider on a page: - Click on **Embed** at the top right. - Click on **Copy shortcode** and paste it into any page or post, or hover over **Add to a page** to let DriveHub add it for you. - Publish the page. You can also add the slider with the [block editor](https://sovlix.com/docs/how-to-add-google-drive-files-with-the-block-editor-gutenberg/) or the [Classic Editor](https://sovlix.com/docs/how-to-add-google-drive-files-in-the-classic-editor/). Now open your page. Your images show up as a clean, full-width slider: [![The Google Drive slider carousel on the front end](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-08-front-end-slider.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-08-front-end-slider.webp) Visitors can click the arrows, click a dot to jump to a slide, or use the left and right arrow keys. The small counter in the top right corner shows which image they are on. With **Slides per View** set to **3** and **Show Captions** on, the same folder looks like this: [![The slider showing three images side by side with captions](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-11-front-end-three-slides.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-11-front-end-three-slides.webp) On a phone, the slider fits itself to the smaller screen, and visitors can swipe left or right to move between slides: [![The slider carousel on a phone](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-09-front-end-phone.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-slider-carousel-09-front-end-phone.webp) ## Benefits of Using DriveHub for Your Slider - **Save WordPress storage:** Your images stay in Google Drive, not in your Media Library. - **Always up to date:** Add photos to the Drive folder and the slider shows them. - **Easy to browse:** Arrows, dots and keyboard keys on every slide. - **Keep it private when you need to:** Protect a slider with a password or show it to logged-in users only. With **DriveHub**, turning a Google Drive folder into a beautiful slider takes just a few minutes. **Related guides:** - [How to Add a Google Drive File Browser to Your Website](https://sovlix.com/docs/how-to-add-a-google-drive-file-browser-to-your-website/) - [How to Let Visitors Upload Files to Google Drive](https://sovlix.com/docs/how-to-let-visitors-upload-files-to-google-drive/) - [How to Play Google Drive Videos and Audio on Your Website](https://sovlix.com/docs/how-to-play-google-drive-videos-and-audio-on-your-website/) - [How to Add a Google Drive Search Box to Your Website](https://sovlix.com/docs/how-to-add-a-google-drive-search-box-to-your-website/) - [How to Let Clients Review and Approve Photos (File Proofing)](https://sovlix.com/docs/how-to-let-clients-review-and-approve-photos-file-proofing/)