Slideshow: Custom mobile only and desktop only slideshows

If you'd like to use a custom slideshow for mobile only while maintaining a different one for desktop, use this customization. 

Example mobile only slideshow:

Section height is set to Image height which shows the whole image and no text was used, only a button to keep the area clean. 

Example tablet/desktop only slideshow:

Section height is set to full screen, extra text was added as there's more space to display. Different images used. 

Since these are separate slideshows, any or all the settings can be different. You can even use custom images which work better for desktop or mobile. 

1

Create new section files

From Theme actions, choose Edit code:

PART 1

In the Sections folder, choose Create new section:

Call the file:

index-slideshow-mobile

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code from this file (click link to view the code):

MOBILE OPTION 1

Pipeline 5.2 and higher:
Click to view mobile code

MOBILE OPTION 2

Pipeline 5.0 to 5.1:
Click to view mobile code

MOBILE OPTION 3

Earlier versions of Pipeline:
Click to view mobile code

Save the file:

PART 2

Next, create a second section file:

In the Sections folder, choose Create new section:

Call the file:

index-slideshow-desktop

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code from this file (click link to view the code):

DESKTOP OPTION 1

Pipeline 5.2 and higher:
Click to view desktop code

DESKTOP OPTION 2

Pipeline 5.0 to 5.1:
Click to view desktop code

DESKTOP OPTION 3

Earlier versions of Pipeline:
Click to view desktop code

Save the file:

2

Add hide/show CSS

Use this link to learn where exactly to add this next code snippet:

Where to add your CSS style code

Add the following code to the very bottom of the file on a new line:

/* -- code to hide and show mobile and desktop slideshow -- */
@media screen and (max-width: 480px) {
  .slideshow-desktop {
    display: none;
  }
}
@media screen and (min-width: 481px) {
  .slideshow-mobile {
    display: none;
  }
}
/* - end - */

Save the file:

3

Use the Theme Editor to add and configure the new sections

Open your theme editor (Customize theme).

Example for live theme:

Next in the sections tab - Add 2 new sections:

Add the new sections:

Add the new desktop and mobile slideshows:

The original slideshow is still available but won't be hidden on mobile. You can use that one if you need the same content and settings for both mobile and desktop. After adding the two new slideshows, you can customize each one individually. 

I would recommend the Section height to be Image height for the mobile version if you need to show the entire image.

Use the Theme Editor's mobile/desktop icons to preview the two different slideshows.

Mobile:

Desktop:

Note:
The main slideshow section will still show on both desktop and mobile. If you use the above individual sections, be sure to remove or hide the standard slideshow so it's not showing as well. Only use these two new sections if you don't want duplicate slideshows displaying.