Capturing Individual Slides from a Carousel

There are instances that will make you want to capture every slide of a carousel on a webpage. While this is certainly possible to achieve with Stillio, you may however run into some issues which could alter the screenshots' quality sometimes. This guide highlights some of the options that are available to obtain an optimal screenshot result when capturing a page with carousels.

You may be tempted to use variable delay times to target a specific slide, but this is unreliable because there are many factors that affect the page's load time and the final screenshot may not be the desired outcome.

Carousels come in different forms but for the sake of this guide, we will be using the one from https://example.stillio.com/carousel as an example. On that page, there are three (3) slides on the carousel. To capture each of the slides, that means adding the webpage 3 different times but with different settings for each, which we will describe shortly.

Passing query parameters

If the site you want to capture has support for query string parameters for the carousel sliders, then the URL can be added directly to your Stillio account. For example, if navigating to the webpage https://example.com/?slide=1 will show the 1st slide of the carousel on the page, that URL can be added directly to your Stillio account and the same thing goes for the other slides. If the query string option is not available on that website but you have control of the server, you may have to rope in a developer to assist with creating such parameters.

Clicking unique slide identifiers

Back to our example of https://example.stillio.com/carousel, the carousel has three buttons, each one representing the 3 slides available. On clicking a button, the corresponding slide will appear on the page and the screenshot can be captured containing that slide.

To click the button representing the slide before capturing the screenshot on Stillio, you need to know its unique identifier. You can get that by inspecting the page and pulling its value. Right-click any of the slider's buttons and click on "Inspect" from the menu that appears. On the developer tools pane, you can see that each button has a unique identifier (HTML id attribute) namely: "buttona1", "buttona2" and "buttona3".

Now that you know each button's identifier, to capture the screenshot on Stillio displaying the first slide, in the expert mode section, for the Click setting, paste the value: #buttona1 and do the same for the other slides, replacing the identifier to match the desired slide to be displayed on the page.

If you find difficulties in extracting the relevant slide identifiers, you may ask a developer to assist.