Why does the js slider or carousel disappear until you pull the edge of the browser?

Question

css

Good afternoon, please explain, I will give an example:
I have a carousel or slider in the body of the document, bxSlider or any other,
I call the slider with parameters in the script with the function Everything is standard, the slider itself lies in the block that is in display: none; On button click I wrap the block with class tag '.active{display:block}' The block appears but the slider is not displayed until you pull the browser over the edge, I started looking at different sliders and carousels and in most cases they do not work when the content is loaded and the class the slider's parent is set to display non. $('.slider').bxSlider();

Answer 1

Most likely the problem is in display:none : the width/height of the blocks are incorrectly calculated when the slider is initialized. And if you drag the browser over the edge, the resize event occurs , which is usually processed in the slider and the size of the blocks is recalculated. There are several solutions to the problem:
1. hide the block not with display:none, but for example with position: absolute; top: -10000px; left:-10000px;
2. when activated, call a function from the api of the slider, which forces the height/width to be recalculated.
For bxSlider, I think the function is suitable

slider = $('.bxslider').bxSlider();
slider.reloadSlider();