800,000+ WordPress sites are already using MetaSlider!

Display A Different Slideshow For Mobile Devices

Some MetaSlider users want to create a display a different slideshow on mobile and desktop devices. Often this is done to users can show more images and text to desktop visitors that may not translate well to a small screen.

The best way to do this with MetaSlider is to create two slideshows: one for mobile and one for desktop.


Different Slideshows in Gutenberg Block Editor

There are many different plugins available that allow you to show different blocks to different devices. One popular choice is the “Block Visibility” plugin.

Block Visibility plugin

With this plugin installed, you will be able to choose different options for your MetaSlider block. In the image below you can see these options:

  • Hide on desktop
  • Hide on tablet
  • Hide on mobile
Hiding MetaSlider blocks on some devices

Different Slideshows in Classic Editor and Page Builders

If you are using the Classic Editor, or a page-builder plugin such as Elementor or Beaver Builder, then you have several plugin options. One that we recommend is “Conditional Display for Mobile“. We’ll give you a quick example in this guide. Click here for the full documentation.

You can use combine the conditional display shortcodes with a MetaSlider shortcode. In this image below, I’m using the conditional display shortcodes to make sure this slider only appears to mobile users.


Different Slideshows With CSS

Another approach you can take is to use CSS. This approach will vary depending on how your WordPress site is built. Here is an example of CSS to show content on different devices. In this example, you could use the sample code with a MetaSlider shortcode: