How to solve the problem with the display of the Slick slider?

Question

JavaScript

Hello, this is the problem.

There are two tabs, both tabs have a slick slider.



Everything is ok in the first tab, the slider works. We switch to the second tab, the slider works there, but it does not show pictures. If you click on the arrow or resize the window they will appear.

Tell me how you can make the pictures appear immediately.

Answer 1

Try to initialize the slider after clicking on the tab:
$(".slider").slick('reinit');

Answer 2

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: block;    /* undo display:none          */
    height: 0;         /* height:0 is also invisible */
    //overflow: hidden;  /* no-overflow                */
}
.tab-content > .active, .pill-content > .active {
    height: auto;      /* let the content decide it  */
} /* bootstrap hack end */

https://github.com/kenwheeler/slick/issues/187#iss...

Answer 3

It's easier to change one state.
Try redefining display:none to visibility: hidden
This way the slider will see the opened block and everything will work. Only it is better for non-active blocks to set the forced height value to zero, but for the active auto . Otherwise, there will be reserved spaces from the rest of the blocks))

Answer 4

$('.slider.slick-initialized').slick("setPosition");

Answer 5

If I'm not mistaken, then this is just because of display: none;
I tried to do this for the modal, until I removed this property, the slider did not work!

Answer 6

.tab-content
  display: flex
  flex-direction: column
    
.tab-content > .tab-pane
  display: block !important
  height: 0

.tab-content > .active 
  display: block !important
  height: auto

I fiddled with this for a long time, maybe someone will need it! Solution for bootstrap 4, so that there are no gaps from blocks

Answer 7

Usually such moments are solved by initializing the slider first, then the tabs. If the plugin "does not know how" to work with hidden elements, first we feed it with a "visible" block, and then we hide it. In this case, if the tabs are made on plugins, then simply move their initialization after the slider, if, for example, the tabs are completely in css, then you will need to add a class after the initialization to "enable" the tabs.
But the bottom line, I think, is clear - when you start the slider, the elements should not be hidden.

Answer 8

I got into the same situation with Bootstrap 3 tabs.
The solution was found in the repository, described his version in an article on the blog