Make slides mobile or desktop only- Boundless

Solved
Highlighted
New Member
2 0 1

I got a picture on my website that works PERFECT for the mobile version as the first picture you see on the website. But on desktop the picture look horrible. How can i make images in the hero slideshow show on mobile or desktop only?

 

Thank you :)

1 Like

Success.

Hi 

Brooklyn does not support different images for mobile and desktops . But you can customize the code and get it done. Please follow the instructions below to change the code (Please make sure that you first take a backup before doing any changes. I do not take any responsibility if the code is broken, so please do not forget to take a backup first )

 

1. Open your slideshow.liquid Section, find the <style> element at the top of the file and add this  above the closing </style> tag:

.slick-initialized .hero__slide:not(.slick-slide) {    display: none;
}

2. Find this code towards the bottom of the file 

        "name": "Slide",
        "settings": [

and insert this code right below:

		  {
			"type":		"select",
			"id":		"show_on",
			"label":	"Show this slide:", 
			"default":	"Desktop Mobile",
			"options": [
				{
					"value":	"Desktop Mobile",
					"label":	"Show On Both"
				},
				{
					"value":	"Mobile",
					"label":	"Show On Mobile"
				},
				{
					"value":	"Desktop",
					"label":	"Show On Desktop"
				}
			]
		  },

3. Now find this line (replaced rest of the line with  ... ):

<div class="hero__slide slide--{{ block.id }} ...

and add {{ block.settings.show_on }} after the hero__slide:

<div class="hero__slide {{ block.settings.show_on }} slide--{{ block.id }} ...

4. Save this file and open theme.js.liquid Asset. Find this line below the "Init slick slider" comment (around line 1837?)

onAfterChange: this.afterChange

and add the following right below (first comma is important):

,      responsive: [
        {          breakpoint: 10000, settings: { slide: '.Desktop'}
        },
        {          breakpoint: 480,   settings: { slide: '.Mobile'}
        }      
      ]

Save the Asset.

Now in Theme Customizer, in the properties of the slideshow section, you will be able to change the settings for each slides. Set it whether it will be Shown on Mobile, Shown on Desktop or Shown on Both.

We are a Shopify Partner Company
Built more than 100 Shopify Stores
Connect to me on m.me/firstwire or skype at anand@firstwireapp.com
Check portfolio at https://firstwireapp.com/shopify-services/
0 Likes
New Member
20 0 0

Some error in site

0 Likes
New Member
20 0 0

 

Some error in site

 

0 Likes
New Member
20 0 0

@FirstWireApp 

Something is wrong. I try it and
2323232.png

 

when I use full screen slideshow 
33333.png

0 Likes
New Member
20 0 0

@dontwantthisseo 

That's work correctly in your shop ?

0 Likes