表单内的滑块 - Input和TextArea元素不起作用

Question

JsFiddle here.

这个问题是关于MaterialiseCSS前端框架的。我想在.carousel元素中使用<form>（请参阅source获取更多信息）。我需要的效果是一个包含表单不同输入字段的滑块。

问题是文本字段和文本区域元素在用户点击它们时不会被激活。

这是一个SSCCE：

HTML：

<section class="row" >

<div class="card hoverable medium indigo darken-4 col l8 offset-l2 m12 s12">
    <div class="card-content">

            <form id="createForm" action="" method="get">

                <div class="carousel carousel-slider center" data-indicators="true">
                    <div class="carousel-item white-text">

                        <div class="input-field">
                            <input type="text" id="idInput" class="validate" />
                            <label for="idInput">ID</label>
                        </div>

                        <div class="input-field">
                            <input type="text" id="nameInput" class="validate" />
                            <label for="nameInput">Name</label>
                        </div>

                        <div class="input-field">
                            <textarea id="descriptionInput" class="materialize-textarea validate"></textarea>
                            <label for="descriptionInput">Desc</label>
                        </div>

                    </div><!--.carousel-item-->


                    <div class="carousel-item white-text">Carousel Item Two</div><!--.carousel-item-->


                    <div class="carousel-item white-text">Carousel Item Three</div><!--.carousel-item-->
                </div><!--.carousel-->

            </form>


    </div><!--.card-content-->
</div><!--card-->

</section>

JS：

$(".carousel").carousel({
        fullWidth : true,
        noWrap : true
    });