Capturing Individual Slides from a Carousel
Want to capture every slide of a carousel on a webpage? Stillio can do that, but carousels can be tricky and sometimes affect the quality of your screenshots. This guide shows the options that give you the best result.
It's tempting to use delays to target a specific slide, but that's unreliable: many factors affect a page's load time, so you may not get the slide you wanted.
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, open the webpage in Stillio, go to the Advanced settings tab and type #buttona1 in the Click field. Press Enter to confirm. Do the same for the other slides, swapping in the identifier of the slide you want to capture. (Want to know more? See Use Expert mode for advanced options.)
Can't find the slide identifiers? A developer can help you out.