Slideshow: How to show two or more images at a time
To show two or more images at the same time in your sideshow. You can make this modification.
Example with 2 slideshow images:
Example with 3 images:
Make a duplicate of your theme
Do not skip this step, it's required.
From the Assets folder, open theme.js:
(If you're using an older version of Pipeline, use shop.js.liquid)
In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:
Once you find the correct block of code, you'll be adding a comma at the end of this line and then adding some new code below:
IMPORTANT: Be sure to add a comma at the end of the dots: false line:
Create a couple new lines after you've added the comma and then copy/paste the code from this link, add the code below in the new line area:
Code snippet to use - Add below the dots: false, line:
OPTION 1 - Two images at a time:
OPTION B: Three images at a time:
Example of new code added:
Verify you added the comma to the end of dots: false, line.
Save the file:
NOTE: Tablets and mobile will show one slideshow slide at a time, that can be adjusted in the breakpoint settings.
Here's an example of using the slideshow on a standard page, showing only 4 slides. There's no scrolling so the slides look like image blocks:
Another example, 4 images used with a custom collection template. The slideshow added on top like a filmstrip, no action buttons or text:
NOTE: The only restriction is the code change applies to all slideshow modules. If you have multiple slideshows, they will all display the same number of slides.