materialize css carousel | Front-end | Alura - Cursos online de tecnologia

materialize css carousel

<div class="carousel carousel-slider center" data-indicators="true"> <div class="carousel-fixed-item center"> <a class="btn waves-effect white grey-text darken-text-2" href="contato.html">solicite um orçamento</a> </div> <div class="carousel-item green white-text center" href="#one!"> <br> <h1> O que muda com <br> o zem? </h1> </div> <div class="carousel-item red white-text" href="#one!"> <p class="white-text">O cidadão participa ativamente colaborando para a gestão de sua cidade.</p> </div> <div class="carousel-item" href="#two!" img src="materialize/img/cap.jpg"> </div> <div class="carousel-item green white-text" href="#three!"> <h2>Third Panel</h2> <p class="white-text">This is your third panel</p> </div>

Nicolle, boa tarde!

O problema no seu código, é o trecho onde carrega a imagem, veja:

<div class="carousel-item" href="#two!" img src="materialize/img/cap.jpg">

Mas mesmo corrigindo, não apareceu na minha tela também, mas neste caso, eu precisei definir uma altura para o carrossel, coloquei 500px.

Segue o mesmo código completo, testei aqui e funcionou com estes ajustes.

<!DOCTYPE html>

<html>
    <head>
        <!-- Compiled and minified CSS -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

          <script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

          <!-- Compiled and minified JavaScript -->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
    </head>

    <body>
        <div class="carousel carousel-slider center" data-indicators="true" style="height: 500px;">

            <div class="carousel-fixed-item center">
              <a class="btn waves-effect white grey-text darken-text-2" href="contato.html">solicite um orçamento</a>
            </div>



               <div class="carousel-item green white-text center" href="#one!">


      <br>
      <h1> O que muda com <br> o zem? </h1>

    </div>


    <div class="carousel-item red white-text" href="#one!">

      <p class="white-text">O cidadão participa ativamente
      colaborando para a gestão de sua cidade.</p>
    </div>

    <div class="carousel-item" href="#two!" >

        <img src="https://www.minascap.com/MINASCAP/_lib/file/img/EDICAO-51-MINASCAP--BANNER%202.jpg(1).jpg">

    </div>



    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>

    </div>

    <script>
        $(document).ready(function(){
          $('.carousel').carousel();
        });
    </script>
    </body>
</html>