Guys, please help, the second day I suffer here http://test2.posh.pro domain where the layout, trabla in the tabs New products Popular goods and Seasonal goods, made a script that allows you to click on these tabs all okay, but when you click on what then another taboo, in the slider heresy some kind of layout code is displayed

Jquery script code

$("#carousel").children().not(":first").hide(); $(".mini-menu .primary-tab").click(function() { $(".mini-menu .primary-tab").removeClass("active").eq($(this).index()).addClass("active"); $("#carousel").children().hide().eq($(this).index()).fadeIn() }).eq(0).addClass("active");

2 answers 2

If anyone is interested in the decision like this http://css-live.ru/articles/eshhyo-chetyre-sposoba-skryt-i-pokazat-elementy-pri-pomoshhi-html-i-css.html here is the script code jquerry $("#carousel").children().not(":first").css({"height":"0","overflow":"hidden"}); $(".mini-menu .primary-tab").click(function() { $(".mini-menu .primary-tab").removeClass("active").eq($(this).index()).addClass("active"); $(".slider-wrapper").css({"height":"0","overflow":"hidden"}).eq($(this).index()).css('height','440px') }).eq(0).addClass("active"); $("#carousel").children().not(":first").css({"height":"0","overflow":"hidden"}); $(".mini-menu .primary-tab").click(function() { $(".mini-menu .primary-tab").removeClass("active").eq($(this).index()).addClass("active"); $(".slider-wrapper").css({"height":"0","overflow":"hidden"}).eq($(this).index()).css('height','440px') }).eq(0).addClass("active");

Comment: User Vlad Vlad was absolutely right that the slider plugin could not set the slider width, as it was written in display: none styles. What was used: Based on the proof above, we hide the element not display: none, but using height: 0 and overflow: hidden. By clicking, we return this item. I understand that maybe this is a crutch, but it works.

    As it seems to me, due to the fact that your tabs (except the first one) are hidden, the slider script cannot calculate the width of the slide, so it is set to all widths: 0px. You need to play around with styles, and find a workaround to hide elements, such as the visibility property - it leaves a block of such width | height of which it is, and by adding position absolute you can get around the problem that the block takes up space on the page, you also need the block hide it in the background (z-index) as it remains clickable (in my opinion). Either it is necessary to somehow enable the slider to do its dirty work before the blocks are hidden (it can also have a width recalculation function).

    • Understood, thanks for the tip, I will find a solution to accomplish your goal - Dmitry Berezhnoy