Slide wider than viewport

[coreyworrell]

Test case: http://codepen.io/coreyworrell/pen/PNKyrQ

This mostly applies to when you have the freeScroll setting on.

You'll see there how if you have a slide that is wider than the viewport, you have to "overscroll" to see the hidden part of the slide (overscroll left for the first slide, or right for the last slide). Setting the cellAlign option will allow you to see the entire slide, but only the first or last (depending on if you set it as left or right).

Is it possible to allow user to scroll from the left edge of the first slide to the right edge of the last slide?

Thank you.

[desandro]

Thank you for reporting this bug and including a test case! Yup, this is indeed a bug. But I'm not sure how often other users are going to run into it.

+1 or add :+1: reaction if you'd like to see this bug fixed.

[jshrssll]

I'm also having this issue. Has anyone figured out a solution?

My use case is multiple slides with 3 columns inside each slide, which is making the slide wider than the carousel viewport. 👎

[Nathanw]

Why do we need to 👍or +1 for you to fix a bug?

[desandro]

@Nathanw Because I need to way to prioritize issues. 'Fixing bugs' sometimes adding complexity to the codebase which makes it harder to maintain.

[rsepierre]

same here

[flmuel]

would be nice to get this bug fixed :)

[xxvii]

+1 thanks

[TaraOShea]

+1

[Tim-Wils]

If anyone is interested in a hack to fix this. I fixed it with overriding _containSlides with this: ` Flickity.prototype._containSlides = function() { if ( !this.options.contain || this.options.wrapAround || !this.cells.length ) { return; } var isRightToLeft = this.options.rightToLeft; var beginMargin = isRightToLeft ? 'marginRight' : 'marginLeft'; var endMargin = isRightToLeft ? 'marginLeft' : 'marginRight'; var contentWidth = this.slideableWidth - this.getLastCell().size[ endMargin ];

	// content is less than gallery size
	var isContentSmaller = contentWidth < this.size.innerWidth;

	// bounds
	var beginBound = this.cursorPosition + this.cells[0].size[ beginMargin ];
	var endBound = contentWidth - this.size.innerWidth * ( 1 - this.cellAlign );
	// contain each cell target

	var slideI = 1;
	this.slides.forEach( function( slide ) {
	  if ( isContentSmaller ) {
		// all cells fit inside gallery
		slide.target = contentWidth * this.cellAlign;
	  } else {
		// contain to bounds
		slide.target = Math.max( slide.target, beginBound );
		slide.target = Math.min( slide.target, endBound );

		if (slideI == this.slides.length && this.options.freeScroll) {
			slide.target = Math.max( slide.target, endBound );
		}
	  }
	  slideI++;
	}, this );
};

`