vanilla-js-carousel icon indicating copy to clipboard operation
vanilla-js-carousel copied to clipboard

Add option to account for a full viewport width carousel

Open wking-io opened this issue 7 years ago • 3 comments

I have a use case where this is full screen and since it only calculates the element.offsetWidth it is off by the size of the scrollbar in browsers.

wking-io avatar Aug 29 '17 21:08 wking-io

As of now the carousel isn't responsive, so the images not scaling to the viewport width, i.e. max-width: 100% won't work. Did you mean by "full screen" just a fairly large image (wider than the screen) that's being cut off? If not - can you please paste the CSS you're using? Thanks!

zoltantothcom avatar Aug 30 '17 16:08 zoltantothcom

So the CSS I have used is:

width: 100vw;

And then to get it to work in the js when it calculates the image width I added the following:

var carousel = new Carousel({
	elem: 'blog-slider',    // id of the carousel container
	fullWidth: true     // show slider full screen
});

// Added this to the plugin options setup
slideWidth = options.fullWidth ? window.innerWidth : element.offsetWidth;
// Then replaced the three instances in the code

wking-io avatar Aug 30 '17 17:08 wking-io

Hello, Zoltán. Kiprobáltam és nagyon strammul müködik. Kár, hogy nem adaptálodik az ablak mérethez.

zoliky avatar Feb 28 '19 15:02 zoliky