Custom Carousel for Mobile and PC

dipanjan94

I want to create a carousel of images in my homepage. I wish to have two galleries, one dedicated to landscape images and one to portrait.
I want to show only the landscape images to people with bigger screen (tab, laptop, PC) and only the portrait images to people viewing my website from mobile.

Is it possible to do that? If so, how?

Hikin' Mike

Yes, it's possible. You will have to creat two Carousels, one for the desktop and one for mobile. You will need to know the specific widget number (.sm-page-widget-xxxxxxxx and .sm-page-widget-yyyyyyyy) for both. Using CSS you will hide mobile on desktop and hide desktop from moble. You will need to use a webtool to find what the widget number.

/*
* Desktop and Mobile Carousel
***********************************************/
.sm-page-widget-carousel.sm-page-widget-yyyyyyyy {display: none;} /* Mobile Carousel */

@media ( max-width: 736px ) {

  .sm-page-widget-carousel.sm-page-widget-xxxxxxxx {display: none;} /* Desktop Carousel */
  .sm-page-widget-carousel.sm-page-widget-yyyyyyyy {display: block;} /* Mobile Carousel */

}

dipanjan94

Hey Mike, thank you so much! I tried to find out the widget number but failed. I have added two carousels to my homepage https://www.dipanjanpal.com/
Could you please help me with the widget numbers? Thanks!

Hikin' Mike

@dipanjan94 said:
Could you please help me with the widget numbers? Thanks!

You bet. The top one is .sm-page-widget-27913793 and the bottom is sm-page-widget-27913856.

Hikin' Mike

This is what it should be:

/*
* Desktop and Mobile Carousel
***********************************************/
.sm-page-widget-carousel.sm-page-widget-27913856 {display: none;} /* Mobile Carousel */

@media ( max-width: 736px ) {

  .sm-page-widget-carousel.sm-page-widget-27913793 {display: none;} /* Desktop Carousel */
  .sm-page-widget-carousel.sm-page-widget-27913856 {display: block;} /* Mobile Carousel */

}