Hi everyone I have this carousel that is not scrolling anymore when more than one slider is involved with radius button. I have bootstrap carousel where I control carousel-inner with id's, block them and hiding them according to the input checked. all is going good but the only thing is when I go to the second slider it stop scrolling. this is my js:

 $('input[type=radio][name=e]').change(function () {

            if (this.value == 'a') {
                $("#f2").css("display", "none");
                $("#f3").css("display", "none");
                $("#f1").css("display", "block");
            }
            else if (this.value == 'b') {
                $("#f1").css("display", "none");
                $("#f3").css("display", "none");
                $("#f2").css("display", "block");
                // alert("Transfer Thai Gayo");
            }
            else if (this.value == 'c') {
                $("#f1").css("display", "none");
                $("#f3").css("display", "block");
                $("#f2").css("display", "none");
                // alert("Transfer Thai Gayo");
            }
        });

I'm starting with CSS where the first slider is block and the others are hiding and then I continue with JS.