MaterializeCSS轮播不工作答案

【问题标题】：MaterializeCSS carousel not workingMaterializeCSS轮播不工作
【发布时间】：2016-07-25 12:26:58
【问题描述】：

这不是this 的副本。不像

我一直在尝试在网页中包含 MaterializeCSS 轮播，并且我正在使用最新的 MaterializeCSS 文件。除轮播外，所有其他组件都可以正常工作。

我已经初始化了轮播，还尝试了其他元素，似乎一切正常。

<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!--Import materialize.css-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

        <link type="text/css" rel="stylesheet" href="css/main.css"  media="screen,projection"/>

        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    </head>

    <body>
        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

        <!--Other element insitialisations-->
        <script type="text/javascript" language="javascript">
            $( document ).ready(function(){

                $(".button-collapse").sideNav();//mobile screen menu init

                $('.carousel').carousel(); //carousel init

                $('.slider').slider({full_width: true});//slider init
            });

        </script>
        <div class="carousel carousel-slider">
            <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1"></a>
            <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2"></a>
            <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3"></a>
            <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4"></a>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript jquery materialize

【解决方案1】：

您使用了错误的类来初始化滑块。

使用

$('.carousel-slider').slider({full_width: true});//slider init

而不是

$('.slider').slider({full_width: true});//slider init

【讨论】：