Different slideshow images for mobile and desktop

[Annabelm18]

i want to have a slideshow with images for mobile and a different set of image for desktop. Please help. I’m using the dawn theme

[Weaverse]

Hi,

If you want to create two different versions of a slideshow for mobile and desktop devices using native JavaScript, you can follow these steps:

• Add two separate sections to your theme, one for the mobile version and one for the desktop version. 
• Add the slideshow images to each section, using the appropriate markup for each version.
• Add a script to your theme that detects the device type and hides the appropriate slideshow section. Here's an example code snippet:

// Get the width of the window
var windowWidth = window.innerWidth;

// Get the mobile and desktop slideshow sections
var mobileSlideshow = document.querySelector('.mobile-slideshow');
var desktopSlideshow = document.querySelector('.desktop-slideshow');

// Hide the appropriate slideshow section based on device type
if (windowWidth <= 767) {
  desktopSlideshow.style.display = 'none';
} else {
  mobileSlideshow.style.display = 'none';
}

This code uses the window.innerWidth property to get the width of the window, and then selects the appropriate slideshow sections based on their class names. It then hides the appropriate section using the style.display property.

While using native JavaScript can be a powerful way to create custom functionality, it can also be time-consuming and challenging if you don't have much coding experience. If you're looking for a more user-friendly solution, I would recommend using a Shopify app like Weaverse Section Builder, as it provides an easy-to-use interface for creating custom sections and allows you to create different versions of your slideshow for each device type.

I hope this helps!

[Annabelm18]

Thanks this sounds very complicated. Is there no code that I can paste into the edit code section? 

[kgbfashionista]

You can try adding css code when you Customize your theme.

Go to Online Store -> Themes -> Customize.

Create two slideshow sections, one for mobile and one for desktop.

Now, add this code to the desktop one:

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

And this code to the mobile slideshow:

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

The slideshow-wrapper class might be called somehow different in your theme, this name is based on my theme. If nothing changes, send me a link to your website and I will tell you how it is called for you.

[kgbfashionista]

Sorry, just noticed Shopify won`t allow to add @media rules to the Customization. You can paste both of the code bits to the Online Store -> Themes -> Edit Code -> theme.css (or theme.scss) file

[kgbfashionista]

Forgot to mention another thing... I will summarise it all into one message.

Go to Online Store -> Themes -> Edit Code -> find the theme.css file

Leave it open for now. Go to your website, right click on the slideshow and click on Inspect. Now, in all that bit of code you will need to find div id for your first slideshow section. Look for <div class="slideshow-wrapper">. When found, the div we need will be right after that, called like <div id="Slideshow-318c42f2-b5f1-4d6c-959b-65c3c71b0b7a" class="..." ... >

Now, we need this id Slideshow-318c42f2-b5f1-4d6c-959b-65c3c71b0b7a

Go back to your theme.css file and paste this code for desktop (change the slideshow id to yours):

@media only screen and (max-width: 768px) {
#Slideshow-318c42f2-b5f1-4d6c-959b-65c3c71b0b7a{
display: none;
}

Find the id of the other slideshow and paste this code for desktop (change slideshow id to yours):

@media only screen and (min-width: 769px) {
#Slideshow-318c42f2-b5f1-4d6c-959b-65c3c71b0b7a{
display: none;
}

Save.

Let me know if this helps.

[gr_trading]

Hi @Annabelm18 ,

Please refer to the below video to implement the same.

Hope this will help...