I'm searching for a solution for my image slider with variable height of the images. The tool I'm using ist Swiper with the creative effect. The image slider should show 5 images on large screens and 3 on small ones, the center image should be the largest one.

A function of the slider should be to change the images size according to the touch event - this works with the exception of the space between the first and the last slide, at this space no touch events are detected (See Problem overview on the different screen sizes).

Although it is not possible for me to show 5 images on large screens using the breakpoints - only without using the 'creative effect'. I've tested to programmatically change the size of each image while sliding, but it doesn't work really smooth...

I hope you guys can help me, I'm struggling with the slider since days...

 let imgs = document.getElementsByClassName('swiper-slide');
  var swiper = new Swiper(".mySwiper", {
    
    breakpoints: {
      // when window width is >= 320px
      320: {
        slidesPerView: 3,
        spaceBetween: 10
      },
      // when window width is >= 576px
      576: {
        slidesPerView: 3,
        spaceBetween: 20
      },
      // when window width is >= 768px
      768: {
        slidesPerView: 5,
        spaceBetween: 20
      },
        992: {
        slidesPerView: 5,
        spaceBetween: 30
      },
    },
    

   effect: 'creative',
  
    creativeEffect: {
      //progressMultiplier: 0.9,
      shadowPerProgress: true,
      prev: {
          // will set `translateX(-122%)` on previous slides
          scale: 0.7,
          translate: ['-122%', 0, 0],
      },
      next: {
          // Slide scale
          scale: 0.7,
          // will set `translateX(122%)` on next slides
          translate: ['122%', 0, 0],
      },
    },
    
    loop: true,
    centeredSlides: true,
  });

    swiper.on('slideChange', function () {
      //console.log('slide changed');
      console.log(swiper.realIndex);
      //var img1 = document.getElementById('img1');
      var actIn = swiper.realIndex;
      const index_currentSlide = swiper.realIndex;
      const currentSlide = swiper.slides[index_currentSlide]
    
      //currentSlide.style.height = "10%"; -> maybe possible with height changes?!
      swiper.update();
      swiper.updateSlides();
    });