Create a seperate slideshow for mobile.

[jakethagun]

Hi all, I want to have a seperate slideshow for mobile so I can have it full width and a completely different size. 

website https://7e769e-70.myshopify.com/

password jake 

[Dan-From-Ryviu]

Hi @jakethagun 

You can create 2 slideshow sections and add code following this

Add this code in Custom CSS of the section you want to use for mobile so it will be hide on desktop

@media (min-width: 768px) {
.slideshow { display: none; }
}

Add this code to Custom CSS of desktop slideshow section 

@media (max-width: 767px) {
.slideshow { display: none; }
}

[jakethagun]

Thank you that worked well. How can I also hide the banner button from the other version of the slideshow? 

 This is the code im currently using which hides some elements for the dots and moves it 

@media screen and (min-width: 767px) {
.slideshow__controls {
position: absolute;
bottom: 0;
z-index: 9;
left: 50%;
transform: translateX(-50%);
border: none;
}
}

[Dan-From-Ryviu]

Could you explain your request a little more? 

[jakethagun]

The Pagination style dots from the PC slideshow is showing up on the mobile slideshow. Same with the mobile slideshow Pagination style dots are showing up on the PC slideshow. Is there anyway I can disable them?

The script I posted above is a current script I have on the slideshow on the dots to move them and delete extra elements.

[Dan-From-Ryviu · Accepted solution]

Please update the code 

Mobile slideshow

@media (min-width: 768px) {
slideshow-component { display: none; }
}

Desktop slideshow

@media (max-width: 767px) {
slideshow-component { display: none; } { display: none; }
}