Show/hide sliders based on screen size

You can hide your slider based on the screen size by using some custom css codes. First you should check out  what is your slider's ID. In my example it will be 37:

You can use that number to know what is the selector of your slider. In my case it is: #n2-ss-37

Then with media queries you can hide this slider under a given screen width, and show it over that. Open up a css file from your theme/template, which loads on the same page, where you will have this slider, and add this code to it with your slider's ID:

#n2-ss-37{
	display:block!important;
}
@media (max-width: 650px) {
	div #n2-ss-37{
		display:none!important;
	}
}

It will hide your slider under 650px. If you are not sure where to put this code, just insert it into the  html control with <style> and </style> tags around it:

You could even use this code to hide your current slider on smaller views, and show another one instead. This is not a very optimized option, because both of your sliders would have to load, but it is an option you have. In my example the other slider's ID will be 12:

#n2-ss-37{
	display:block!important;
}
#n2-ss-12{
	display:none!important;
}
@media (max-width: 650px) {
	div #n2-ss-37{
		display:none!important;
	}
	div #n2-ss-12{
		display:block!important;
	}
}

If real device detection would be fine for you too, to hide or show your slider, because just think about it how often do you browse on your computer with smaller browser screen (probably with this small screen never), then you could rather use the Show on devices option, which could hide/show your slider on real mobile and tablet devices.