Slide 1 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 2 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 3 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here

How to use

  1. Add container and give it classname aspect-ratio-swiper.
  2. Drag in a slides widget and add images, text…
  3. Select the container, go to advanced tab> Custom CSS…  and copy paste this CSS.
				
					:root {
    /*change aspect ratio per device here */
    --aspect-ratio_desktop: 16/9;
    --aspect-ratio_tablet: 1/1;
    --aspect-ratio_mobile: 5/10
}

.aspect-ratio-swiper .swiper-slide {
    height: auto !important;
}

[data-elementor-device-mode="desktop"] .aspect-ratio-swiper,
[data-elementor-device-mode="desktop"] .swiper-slide
{
    aspect-ratio: var(--aspect-ratio_desktop);
}


[data-elementor-device-mode="tablet"] .aspect-ratio-swiper, [data-elementor-device-mode="tablet"] .swiper-slide  {
    aspect-ratio: var(--aspect-ratio_tablet);
}


[data-elementor-device-mode="mobile"] .aspect-ratio-swiper, [data-elementor-device-mode="mobile"] .swiper-slide {
    aspect-ratio: var(--aspect-ratio_mobile);
}