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. 

Difficulty: Intermediate. Requires you to modify the theme Javascript file. Commenting out Javascript code in the correct position. Having a backup is required as this code change can break your theme easily with the slightest of errors. 

Example with 2 slideshow images:

Example with 3 images:

How to:

1

Make a duplicate of your theme

Do not skip this step, it's required.

2

Change your Javascript file - theme.js

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:

this.$slideshow.slick

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:

dots: false,

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:

Click to view code

OR

OPTION B: Three images at a time:

Click to view code

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. 

Custom examples

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.