vanilla-js-carousel
vanilla-js-carousel copied to clipboard
Add option to account for a full viewport width carousel
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.
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!
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
Hello, Zoltán. Kiprobáltam és nagyon strammul müködik. Kár, hogy nem adaptálodik az ablak mérethez.