Slideshow: Custom mobile only and desktop only slideshows

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

Example mobile only slideshow:

Section height is set to Image height which shows the whole image and no description or button was used, only the title to keep the area clean on mobile.

Compared with Full screen height setting where only the middle of the image is displayed due to screen size proportioning:

Example tablet/desktop only slideshow:

Different image used, section height is set to full screen, extra text and button was added as there's more space to display:

Since these are separate slideshow sections, any or all of the slides can have custom images and the settings can be different. Biggest benefit is using separate height settings for mobile and for desktop.

 How to:

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 with the code this file:

MOBILE VERSION

Click to view mobile code VERSION 1.8.2 OR BELOW

Click to view mobile code VERSION 2.0.0 OR ABOVE

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 with the code from this file:

DESKTOP VERSION

Click to view desktop code VERSION 1.8.2 OR BELOW

Click to view desktop code VERSION 2.0.0 OR ABOVE

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 for version 1.7.2 or below

For version 1.8.0 or above add your CSS code to the new theme.css file:

How to locate the theme.css file:

For version 1.7.2 or below add the following code to the very bottom of the file on a new line:

/* -- code to hide and show mobile and slideshow banners -- */
@include media-query($small) {
   .slideshow-desktop {display:none;}
}
@include media-query($medium-up) {
   .slideshow-mobile {display:none;}
}
/* - end - */

Save the file:

For Version 1.8.0 and above add this CSS code instead of the one above:

 @media only screen and (max-width: 480px){
 .slideshow-desktop {  display: none;}
 }

 @media only screen and (min-width: 481px){
 .slideshow-mobile { display: none;}
 }

3

Use the Theme Editor to add and configure the new sections

Open your theme editor (Customize theme).

Next in the sections tab - Add 2 new sections:

Add both the new desktop and mobile slideshow sections:

The original Slideshow is still available, you can use that one if you need the same content and settings for both mobile and desktop. After adding the two new slideshow sections, you can customize each one individually. 

We 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 banner sections.

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 section so it's not showing as well. Use only these two new sections to avoid duplicate slideshows displaying.