Change slide width for active

[Draghmar]

Hi
Because I don't know if it's possible to achieve I didn't put as a new feature and I don't consider this to be a bug so...a blank issue it is. ;)
I wonder if it's possible to make slider that would work as slidesPerView: 'auto', which prevents Swiper to calculate same size for each slide, and at the same time take into consideration that active slide has different width then non-active one.
To visualize what I mean take a look at this image:

Green is active, yellow are within visible area and grey are outside of visible area.

I tried to make this by setting slidesPerView to specific number and then trying to change width on events but it didn't move proper amount of pixels. So instead of spending next few hours trying to guess parameters that could work I choose to ask you. :P

[nolimits4web]

Blank issues are not allowed. Move it to discussion then

[Draghmar]

Oh, sorry. Didn't notice there's a Discussion tab as it's not commonly used. :)

[Draghmar]

So is it some magic thing that no one knows if it's even possible to achieve? :P
The main issue I'm having is that Swiper have fixed sliding value for each element and I couldn't get it to correct itself or find a way to override. The closest I'm to get this is by setting default width through CSS for each element and different for active element while having slidesPerView: 'auto'. I'm using my own class on because I want Swiper to calculate all widths before setting wider one so the movement will place active slide at the left edge. Without this it ends up being move to far. But even though the movement length has proper value, it ends up not showing last element. Quite obvious why...
As a bonus issue, that may happen, is the fact that I don't actually want last elements to be wider. I mean, if you look at the pic above, when 3 is green 4-6 should be yellow and sliding should end. So it this example they won't be wider at any time.
Commented out are the things that I was testing.

const swiperRewardsFree = new Swiper('.swiper-container', {
	slidesPerView: 'auto',
	spaceBetween: 20,

	// observeParents: true,
	// observeSlideChildren: true,
	// setWrapperSize: true,

	// controller: {
	// 	by: 'container'
	// },

	on: {
		beforeSlideChangeStart: function(sw) {
			// this.update();
			// this.updateSlides();
			// this.updateSize();
		},
		slideChange: function(sw) {
			this.el.getElement('li.swiper-slide.on').removeClass('on');
			this.slides[this.activeIndex].addClass('on');
			// this.update();
			// this.updateSlides();
			// this.updateSize();
		},
		imagesReady: function() {
			this.slides[0].addClass('on');
		}
	},

	pagination: {
		el: '.swiper-pagination',
		clickable: true,
		bulletElement: 'div',
	},

	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});

[Draghmar]

Small update. I've manage to get it to work...sort of...by making huge workaround. One of the config did almost work but last slide wasn't shown because wrong slide length. I added dummy slide at the end which surprisingly did the trick. I had to make small adjustment to the way Swiper behaves on smaller screens by setting display: none on dummy and making on slide the same width as the rest.
I'm not happy with that solution though. Would rather have something more elegant...