CODEWITHSUNDEEP
javascriptjquerycsswordpresswoocommerce
Rich95
Rich95

Reputation: 343

WooCommerce Tabs not showing slider

So I have set up a WooCommerce product page. At the bottom of the page, there are the default WooCommerce tabs which I have labeled "Overview", "gallery", etc.

When I click on the gallery tab, there is shortcode on that page to display a slider using WooSlider.

The problem is that WooSlider (and most sliders in general) use the page width / height to display itself and since the gallery tab was off (content hidden), when you select it, the slider does not appear.

When you resize the browser window with the gallery tab selected, it is then able to display itself since the tab is now visible and it displays itself properly.

There are numerous posts on Google about this problem but I am having trouble implementing any of the fixes, especially because I am not so proficient with jquery (a lot of solutions require mods to the WooSlider jquery).

Can anyone with experience in this help me get this to work?

Thanks!

Upvotes: 0

Views: 332

Answers (1)

Devin
Devin

Reputation: 7720

find 

.wooslider.wooslider-type-posts img, body .wooslider.wooslider-type-attachments img

and add this style:

.wooslider.wooslider-type-posts img, 
body .wooslider.wooslider-type-attachments img{
height: auto; min-width: 100vw;
}

basically, we tell WooSlider to take the max available width of the viewport for the imagem, and then scale the height automatically

Upvotes: 0

Related Questions