The easiest way to do this is if the images are in this ratio ;) – why force something via css that can already be created this way during creation.

on Advanced tab of the Element : under Performance – choose : “Do not use Responsive Images”
if you do not have that choice: put this to your child-theme functions.php:

add_theme_support('avia_show_alb_responsive_image_option');

then the webp will do their job. For some reason, the images from the srcset are superimposed.

maybe it is because your images are no jpg images. They are webp files.
it should work with webp too, but i do not know how browsers act with a different file extension.

Edit: hm – the webp (renamed) do not work – and it does not work with webp graphics.
I don’t quite understand this yet, because the images viewed in the Pure Browser are both sharp.

see: https://webers-testseite.de/one-two/

if you only have a slideshow – without buttons and without links on the slides – you can have left side image: prev – and right side image : next
only by css:
(the navigation arrows must be selected as navigation controls – but we do not show them)

.avia-slideshow-arrows.avia-slideshow-controls {
  height: 100% !important;
  width: 100% !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

#top .avia-slideshow-arrows a {
  width: 50% !important;
  height: 100%;
  top: 0;
  margin:0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}

#top .avia-slideshow-arrows a.prev-slide {
  left: 0;
}

#top .avia-slideshow-arrows a.next-slide {
  right: 0;
}

if you like to have that arrows – we must have that css in addition:
(and remove the opacity : 0 above)

#top .avia-slideshow-arrows a.prev-slide:before {
  text-align: left;
}

#top .avia-slideshow-arrows a.next-slide:before {
  text-align:right;
}

#top .avia-slideshow-arrows a:before  {
  top: 50%;
  width: 30px;
  height: 60px;
}

#top .avia-slideshow-arrows a.prev-slide:before  {
  left: 20px;
  padding-left: 20px
}

#top .avia-slideshow-arrows a.next-slide:before  {
  right: 20px;
  left: auto;
  padding-right: 20px
}

see css solution in action : https://webers-testseite.de/easy-slider-navigation/

but if you have buttons inside those slides we have to do it via child-theme functions.php:
( without the css above – but without prev next option – but you can use buttons on sliders )

https://pastebin.com/sc2A3XqZ

• This reply was modified 1 year, 3 months ago by Yigit.
• This reply was modified 1 year, 3 months ago by Yigit.

the crux is – if you have links on your images – they will interfere with prev – next navigation.
If no links are assigned to the images, then it is possible to have left side prev – right side next.

if you got no additional links on the images but buttons inside the slide we can have next slide for image click.